bild mit mehreren links hover effekt

<tobi>

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

tintwo

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.

lauras

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

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

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

deathfighter

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.

<tobi>

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

deathfighter

HTML

<html>
<head>
<style type="text/css">
.box{
text-align:left;
width:1000px;
height:800px;
margin: 20px auto;
}
.bild{
padding:155px 0px 0px 265px;
}
</style>
</head>
<body scroll="no" bgcolor="black" >
<div>
  <div class="box">
    <div class="bild">  
      <img name="Bild" 
        src="planets.jpg" usemap="#planetmap" />
<map name="planetmap">
  <area shape="rect"  onMouseOver="document.Bild.src='planets.jpg';"onMouseOut="document.Bild.src='planets1.jpg';" coords="0,0,82,126" alt="Sun" href="sun.htm" />
 </map>
    </div>
  </div>
</div>
</body>
</html>

Alles anzeigen

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

Jetzt mitmachen!