[HTML] Imagemap coden mit Paint

Felixx

Joa, da ich gehört habe, das man dazu nen Tut braucht, hab ich mal einen gemacht. Es ist eigentlich das gleiche wie bei diesem Tut, außer die Coords und daher werd ich auch nen Teil vielleicht kopieren.

Ihr braucht dazu nur

HTML Editor bzw. Phase5
Paint
Das Imagemap
etwas Geduld

Als erstes öffnet ihr einen HTML-Editor und kopiert diesen Code hinein:

<html>

<body>

<p align="center">

<map name="???">

<area shape=??? (rect,circle,polygon) coords="?,?,?,?" href="???.html">

</map>
<img src="???" usemap="#??? border=0>

</body>
</html>

Wo Fragezeichen sind, müsst ihr dann was eingeben.
Dann öffnet ihr Paint und das Bild, wo man später draufklicken soll.

Die ersten 3 Fragezeichen, findet ihr bei "<map name="???">
Dort müsst ihr euch einen namen für das Imagemap ausdenken und natürlich die ??? ersetzten (freierfinden)

Als nächstes finden wird dann
<area shape=?? verwirrt

rect,circle,polygon) coords="?,?,?,?" href="???">
vor.
die ersten ??? ersetzten wir durch die form die der Bereich auf den man klicken soll, haben soll.
"rect"=Viereck und in diesem Fall muss es mit folgenden coords gecodet werden:

linke, obere Ecke von links
linke, obere Ecke von oben
rechte, untere Ecke von links
rechte, untere Ecke von oben

shape=Kreis und wird gecodet mit

Mittelpunkt, Pixel von links
Mittelpunkt, Pixel von oben
Radius in Pixel

polygon= eine Figur mit beliebig vielen Ecken und dazu braucht ihr für jede Ecke

Pixel von links
Pixel von rechts

So und jetzt noch wie man auf die Coords kommt:

Ihr nehmt dieses Werkzeug (1.bild im Anhang) und zieht es von dem Punkt für den ihr die Coords braucht, bis nach links bzw. nach recht (jenachdem was ihr braucht) das machst du jetzt mit jedem Punkt und trags jeden coord bei coords="?,?,?,?" ein und löscht die überbleibenden Fragezeichen weg bzw machst noch welche dazu.

Dann steht href="???"
Dort schreibst du die Addy der Seite hin, wo man gelangensoll wenn man draufklickt.

So, jetzt die letzen Fragezeichen
<img src="???" usemap="#??? border=0>

Die ersten ??? musst du durch die Addy des Bildes (das du codest) ersetzen
usemap="#??? musst du nochmal den namen (den du oben hingeschrieben hast) eintragen, aber davor noch ein # setzten.
border 0 heißt nur, das der gecodete bereich keinen rahmen hat. du kannst natürlich auch 1,2,3 usw. hinschreiben, aber meistens ist es so am besten!

Der unterstrichene Bereich im code kann so offt die nötig eingefügt/kopiert werden, wenn man auf einem Bild mehrere Iamgemaps hat. (<-Dies gild auch für desis)

tut für imagemap desis im paint coden

PS:Bei Fragen bitte per PN an mich oder hier reinstellen!

Ich hoffe das war alles verständlich und lg
lisi

Aline111

Ich versteh das nicht was gemeint ist mit Linke,untere Ecke von Links und so... verwirrt

Felixx

Naja, wenn du jetzt zB ein Rechteck hast, musst du die obere linke Ecke nehmen (halt dort wo sie sein soll) und ziehst dann diesen "rahmen" bis noch links. nicht los lassen!!!
Dann nimmst du die Zahl, die du rechts ganz unten und schreibst dir die Breit (erste Zahl) auf bzw. fügst sie gleich in den code ein. (Bild im Anhang zeigt die Zahlen)
Dann nimmst du wieder die linke Obere ecke (des bereiches auf den man klicken soll) und ziehst wieder so einen Rahmen, doch diesmal noch oben. nicht los lassen!!!. Nimmst wieder die untere Zahl (diesmal holt die höhe [2.Zahl]) und fügst sie anstatt des 2. Fragezeichen ein.
Das machst du dann auch mit der rechten unteren Ecke (Rahmen ziehen und so) halt wieder nach links und dann nach oben. Schreibst die Zahlen dann statt dem 3. und 4. fragezeichen bei "coords" in den code.
hast du den rest kapiert?Wenns nur was kleines zum coden ist, mach ichs dir Augenzwinkern

, aber für alle die es net checken kann ichs halt auch net machen.

lg
lisi

sweet araber

so ein tut gabs schonma verwirrt

...aba egal...gilt das denn auch für designs???
lg sa

Felixx

Joa, aber da ists ein bissi anders.

lg
lisi

KiiM

@ Lisi, könntest du ein Tut für Desings machen? würde mich wirklich sehr interessieren und betsimmt auch sehr wieterhelfen xD

Felixx

das geht eigentlich gleich (fast halt)
Okay, ich schreibs beim 1.beitrag hin!

lg
lisi

Hufeisen-Janie

Irgentwie klappt des bei mir nich.. :/

<html>

<body>

<p align=center>

<map name=Enter>

<area shape=rect coords=142,48,133,47 href=www.vrh-hufeisen.de.vu>

</map>
<img src=http://foto.arcor-online.net/palb/alben/66/4332766/800_3533313436656334
.jpg usemap=#Enter border=0>

</body>

Das is mein Code.. also joa, was isn daran falsch? xD

Felixx

an dem code selber ist nix falsch, nur das du die bild addy net verwenden kannst.

du musst es wo anders hochladen, wo du es dann verwenden kannst.(zB. arcor) Sonst ist alles richtig!

