dynamische grafische Links mit Imagemap gekoppelt.....
Frank Ortmanns
- dhtml
0 Swen0 Utz Grimminger
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
Moin,
kennst du die Forumsauslese ? Die hilft häufig weiter. Ich glaube, auch hier : <../../sfausles/tsfa_tcg.htm#a2>
Viele Grüße
Swen
Hi Frank (<-- schön, so 'ne Begrüßung, nicht?),
Dein Problem besteht darin, dass man a) onMouseover bestimmt nicht in Versalien schreibt und b) der Event-Handler im Image-Tag nix zu suchen hat (und deshalb auch nichts macht).
Für Dein Vorhaben: Schau Dir mal http://www.berlin-suedost.de an, klick Dich auf "Köpenick-Treptow" und dort auf die Stadtpläne durch - da hab ich mal genau das gemacht was Du suchst. Nur halt statt mit Image-Maps mit vielken klitzekleinen Bildern in ner Tabelle.
Grüße,
Utz