✔ Image Map OnMouseOver + Beschreibung

[D-LuX]

Hallo Zusammen,

ich brauche mal kurz einen Denkanstoß.
Ich möchte in einer Image-Map (Landkarte) ein bestimmtes Land in einer anderen Farbe darstellen lassen bei MouseOver.

<script type="text/javascript">
      function ReplaceImage(filename)
      {
        document.getElementById("imagemap").src = filename;
      }
</script>


<img src="landkarte.gif" usemap="#start" id="imagemap" />
<map name="start">
   <area shape="poly" coords="145,135,138,149,132" href="deutschland.html" onmouseover="ReplaceImage('landkarte_farbe.gif')" onmouseout="ReplaceImage('landkarte.gif');" alt="DE" title="DE"/>  
</map>

Ich möchte jetzt aber parallel einen Infotext in einem DIV anzeigen lassen, kein Tooltipp.

Wie bekomme ich das am einfachsten kombiniert?

 

[Joe]

Hi D-Lux,

Also ich würde es in etwa so angehen:

<script type="text/javascript">
      function ReplaceImage(filename)
      {
        document.getElementById("imagemap").src = filename;
		if (filename=='landkarte_farbe.gif') {
			document.getElementById('Dein Div').innerHTML = 'Dein Text';
		}
		else {
			document.getElementById('Dein Div').innerHTML = '';
		}
      }
</script>


<img src="landkarte.gif" usemap="#start" id="imagemap" />
<map name="start">
   <area shape="poly" coords="145,135,138,149,132" href="deutschland.html" onmouseover="ReplaceImage('landkarte_farbe.gif')" onmouseout="ReplaceImage('landkarte.gif');" alt="DE" title="DE"/>  
</map>
<div id="Dein Div"></div>

 

[D-LuX]

Danke!
Kann ich dann bei einem weiteren Land einfach mit einer weiteren else-Abfrage weitermachen?
Es sind ja mehrere Länder auf der Karte.

 

[Joe]

Sicher kannst auch ne Schleife durchgehen und mit Variablen arbeiten etwa so:

<script type="text/javascript">
      function ReplaceImage(filename)
      {
        document.getElementById("imagemap").src = filename;
		for (i=0; i<200; i++) {
            if(filename==('landkarte_farbe.gif'+i))
            {
                document.getElementById('Dein Div'+i).innerHTML = 'Dein Text';
			}
			else {
				document.getElementById('Dein Div'+i).innerHTML = '';
			}
        }
      }
</script>

Oder arbeitest mit einem Array und befüllst das mit allen Namen.. musst halt bissel testen rumspielen