Öfters in den Seminaren nachgefragt: Wie kann ich Rollover-Effekte in Imagemaps erzielen, z.B. für die Navigationsgrafiken auf der Startseite?

Rollover = Wenn sich der Mauszeiger über ein Bild oder einen Hotspot einer Imagemap bewegt (Mouseover), wird ein neues Bild angezeigt.

Beispiel für den Syntax des Effektes in Imagemaps:

im HEAD:

    <script type="text/javascript">
      <!-- rollover = newImage(); -->
   </script>

im BODY:

<img src="normal.jpg" alt="normal" usemap="#rollover" id="rollover" />

<map name="rollover" id="rollover">
  <area shape="rect" coords="7,12,130,91" href="neueseite.html"
  onmouseover="rollover.src='action1.jpg';"
  onmouseout="rollover.src='normal.jpg';" />
</map>

Zuerst wird ein Bild als Imagemap deklariert, dann die Hotspots festgelegt mit den zugehörigen Hyperlinks definiert. Im AREA-Tag werden die beiden Handler OnMouseOver und OnMouseOut verwendet.

Und so sieht es praktisch aus. Zur Demo.

Druckversion des Beitrags anzeigen und ausdrucken