lg
lisi

Hufeisen-Janie

Danke, geht imemr noch nich xD

Egal, ich hätte eh kein Plan, wie ich das bei oyla auf die Enter-Seite kriege, ich denk mal mit oyla hat des eh kein Sinn xD

Aber danke Augenzwinkern

Felixx

@Hufeisen-Janie: Nö, bei oyla kann man das net machen. Der hat ja so ein ding, wo man das enter eingibt und er stellts dann on. das ist zB ein Grund, warum ich net mehr bei oyla bin Augenzwinkern

Müsste aber eignetlich gehen, weil ich hab mal ein anderes bild genommen, und da ists bei deim code gegangen! Aber eh egal

lg
lisi

Hufeisen-Janie

Ih würde auch sofort umsteigen, wenn ich ftp hätte x)

Naja, danke, auch wenns nich geholfen hat, vielleicht brauch ich es noch irgentwann, aber jetzt weiß ich wenigstens wies geht smile

Felixx

Zitat:

Original von Hufeisen-Janie
Ih würde auch sofort umsteigen, wenn ich ftp hätte x)

Naja, danke, auch wenns nich geholfen hat, vielleicht brauch ich es noch irgentwann, aber jetzt weiß ich wenigstens wies geht smile

FTP kannst du entweder runterladen oder immer online hochladen. Schau dir einfach mal den Tut "FTP-Zugang" an, da sind auch seiten zum hochladen usw. angegeben

lg
lisi

Moenchen

Könntest du das vllt. noch mal mit diesen koordinaten (also wo das "feld" nachher liegen soll) erläutern? Ich kapier das grad net...
Irg. hab ich nen Brett vorm Kopp oder das is so kompliziert formuliert xD
Würd mich sehr freun und sicherlich helfen, wenn du das nochma für dumme machen könntest...
Bei normalen Designs kapier ich das zwar eig. auch mit diesen Koordinaten aber hier...mmhhh....kp rotes Gesicht

Mona

//EDIT:
Also...bisher siehts so aus auf meiner Seite *klick*

Der Code sieht wie folgt aus...
Irg. weiß ich net was daran jetzt falsch ist, weil wenn ich auf die entsprechenden Felder klicke passiert gar nüschts, bzw. sinds gar keine richtigen links...was hab ich falsch gemacht?

Zitat:

Sophie

Danke! Das ist wirklich klasse erklärt! [ ich mein das erste, nicht das Design. da weiß ich das nicht Augenzwinkern

habs noch nicht versucht ^^]

ich kanns jetzt aaaaber du hast in deinem Beispielcode ein " vergessen, daher funktioniert der da oben nicht. So ist er richtig:

<html>

<body>

<p align="center">

<map name="???">

<area shape=??? (rect,circle,polygon) coords="?,?,?,?" href="???.html">

</map>
<img src="???" usemap="#???" border=0>

</body>
</html>

Das dingsel in rot fehlte

Dankefür das Tut fröhlich

**Cola**

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:
30:
31:
32:
33:
34:
35:
36:
37:

<html>
<head>
<title>RSZ Nocetto</title>
<BODY marginwidth="0" leftmargin="0" marginheight="0" topmargin="0" scroll="no">
<img src="http://rsznocetto.rs.funpic.de/Design02.jpg">

<div id="Layer1" style="position: absolute;  left: 237px; top: 199px;">
  <iframe src="content.html" name="frame" width="5727" height="325" frameborder=0 scrolling="auto" noresize style="border: 0px" style="FILTER: chroma (color=#ffffff)" ;>
  </iframe>
</div>

<div id="Layer1" style="position: absolute;  left: 36px; top: 215px;">
  <iframe src="menu.html" name="frame" width="166" height="306" frameborder=0 scrolling="auto" noresize style="border: 0px" style="FILTER: chroma (color=#ffffff)" ;>
  </iframe>
</div>

<p align="center">

<map name="Imagemap01">

<area shape=rect coords="7,198,137,198" href="allgemeines.html" target="menu">
<area shape=rect coords="137,198,266,198" href="rechtliches.html" target="menu">
<area shape=rect coords="266,198,398,198" href="derhof.html" target="menu">
<area shape=rect coords="398,198,506,198" href="anmelden.html" target="menu">
<area shape=rect coords="506,198,577,198" href="tiere.html" target="menu">
<area shape=rect coords="577,198,698,198" href="mitglieder.html" target="menu">
<area shape=rect coords="698,198,887,198" href="fuermitglieder.html" target="menu">
<area shape=rect coords="887,198,1005,198" href="sonstiges.html" target="menu">


</map>
<img src="http://rsznocetto.rs.funpic.de/Design02.jpg" usemap="#Imagemap01" border=0>



</body>
</html>

Kann mir jemand sagen was da dran falsch ist??
Naja so siehts im Endeffekt aus, die Imagemaps funktionieren garnicht...
http://rsznocetto.rs.funpic.de/lay.html

Mangolina

Kannst du mir nochmal das mit den Ecken erklären? Vllt mit Screenhots? Ich check das net aber sonst guter tut!

Felixx

okay, also ich schau mir mal gleich alle Codes an. Sorry, aber ich hab den tut total vergessen!

lg lisi

Mangolina

Zitat:

Original von Mangolina
Kannst du mir nochmal das mit den Ecken erklären? Vllt mit Screenhots? Ich check das net aber sonst guter tut!

Kannst du das vllt machen ?+liebschau+

Jessie

Welche Zahl muss man denn wo aufschreiben?? da sind doch immer zwei zahlen

nächste Seite

Forensoftware: Burning Board, entwickelt von WoltLab GmbH