bild mit mehreren links hover effekt

  • Hallo,
    ich habe jetzt auf meiner Seite ein Bild mit mehreren Links die auf Teile der Seite weiter unten verweisen.

    Code
    <img src="images/angebotegeorg.jpg" border="" height="400" width="500" alt="" usemap="#angebotegeorg" />
                <map name="angebotegeorg">
                <area shape="rect" coords="50,50,200,100" href="#walking" onmouseover="" alt=".." title=".."/>
                <area shape="rect" coords="400,50,200,100" href="#personaltrainer" onmouseover="" alt=".." title=".."/>
    .........


    Soweit ist das auch gut aber ich hätte gerne einen hover effekt wenn man über einen Link fährt.. aber wie mache ich das?
    Geht das überhaupt mit onmouseover??


    MfG

  • Wenn du EIN Bild mit MEHREREN Links (sprich. Imagemap) hast geht das nicht, dann müsstest du ja Teile des Bildes ändern O.o


    Du kannst in einem mouseover effekt nur 1 anderes Bild angeben, ansonsten wirds richtig kompliziert.

  • Klar geht das, ist natürlich ein bisschen Aufwand.
    Schau dir mal diese Beispiele an:


    <!-- m --><a class="postlink" href="http://www.webreference.com/programming/image_map/">http://www.webreference.com/programming/image_map/</a><!-- m -->


    <!-- m --><a class="postlink" href="http://www.cssplay.co.uk/menu/imap.html">http://www.cssplay.co.uk/menu/imap.html</a><!-- m -->
    <!-- m --><a class="postlink" href="http://www.alistapart.com/d/sprites/ala-blobs2.html">http://www.alistapart.com/d/sprites/ala-blobs2.html</a><!-- m -->

  • Es geht aber auch mit Javascript und viel weniger Aufwand, indem man einfach mehrere Bilder nimmt und mit einem Hovereffekt austauscht. Das sieht viel Professioneller aus und bei nicht allzu großen Bildern gibt es auch kaum Performenceverlust. Damit kann man auch die ganzen schönen Area-Tags benutzen.

  • Ok danke für die Links Lauras das hab ich jetzt hinbekommen so....


    @ deathfighter wenn ich das richtig verstanden habe muss Ich also das gesamte Bild austauschen. Und wie schreibe ich das dann in onmouseover ? ich bekomm das irgendwie nicht hin das es auch funktioniert.


    Könnte mir dafür einer den Code geben.. also nur wie ich das Bild ändere.
    Außerdem müsste ich das dann auch noch in onmouseout definieren damit das alte Bild wieder kommt wenn man von dem Link hinuntergeht oder?
    Vielen Dank im voraus..


  • Hab mal was gebastelt. Natürlich musst du planets.jpg und planets1.jpg umbennenen :)
    mfg

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!