Frank Ortmanns: dynamische grafische Links mit Imagemap gekoppelt.....

Beitrag lesen

Ich habe versucht im beiliegenden Quellcode dynamische grafische Links mit einer Imagemap zu koppeln. Bei berühren der Imagemap mit der Maus sollte sich die, in der Tabelle platzierte Grafik austauschen. Der Gedanke war, daß sich das Bild nicht verändert, sobald man das betreffende Bild irgendwo berührt, sondern nur da, wo es aufgrund eines im Bild vorhandenen Buttons gewünscht ist.

Ist eine derartige Kombination zu realisieren? Jedenfalls werden mir für den beiligenden Quellcode keine fehler von Seiten des Browser gemeldet.

Trotz der anscheinend nicht vorhandenen Fehler funktioniert das Teil nicht. Woran liegt das?

Wo würde in enem solchen Quellcode der Java-Script Befehl zum Tauschen implementiert? Im Bereich der Zeile, die die Imagemap definiert, oder dort, wo die Grafik festgehalten wird, die die Imagemap verwendet?

Hier besagter Quellcode:

<HTML>
<head>

<title>Auswahlmenue</title>

<SCRIPT LANGUAGE="JavaScript">

button1=new Image();
  button1.src="images/dummy0.gif";
  button12=new Image ();
  button12.src="images/wechs.gif";
  var a, Bild;

function tauschen (a, Bild)
{
  window.document.images[a].src=button12.src;
  window.document.images[0].src=button1.src;

}

</SCRIPT>

</head>

<BODY>
<!--Imagemaps-->

<!--Links Oben-->
<map name="Index_LO">
<area shape=rect coords="1,1,249,49" href="hit.html" >
</map>

<!--Mitte Oben-->
<map name="Index_MO">
<area shape=rect coords="1,1,249,49" href="#Anker">
</map>

<!--Rechts Oben-->
<map name="Index_RO">
<area shape=rect coords="1,1,249,49" href="#Anker">
</map>

<!--Links Unten-->
<map name="Index_LU">
<area shape=rect coords="1,1,249,49" href="#Anker">
</map>

<!--Mitte Unten-->
<map name="Index_MU">
<area shape=rect coords="1,1,249,49" href="#Anker">
</map>

<!--Rechts Unten-->
<map name="Index_RU">
<area shape=rect coords="1,1,249,49" href="#Anker">
</map>

<!--Imagemaps Ende-->

<!--Hintergrund Picture Table-->
<table align="center" border="0" width="640" cellspacing="0" cellpadding="0">
  <tr>
    <td background="images/sliced_0.jpg" width="180" height="240">
    <img src="images/dummy0.gif" height="236" usemap="#Index_LO" border=0 ONMOUSEOVER="tauschen (0, bild12)"></td>

<td background="images/sliced_1.jpg" width="215" height="240">
    <img src="images/dummy1.gif" height="236" usemap="#Index_MO" border=0> </td>

<td background="images/sliced_2.jpg" width="245" height="240">
    <img src="images/dummy2.gif" height="236" usemap="#Index_RO" border=0></td>
  </tr>

<tr>
    <td background="images/sliced_3.jpg" width="180" height="240">
    <img src="images/dummy3.gif" height="236" usemap="#Index_LU" border=0></td>

<td background="images/sliced_4.jpg" width="215" height="240">
    <img src="images/dummy4.gif" height="236" usemap="#Index_MU" border=0></td>

<td background="images/sliced_5.jpg" width="245" height="240">
    <img src="images/dummy5.gif" height="236" usemap="#Index_RU" border=0></td>
  </tr>
</table>
</BODY>
</HTML>

Danköö im voraus für alle Hilfestellungen