Image Map mit mouseover-Effekt

Beim Überfahren der Münzen wird die Grafik aktualisiert und es werden die zugehörigen Münzen angezeigt.

Münze 1

Funktionsweise

Die Grafik mit den Münzen wird als Image Map eingebunden. Für jede einzelne Münze wird ein area-Tag erstellt, welches mit dem onmouseover-Event ausgestattet wird. Dort wird die Funktion changeImg notiert, die die Bildquelle übergeben bekommt. Diese wird im Funktionsrumpf dem Element mit der ID img_id zugewiesen.

HTML

<img src="imagemap_muenzen.gif" width="260" height="171" style="border: 1px solid #666;" usemap="#map_id">
<map name="map_id">
  <area onmouseover="changeImg('muenze_1.gif', 0);" onclick="return false;" shape="circle" coords="224,74,30" href="#">
  <area onmouseover="changeImg('muenze_2.gif', 1);" onclick="return false;" shape="circle" coords="49,34,28" href="#">
  <area onmouseover="changeImg('muenze_3.gif', 2);" onclick="return false;" shape="circle" coords="148,32,24" href="#">
</map>
<div>
  <img id="img_id" src="muenze_1.gif" width="120" height="120" style="border: 1px solid #ccc;" alt=""><br>
  <span id="txt_id">Münze 1</span>
</div>

JavaScript

var arrTxt = ["Münze 1", "Münze 2", "Münze 3"];
function changeImg(strImg, intTxt){
  document.getElementById("img_id").src = strImg;
  document.getElementById("txt_id").innerHTML = arrTxt[intTxt];
}