Imagemap Mouseover/Hover Effekt
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
alt attribut
attribut
bild
blocken
code
definieren
definition
display
effekt
glauben
hilfe
image
internet
legen
ordner
punkt
tag
tip
trick
url
-
Hallo!
Ich bin gerade dabei eine tag/image">Imagemap zu erstellen und komme beim mouseover Effekt einfach nicht weiter. Ich habe verschiedene Kreissegmente, deren Bild sich beim Herüberfahren mit der Maus ändern soll. Die Frage ist nur: wie stell ich das an?
Ich habe zwar wenig Ahnung von JavaScript, aber die simplen Scripte, die ich im Internet gefunden habe, halfen mir leider auch nicht weiter. Dann habe ich versucht den hover Effekt über das "class" Element mit Hilfe einer CSS zu definieren, aber das geht irgendwie auch nicht.
So sieht's im Moment bei mir aus:
Entsprechende "area" innerhalb der Imagemap:
<map> <area shape="circle" coords="123,456,78" alt="Bild1" href="seite-1.html" class="seite-1" /> </map>
Die dazugehörige CSS:
a.seite-1{ display: block; background: url('images/Bild1.gif') no-repeat; width: XXpx; height: XXpx; text-indent: -999em } a.seite-1:hover { background: url('images/Bild1_hover.gif') no-repeat; }
Um Hilfe oder entsprechende Ratschäge, Code-Schnipsel, Tipps und Tricks wäre ich Euch sehr dankbar! Vielen Dank im Voraus.
Gruß,
webdesignerin
-
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
imho schrieb:
"a" bezieht sich auf das href -tag, und ".seite-1" auf die Klasse.
Seit wann ist area=a ? -
Hallo,
ich glaube, imho hat schon recht:
versuch mal, das "a" vor dem punkt im css wegzumachen, weil es könnte sein, dass das "a." verhindert, dass der style für area angewendet wird. falls es dann geht, mach vllt ein "area." vor die definition für die klasse "seite-1".
ich hoffe dass ich das voll verstanden habe und helfen konnte,
mfg
Beitrag zuletzt geändert: 2.6.2012 16:51:46 von class-business-manager -
Hallo!
So einfach ist das leider nicht. Ich habe es geradeprobiert: weder mit "a." und "area.", noch ohne diese beiden Definitionen funktioniert's.
Gruß,
webdesignerin
-
Achtung, das ist schamlos geklauter Code....
<script type="text/javascript" charset="utf-8" defer="defer"> jQuery("area").each(function() { jQuery(this).mouseover(function() { var lan = jQuery(this).attr("alt"); jQuery("#Deutschlandkarte").attr("src","bilder/" + lan).fadeIn(); }); jQuery(this).mouseout(function(){ jQuery("#Deutschlandkarte").attr("src","bilder/Deutschlandkarte.png").fadeIn(); }); }); </script>
Funktioniert so, dass jedes area ein alt Attribut mit dem Namen des Hover-Bildes (z.Bsp Bild1hover.PNG ) enthält, diese variable wird eingelesen und dann hinter das src Attribut gesetzt, das Hoverbild liegt dabei im ordner bilder
Quelle
Beitrag zuletzt geändert: 2.6.2012 21:17:14 von imho -
Hallo imho!
Da ich nicht viel von JavaScript verstehe und an Deinem obigen Beispielcode - geschweige denn auf der von Dir verlinkten Seite, auf der ich übrigens schon gewesen bin - nicht erkennen kann, wo denn die Bilder der entsprechenden areas hinsollen, zeige mir doch bitte mal bitte für Dummies (also ein bisschen genauer) an Hand meiner bisherigen Angaben, wie Du Dir die Lösung meines Problems durch genau diesen Code vorstellst. Vielen Dank!
Gruß,
webdesignerin
-
HTML-Code;
Head
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script type="text/javascript" charset="utf-8" defer="defer"> jQuery("area").each(function() { jQuery(this).mouseover(function() { var lan = jQuery(this).attr("alt"); jQuery("#mapBG").attr("src","bilder/" + lan).fadeIn(); }); jQuery(this).mouseout(function(){ jQuery("#mapBG").attr("src","bilder/Bild1.gif").fadeIn(); }); }); </script>
Body
<img id="mapBG" src="bilder/Bild1.gif" width="344" height="459" usemap="#Map" alt="Bild1.gif" style="border: none;" /> <map id="Map"> <area shape="circle" coords="123,456,78" alt="Bild1_hover.gif" href="seite-1.html" class="seite-1" /> </map>
Dein Bild1.gif sowie dein Bild1_hover.gif musst du in den Ordner "bilder" legen
Beitrag zuletzt geändert: 3.6.2012 17:02:17 von imho -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
