Gegen Bilderklau - Das Original (https://www.gegen-bilderklau.net/index.php)
- Archive (https://www.gegen-bilderklau.net/board.php?boardid=73)
--- Archiv (https://www.gegen-bilderklau.net/board.php?boardid=62)
---- Alte Tutorials (https://www.gegen-bilderklau.net/board.php?boardid=64)
----- Imagemaps - es kann jeder (erklärt mit PI) (https://www.gegen-bilderklau.net/thread.php?threadid=31647)
Geschrieben von Soso am 17.09.2005 um 18:09:
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
Geschrieben von Schnegge am 17.09.2005 um 21:54:
Supi +lob+
Endlich mal jemand, der erklärt wie's mit PI geht. Hab da nie durchgeblickt.
Echt super C=
Geschrieben von Soso am 18.09.2005 um 07:56:
Danke! +froi+
Aber das war auch mal nötig
Geschrieben von Crazy_nina am 18.09.2005 um 10:58:
suppa erklärt ^^
könntest du vllt. mal einen vollständigen code reinstellen?
Geschrieben von Soso am 18.09.2005 um 11:01:
Danke! ^^
Ich stell gleich einen rein!
Geschrieben von Crazy_nina am 18.09.2005 um 12:31:
dankö ^^
hmm... ich bin zu dumm x) und mit meinem proggi gehts auch ned wirklich ^^
Geschrieben von Soso am 18.09.2005 um 12:57:
Welches Proggi haste denn?
Vielleicht kann ich dir helfen!
Geschrieben von Crazy_nina am 18.09.2005 um 13:25:
gimp ^^
Geschrieben von Soso am 18.09.2005 um 13:33:
Nee, sorry
Damit hab ich keine Erfahrung
Geschrieben von Crazy_nina am 18.09.2005 um 13:33:
schade, aber ich find auch niemanden, der mir das mal machen könnte x)
Geschrieben von Felixx am 24.10.2005 um 14:13:
Was ist der "map name"?was soll ich da rein schreiben?
EDIT:
Großese Lob!Echt super erklärt, habs jetzt auch gecheckt
Danke
lg
Lisi
Geschrieben von Soso am 24.10.2005 um 14:36:
"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!
Geschrieben von Felixx am 24.10.2005 um 14:37:
Okay, danke
Geschrieben von Ärzte xD am 28.10.2005 um 20:31:
Wie krieg ich denn den Radius raus?
Geschrieben von Unbelievable am 03.11.2005 um 23:20:
SUUUUUUUUPER
hab mein erstes imagemap menü gecodet! hatte zwar anlaufschwierigkeiten aber war ruck zuck gelöst
danke dir
Geschrieben von Soso am 05.11.2005 um 19:28:
dankeschön ^^
und bitte, bitte
Geschrieben von Soraya am 18.11.2005 um 20:25:
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
Geschrieben von Soso am 18.11.2005 um 20:52:
Hey Danke! +zurückknutsch+
Wir müssen doch was für den Coden-Nachwuchs tun ^^^^
Geschrieben von Soraya am 18.11.2005 um 22:25:
Stimmt
Wie das bei Designen geht weißt du nicht, oder?
Aber bei deinem VRH hast du doch auch voll das geile Design
...
Geschrieben von Soso am 19.11.2005 um 06:28:
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
Forensoftware: Burning Board, entwickelt von WoltLab GmbH