kostenloser Webspace werbefrei: lima-city


Imagemap Mouseover/Hover Effekt

lima-cityForumDie eigene HomepageHTML, CSS & Javascript

  1. Autor dieses Themas

    webdesignerin

    Kostenloser Webspace von webdesignerin

    webdesignerin hat kostenlosen Webspace.

    Hallo! :wave:

    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? :confused:

    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. :frown:

    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. :wink:


    Gruß,
    webdesignerin :angel:
  2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

  3. Seit wann ist area=a ?

  4. m******e

    imho schrieb:
    Seit wann ist area=a ?
    "a" bezieht sich auf das href -tag, und ".seite-1" auf die Klasse.
  5. class-business-manager

    class-business-manager hat kostenlosen Webspace.

    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
  6. Autor dieses Themas

    webdesignerin

    Kostenloser Webspace von webdesignerin

    webdesignerin hat kostenlosen Webspace.

    Hallo! :wave:

    So einfach ist das leider nicht. Ich habe es geradeprobiert: weder mit "a." und "area.", noch ohne diese beiden Definitionen funktioniert's. :slant:


    Gruß,
    webdesignerin :angel:
  7. Achtung, das ist schamlos geklauter Code.... :-P
    <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
  8. Autor dieses Themas

    webdesignerin

    Kostenloser Webspace von webdesignerin

    webdesignerin hat kostenlosen Webspace.

    Hallo imho! :wave:

    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 :angel:
  9. 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
  10. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?

Über lima-city

Login zum Webhosting ohne Werbung!