 Imagemaps - es kann jeder (erklärt mit PI) |
Soso
john paul george ringo.
Dabei seit: 18.02.2005
Beiträge: 1.866
 |
|
| Imagemaps - es kann jeder (erklärt mit PI) |
     |
Da ich jetzt oft im Forum gelesen habe, dass viele es nicht hinkriegen eine Imagemap zu coden mache ich mal ein Tut dazu.
Denn es kann wirklich jeder.
Das brauche ich:
- PI oder ein anderes (ähnliches) Grafikprogramm
- den Windows-Editor
- etwas Geduld
Okay, fangen wir an
Zuerst öffnen wir unser Grafikprogramm und die Datei (das Bild), dass auf der Homepage später als Imagemap erscheinen soll.
In meinem Fall ist es ein Enter.
Zur Vereinfachung ziehen wir einen schwarzen Rand (die Form ist euch überlassen. Jenachdem wie der Bereich aussehen soll den man anklickt = Viereck, Kreis, Polygon) um einen Bereich den man anklicken soll (ich habe es rot angedeutet)
Nun nehmen wir den Editor zur Hand und geben erst einmal die Grundformen des HTML-Codes ein.
| code: |
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
|
<html>
<body>
<p align="center">
<map name="[B]??[/B]">
</map>
<img src="[B]??.jpg[/B]" usemap="#[B]??(hier muss wieder der map name hin)[/B]" border=0>
</body>
</html> |
|
(die dickgedruckten Sachen müsst ihr noch ändern)
Einen Auswahlbereich coden
Bevor wir weiterarbeiten muss ich euch eine kleine Tabelle geben.
Diese gibt an wie ihr die einzelnen Formen der Auswalbereiche definiert.
Ein Viereck (shape=rect) definieren ihr mit den Koordinaten x1,y1,x2,y2
das bedeutet:
x1 = linke obere Ecke, Pixel von links y1 = linke obere Ecke, Pixel von oben
x2 = rechte untere Ecke, Pixel von links
y2 = rechte untere Ecke, Pixel von oben
Einen Kreis (shape=circle) definiert ihr mit den Koordinaten für x,y,r
das bedeutet:
x = Mittelpunkt, Pixel von links y = Mittelpunkt, Pixel von oben
r = Radius in Pixel
Ein Polygon (Figur mit beliebig vielen Ecken) (shape=polygon) definiert ihr mit den Koordinaten x1,y1,x2,y2 ... xn,yn
das bedeutet:
x = Pixel einer Ecke von links y = Pixel einer Ecke von oben
Ihr könnt so viele Ecken definieren wie ihr wollt. Von der letzten definierten Ecke müsset ihr euch eine Linie zur ersten definierten Ecke hinzudenken. Diese schließt das Polygon.
Das war jetzt viel Theorie. Versuchen wirs mal in der Realität
Öffnet ersteinmal den Editor, wo ihr schon den obrigen Code eingegeben habt.
Nun kommt nämlich der Code für die Auswahlbereiche.
| code: |
1:
|
<area shape=[B]??(rect,circle,polygon)[/B] coords="[B]?,?,?,?[/B]" href="[B]??[/B].html"> |
|
Wie immer müsst ihr die dickgedruckten Sachen noch ändern.
Diesen Code schreibt ihr sooft zwischen
<map name="??">
und
</map>
wie ihr Stellen habt, die ein Auswahlbereich sein sollen.
area shape= steht für die form die der Auswahlbereich haben soll (rect,circle,polygon)
coords= steht für die Koordinaten die der Auswahlbereich hat (dazu gleich mehr)
und
href= gibt an auf welche Seite dieser Auswahlbereich verweisen soll.
Jetzt könnt ihr wieder euer Grafikprogramm öffnen. In meinem Beispiel definieren wir ein Viereck.
Wählt jezt den Abstand zwischen dem Rand und der linken obren Ecke des Objektes aus, klickt mit der linken MAutaste drauf und wöhlt "Objekt umwandeln) aus (so funktioniert es mit PI)
Nun klickt ihr wieder auf den bereich und dann auf Eigenschaften -> Position und Größe.
In diesem Fall brauchen wir die Breite des Objektes.
Gebt sie an der Stelle vom ersten Fragezeichen ein.
Der Code sähe dann wie folgt aus.
| code: |
1:
|
<area shape=rect coords="9,?,?,?" href="?.html"> |
|
So macht ihr es auch mit den anderen Fragezeichen (wie steht ja in der Tabelle) und bei den anderen zu werdenden Auswahlbereichen.
So ähnlich funktioniert es natürlich auch bei einem Kreis und einem Polygon.
So könnte ein vollständiger Code dann aussehen:
| code: |
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
|
<html>
<body link="#000000" alink="#000000" vlink="#000000">
<STYLE type="text/css">
<!--
BODY {
scrollbar-face-color: #ffffff;
scrollbar-highlight-color: #000000;
scrollbar-3dlight-color: #ffffff;
scrollbar-darkshadow-color: #ffffff;
scrollbar-shadow-color: #ffffff;
scrollbar-arrow-color: #000000;
scrollbar-track-color: #ffffff;
}
-->
</STYLE>
<p align="center">
<map name="Mutterschaftsboxen">
<area shape=rect coords="28,15,48,80" href="isabella.html">
</map>
<img src="mutterschaftsboxena.jpg" usemap="#Mutterschaftsboxen" border=0>
</body>
</html>
|
|
Bei Fragen screibt hier rein oder schickt mir ne PN
lg
Soso
Ps. Bis jetzt weiß ich noch nicht wies bei Desis geht
__________________
Dieser Beitrag wurde 1 mal editiert, zum letzten Mal von Soso: 18.09.2005 11:04.
|
|
17.09.2005 18:09 |
|
|
Schnegge
...
Dabei seit: 30.04.2005
Beiträge: 5.795
|
|
Supi +lob+
Endlich mal jemand, der erklärt wie's mit PI geht. Hab da nie durchgeblickt.
Echt super C=
|
|
|
17.09.2005 21:54 |
|
|
Soso
john paul george ringo.
Dabei seit: 18.02.2005
Beiträge: 1.866
Themenstarter 
|
|
Danke! +froi+
Aber das war auch mal nötig
__________________
|
|
|
18.09.2005 07:56 |
|
|
Crazy_nina
Mitglied
Dabei seit: 28.03.2005
Beiträge: 999
Herkunft: Nähe Frankfurt
|
|
suppa erklärt ^^
könntest du vllt. mal einen vollständigen code reinstellen?
__________________
|
|
|
18.09.2005 10:58 |
|
|
Soso
john paul george ringo.
Dabei seit: 18.02.2005
Beiträge: 1.866
Themenstarter
|
|
Danke! ^^
Ich stell gleich einen rein!
__________________
|
|
|
18.09.2005 11:01 |
|
|
Soso
john paul george ringo.
Dabei seit: 18.02.2005
Beiträge: 1.866
Themenstarter
|
|
Welches Proggi haste denn?
Vielleicht kann ich dir helfen!
__________________
|
|
|
18.09.2005 12:57 |
|
|
Crazy_nina
Mitglied
Dabei seit: 28.03.2005
Beiträge: 999
Herkunft: Nähe Frankfurt
|
|
gimp ^^
__________________
|
|
|
18.09.2005 13:25 |
|
|
Soso
john paul george ringo.
Dabei seit: 18.02.2005
Beiträge: 1.866
Themenstarter
|
|
Nee, sorry
Damit hab ich keine Erfahrung
__________________
|
|
|
18.09.2005 13:33 |
|
|
Crazy_nina
Mitglied
Dabei seit: 28.03.2005
Beiträge: 999
Herkunft: Nähe Frankfurt
|
|
schade, aber ich find auch niemanden, der mir das mal machen könnte x)
__________________
|
|
|
18.09.2005 13:33 |
|
|
Soso
john paul george ringo.
Dabei seit: 18.02.2005
Beiträge: 1.866
Themenstarter
|
|
"Map name"
ist der Name der Imagemap.
Dort kannst jeden Namen eingeben also z.B.
"Entermap" etc.
völlig egal
Den sieht man nachher auch nicht!
__________________
|
|
|
24.10.2005 14:36 |
|
|
Felixx 
Mitglied
Dabei seit: 30.05.2005
Beiträge: 2.321
Herkunft: Österreich / Wien
|
|
|
|
24.10.2005 14:37 |
|
|
Ärzte xD
Mitglied
Dabei seit: 13.09.2005
Beiträge: 216
|
|
Wie krieg ich denn den Radius raus?
|
|
|
28.10.2005 20:31 |
|
|
Unbelievable
Mitglied
Dabei seit: 28.05.2005
Beiträge: 1.145
|
|
SUUUUUUUUPER 
hab mein erstes imagemap menü gecodet! hatte zwar anlaufschwierigkeiten aber war ruck zuck gelöst 
danke dir
__________________
|
|
|
03.11.2005 23:20 |
|
|
Soso
john paul george ringo.
Dabei seit: 18.02.2005
Beiträge: 1.866
Themenstarter
|
|
dankeschön ^^
und bitte, bitte 
__________________
|
|
|
05.11.2005 19:28 |
|
|
Soraya
look me in the eyes babe ...
Dabei seit: 13.02.2005
Beiträge: 2.426
Herkunft: NRW
|
|
Hey,
echt geiler Tut, habs jetzt endlich auch gepeilt 
Vielen, vielen Dank, Soso *knutsch*
Ach ja, das geht sogar mit Paint, habs auf jeden Fall damit gemacht *gg* xD
Großes Lob für den geilen Tut
Lg,
Soraya
__________________
|
|
|
18.11.2005 20:25 |
|
|
Soso
john paul george ringo.
Dabei seit: 18.02.2005
Beiträge: 1.866
Themenstarter
|
|
Hey Danke! +zurückknutsch+
Wir müssen doch was für den Coden-Nachwuchs tun ^^^^
__________________
|
|
|
18.11.2005 20:52 |
|
|
Soraya
look me in the eyes babe ...
Dabei seit: 13.02.2005
Beiträge: 2.426
Herkunft: NRW
|
|
Stimmt
Wie das bei Designen geht weißt du nicht, oder?
Aber bei deinem VRH hast du doch auch voll das geile Design
...
__________________
|
|
|
18.11.2005 22:25 |
|
|
Soso
john paul george ringo.
Dabei seit: 18.02.2005
Beiträge: 1.866
Themenstarter
|
|
Wieder mal danke xD
Also das hab ich mit ner anderen Methode mmit PI gemacht, die ich erst vor kurzem rausgefunden hab.
Bei Bedarf kann ich die auch nochmal erklären, man muss dann nur ganz viele kleine Teile hochladen X)
lg
Soso
__________________
|
|
|
19.11.2005 06:28 |
|
|
|
Impressum
|
