Imagemaps - es kann jeder (erklärt mit PI) | Gegen Bilderklau

Soso

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:

Einen Kreis (shape=circle) definiert ihr mit den Koordinaten für x,y,r
das bedeutet:

Ein Polygon (Figur mit beliebig vielen Ecken) (shape=polygon) definiert ihr mit den Koordinaten x1,y1,x2,y2 ... xn,yn
das bedeutet:

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 Augenzwinkern

Ö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 Augenzwinkern

lg
Soso

Ps. Bis jetzt weiß ich noch nicht wies bei Desis geht Augenzwinkern

Schnegge

Supi +lob+
Endlich mal jemand, der erklärt wie's mit PI geht. Hab da nie durchgeblickt.
Echt super C=

Soso

Danke! +froi+
Aber das war auch mal nötig Augenzwinkern

Crazy_nina

suppa erklärt ^^
könntest du vllt. mal einen vollständigen code reinstellen?

Soso

Danke! ^^
Ich stell gleich einen rein!

Crazy_nina

dankö ^^

hmm... ich bin zu dumm x) und mit meinem proggi gehts auch ned wirklich ^^

Soso

Welches Proggi haste denn?
Vielleicht kann ich dir helfen!

Crazy_nina

gimp ^^

Soso

Nee, sorry
Damit hab ich keine Erfahrung Augenzwinkern

Crazy_nina

schade, aber ich find auch niemanden, der mir das mal machen könnte x)

Felixx

Was ist der "map name"?was soll ich da rein schreiben?
EDIT:
Großese Lob!Echt super erklärt, habs jetzt auch gecheckt großes Grinsen

Danke

lg
Lisi

Soso

"Map name"
ist der Name der Imagemap.
Dort kannst jeden Namen eingeben also z.B.
"Entermap" etc.
völlig egal Augenzwinkern

Den sieht man nachher auch nicht!

Felixx

Okay, danke

Ärzte xD

Wie krieg ich denn den Radius raus?

Unbelievable

SUUUUUUUUPER großes Grinsen

hab mein erstes imagemap menü gecodet! hatte zwar anlaufschwierigkeiten aber war ruck zuck gelöst smile

danke dir

Soso

dankeschön ^^

und bitte, bitte Zunge raus

Soraya

Hey,
echt geiler Tut, habs jetzt endlich auch gepeilt fröhlich

Vielen, vielen Dank, Soso *knutsch* großes Grinsen

Ach ja, das geht sogar mit Paint, habs auf jeden Fall damit gemacht *gg* xD
Großes Lob für den geilen Tut smile

Lg,
Soraya

Soso

Hey Danke! +zurückknutsch+
Wir müssen doch was für den Coden-Nachwuchs tun ^^^^

Soraya

Stimmt

Wie das bei Designen geht weißt du nicht, oder?
Aber bei deinem VRH hast du doch auch voll das geile Design fröhlich

...

Soso

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