Gegen Bilderklau - Das Original | Druckvorschau: Imagemap coden mit Paint

Geschrieben von Felixx am 08.01.2006 um 14:54:

Imagemap coden mit Paint

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

Geschrieben von Aline111 am 08.01.2006 um 16:23:

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

Geschrieben von Felixx am 08.01.2006 um 19:58:

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

Geschrieben von sweet araber am 09.01.2006 um 22:53:

so ein tut gabs schonma verwirrt

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

Geschrieben von Felixx am 12.01.2006 um 20:59:

Joa, aber da ists ein bissi anders.

lg
lisi

Geschrieben von KiiM am 12.01.2006 um 21:35:

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

Geschrieben von Felixx am 13.01.2006 um 12:48:

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

lg
lisi

Geschrieben von Hufeisen-Janie am 29.01.2006 um 20:25:

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

Geschrieben von Felixx am 31.01.2006 um 18:07:

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

Geschrieben von Hufeisen-Janie am 31.01.2006 um 20:48:

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

Geschrieben von Felixx am 02.02.2006 um 13:37:

@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

Geschrieben von Hufeisen-Janie am 03.02.2006 um 20:21:

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

Geschrieben von Felixx am 12.03.2006 um 14:02:

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

Geschrieben von Moenchen am 22.03.2006 um 14:35:

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:

Geschrieben von Sophie am 31.03.2006 um 18:29:

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

Geschrieben von **Cola** am 10.04.2006 um 19:31:

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