nicht angemeldet
Hallo Thomas
Nun brauch ich aus Design gründen aber auch Javascript Kenntnisse. Aber das ist so ungleich kryptischer wie html. (seufz)
Nun, ich werde dir dabei helfen und mein mittlerweile optimiertes Script erläutern.
Image Ready hat mir folgenden Script generiert:
function newImage(arg) {
»» if (document.images) {
rslt = new Image();
rslt.src = arg;
return rslt;
»» }
}
Diese Funktion ladet die Bilder vor. Damit stehen Sie sofort zur Verfügung, wenn Sie gebraucht werden.
Ich stelle mir eine Funktion changeMap vor. Dann definier ich für jedes Bild eine eigene Map mit Namen des Bildes und kann die Maps mit: changeMap('Punkt1', 'MapPunkt1', .....ect wechseln.
Leider geht das wirklich nicht so einfach. Eigentlich ist der komplette Austausch einer Imagemap ein massiver Eingriff ins System. Auch das Workaround ist nur eine Notlösung, die der Netscape Navigator geradeso toleriert. Außerdem wird dabei auch ein vollständig anderer Ansatz als in deiner Vorstellung verfolgt.
Der Grundgedanke meines Scriptes ist, direkt in die HTML-Datei das ImageMap neu zu erzeugen. Für den Netscape Navigator verwende ich dabei die Eigenschaft, Layer als eigene Dokumente zu behandeln. Siehe dazu auch: <../../tfbe.htm#a6>
Im MS Internet Explorer nutze ich die Eigenschaft des Allobjektes mittels innerHTML Elementinhalte austauschen zu können.
<../../tecbba.htm#a10>
Da du offensichtlich mehrere Imagemaps austauschen willst, habe ich die Funktion variabel gestaltet.
<html>
<head>
<title>ImageMaps wechseln</title>
<script type="text/javascript">
<!--
/*Autor: A.Hofmann, ah@pc-anfaenger.de, Februar 2000*/
x=new Array();y=new Array(); /*hier definierst du Felder, die die Maps aufnehmen*/
/*Definition der einzelnen Maps. Jede Map muß vollständig einschließlich des Bildes definiert sein, weitere Maps jeweils mit x[2] usw. anfügen. Die Bezeichnungen der Maps müssen immer verschieden sein. */
x[0]='<map name="apx0">'
+'<area shape="RECT" coords="21,53,169,95" href="seite1.htm" onMouseOut="alert('Variante1 Map1');" alt="">'
+'<area shape="RECT" coords="69,99,116,146" href="seite2.htm" onMouseOut="alert('Variante1 Map1-Bereich2');" alt="" target="Fensterx">'
+'</map><img src="test.gif" width="532" usemap="#apx0" height="151" border="0" alt="">\n';
x[1]='<map name="apx1">'
+'<area shape="RECT" coords="21,53,169,150" href="seite4.htm" onMouseOut="alert('Variante1 Map2');" alt="">'
+'</map><img src="test2.gif" width="532" usemap="#apx1" height="151" border="0" alt="">';
y[0]='<map name="apy0">'
+'<area shape="RECT" coords="21,53,169,95" href="seite1.htm" onMouseOut="alert('Variante2 Map1');" alt="">'
+'<area shape="RECT" coords="69,99,116,166" href="seite2.htm" onMouseOut="alert('Variante2 Map1 -Bereich2');" alt="" target="Fensterx">'
+'</map><img src="test3.gif" width="532" usemap="#apy0" height="151" border="0" alt="">';
y[1]='<map name="apy1">'
+'<area shape="RECT" coords="21,53,169,150" href="seite4.htm" onMouseOut="alert('Variante2 Map2');" alt="">'
+'</map><img src="test4.gif" width="532" usemap="#apy1" height="151" border="0" alt="">';
/* Hier werden die Maps neu geschrieben*/
function setImageMaps (a)
{ k="";a=self[a];
for (i=0;i<a.length;i++) k=k+a[i]+"\n"; /*hier wird anhand der Laenge bestimmt, wieviele Maps du benoetigst*/
if (document.all) document.all.test.innerHTML=k;
else
{
document.test.document.open();
document.test.document.write(k);
document.test.document.close();
}
return
}
//-->
</script>
</head>
<body>
<!-- Deine Ursprungsmap muß im Div stehen, sonst wird diese nicht gelöscht-->
<div id="test" style="position:absolute;">
<map name="leer">
<area shape="RECT" coords="21,53,169,95" href="seite1.htm" onMouseOut="alert('Anfang Map1');" alt="">
</map>
<map name="leer1">
<area shape="RECT" coords="21,53,169,150" href="seite4.htm" onMouseOut="alert('Anfang Map2');" alt="">
</map>
<img src="test5.gif" width="532" usemap="#leer" height="151" border="0" alt="">
<img src="test6.gif" width="532" usemap="#leer1" height="151" border="0" alt="">
</div>
<div style="position:absolute;left:550;top:30;"><a href="#" onClick="setImageMaps('x');return false;">ImageMaps der 1. Variante</a>
<a href="#" onClick="setImageMaps('y');return false;">ImageMaps der 2. Variante</a>
</div>
</body>
</html>
Hast du alle Maps in den Arrays abgelegt, dann kannst du diese per Mausklick beliebig austauschen. Wichtig, die zum Rücktausch benötigte Map muß auch im Array abgelegt sein. Außerdem sollten die Maps von der Größe her gleich sein.
Viele Grüße
Antje