Imagemap Bei mouseover soll neues Bild erscheinen
sani
- html
0 Gernot Back- javascript
0 sani- html
0 Gernot Back0 sani0 Gernot Back0 Gernot Back0 sani
0 CarstenP
Hi,
ich möchte gerne ein Imagemap erstellen, bei welchem durch überfahren mit der Maus, ein neues (Detai) Bild erscheint. Also kein Popup durch click. ich habe beim googlen nichts gefunden, bin mir allerdings auch nicht ganz sicher was die passenden Suchbegriffe angeht und ob soetwas überhaupt geht. Könnt Ihr mir helfen, oder habt Ihr ein Beispiel dafür?
Lieben Dank, sani
Hallo sani,
ich möchte gerne ein Imagemap erstellen, bei welchem durch überfahren mit der Maus, ein neues (Detai) Bild erscheint. Also kein Popup durch click. ich habe beim googlen nichts gefunden, bin mir allerdings auch nicht ganz sicher was die passenden Suchbegriffe angeht und ob soetwas überhaupt geht. Könnt Ihr mir helfen, oder habt Ihr ein Beispiel dafür?
Ein Javascript-Bilderaustausch sollte in dem Zusammenhang eigentlich kein Problem sein (für reines CSS sehe ich allerdings schwarz) Soll das Bild, dem die Imagemap selbst zugeordnet ist, ausgetauscht werden? Zeig mal was von deinem Code, den du bisher zusammengebastelt hast!
Gruß Gernot
Hallo sani,
ich möchte gerne ein Imagemap erstellen, bei welchem durch überfahren mit der Maus, ein neues (Detai) Bild erscheint. Also kein Popup durch click. ich habe beim googlen nichts gefunden, bin mir allerdings auch nicht ganz sicher was die passenden Suchbegriffe angeht und ob soetwas überhaupt geht. Könnt Ihr mir helfen, oder habt Ihr ein Beispiel dafür?
Ein Javascript-Bilderaustausch sollte in dem Zusammenhang eigentlich kein Problem sein (für reines CSS sehe ich allerdings schwarz) Soll das Bild, dem die Imagemap selbst zugeordnet ist, ausgetauscht werden? Zeig mal was von deinem Code, den du bisher zusammengebastelt hast!
Gruß Gernot
Hi Gernot,
eigentlich habe ich bisher nur ein normales imagemap gemacht, bei dem sich nach click ein Popup öffnet. Sieh mal:
<img src="images/1pix.gif" width="5" height="1" border="0"><img src="images/1pix.html" alt="" width="1" height="128" border="0"><map name="oben"><area shape="poly" coords="107,332,114,330,120,335,118,345,108,347,107,340" href="javascript:popwin1('verweis-sensitiv04-06.htm','350','200',0,0)" alt="Hachenburg"><area shape="poly" coords="117,326,124,324,130,329,128,339,118,341,117,334" href="javascript:popwin1('verweis-sensitiv04-07.htm','350','200',0,0)" coords="84,307,91,305,97,310,95,320,85,322,84,315" href="javascript:popwin1('verweis-sensitiv02-03.htm','350','200',0,0)" alt="Berlin-Erkner"></map><img src="images/karte.jpg" width="454" height="567" border="0" alt="Grafik" usemap="#oben"><img src="images/img_grau.gif" alt="" width="1" height="1" border="0"><img src="images/img_grau.gif" alt="" width="1" height="1" border="0">
Hallo sani,
da blick ich ehrlich gesagt nicht so recht durch. Gibts das denn auch online? Dann kann ich mir vielleicht eher "ein Bild machen". Was hast du denn vor? Noch einmal die Frage: Soll das Bild, dem die Imagemap selbst zugeordnet ist, ausgetauscht werden, oder nur Teilbereiche davon? Bestimmt kann ich oder können andere dir hier helfen, aber wir müssten halt erst einmal verstehen, worum es geht. Wenn wir das Originalbild und die Austauschbilder sähen, wär es bestimmt leichter.
Gruß Gernot
Hallo sani,
da blick ich ehrlich gesagt nicht so recht durch. Gibts das denn auch online? Dann kann ich mir vielleicht eher "ein Bild machen". Was hast du denn vor? Noch einmal die Frage: Soll das Bild, dem die Imagemap selbst zugeordnet ist, ausgetauscht werden, oder nur Teilbereiche davon? Bestimmt kann ich oder können andere dir hier helfen, aber wir müssten halt erst einmal verstehen, worum es geht. Wenn wir das Originalbild und die Austauschbilder sähen, wär es bestimmt leichter.
Gruß Gernot
Hi und Danke schonmal,
leider gibt es das noch nicht online. Aber es ist auch gar nicht so kompliziert: Ich habe ein Bild, auf welchem Werkzeugteile auf einem Tisch liegen. Die ist mein Imagemap. Jetzt möchte ich, wenn man zb. mit der Maus über einem Schraubenzieher der auf dem Tisch liegt, zieht, das ein Detailild der Spitze des Schraubenziehes erscheint. so wie wir es von Text kennen, der bei mouseover sichtbat wird. Ziehe ich jetzt mit der Maus über einem Hammer, erscheint eben ein Detailbild des Hammers usw...
Ich hoffe ich versteht jetzt was ich meine!
Liebe Grüße, sani
Hallo sani,
leider gibt es das noch nicht online. Aber es ist auch gar nicht so kompliziert: Ich habe ein Bild, auf welchem Werkzeugteile auf einem Tisch liegen. Die ist mein Imagemap. Jetzt möchte ich, wenn man zb. mit der Maus über einem Schraubenzieher der auf dem Tisch liegt, zieht, das ein Detailild der Spitze des Schraubenziehes erscheint. so wie wir es von Text kennen, der bei mouseover sichtbat wird. Ziehe ich jetzt mit der Maus über einem Hammer, erscheint eben ein Detailbild des Hammers usw...
Na darauf muss man nach dem von dir geposteten Quellcode, in dem zwei winzig kleine polygonale Areas die alt-Attribute "Hachenburg" und "Berlin-Erkner" trugen, erst einmal kommen!
Es scheint also darauf, dass die Area ein unregelmäßiges Vieleck und kein Rechteck ist, gar nicht so anzukommen. Dann würde ich dir ja tatsächlich raten, dass du gar nicht mit einer Imagemap arbeitest (dann brauchst du für dein Vorhaben nämlich JavaScript), sondern mit einer Imagemapsimulion über CSS, bei der du Hovereffekte einbauen kannst, also entsprechend CarstenPs Link:
http://www.frankmanno.com/ideas/css-imagemap/
Gruß Gernot
Hallo nochmal,
Imagemapsimulion über CSS,
Imagemapsimul_at_ion über CSS
(sonst glauben andere noch, es handele sich bei meiner Wortschöpfung um einen Fachbegriff und übernehmen ihn)
Gruß Gernot
Hallo nochmal,
Imagemapsimulion über CSS,
Imagemapsimul_at_ion über CSS
(sonst glauben andere noch, es handele sich bei meiner Wortschöpfung um einen Fachbegriff und übernehmen ihn)
Gruß Gernot
Sorry wenn ich mich so unklar ausgedrückt habe. Im Proinzip meine ich genau das css-iamgemap bei frankmanno.com. Jetzt soll aber anstatt des Textfeldes ein Image erscheinen. Ich werde mal etwas probieren, vielleicht bekomme ich es ja hin!
Hallo Gernot,
für reines CSS sehe ich allerdings schwarz
Gestern zufällig entdeckt: http://www.frankmanno.com/ideas/css-imagemap/
Bin mir aber auch nicht sicher, ob sani so etwas haben wollte...
Viele Grüße
Carsten
Hallo CarstenP,
Gestern zufällig entdeckt: http://www.frankmanno.com/ideas/css-imagemap/
Bin mir aber auch nicht sicher, ob sani so etwas haben wollte...
eher nicht: '<area shape="poly" ...' Das dürfte mit der CSS-Technik ausgeschlossen sein
Gruß Gernot