Probleme mit dynamisch erstellter Imagemap

A

-André-

Erfahrenes Mitglied
Hallo,
ich habe mit Javascript einen deuen Div container erstellt, mit u.a. einen Bild und einer Imagmap darin.
Im Firefox, im Opera und im Safari funktioniert alles so, wie ich das will, aber im Internet Explorer 8 funktioniert leider ganrnichts. Hier der Javascript-Code (auszugsweise):

Code: 
...
bild.setAttribute("usemap","#bildst");
	map.setAttribute("name","bildst"); //Bildsteuerung
	map.setAttribute("style","z-index:1000;");
	weiterA.setAttribute("alt","Weiter");
	weiterA.setAttribute("shape","rect");
	weiterA.onmouseover = function() {
		if(bildnummer <bildernamen.length-1){
			weiter.style.visibility = "visible";
		}
	}
	weiterA.onmouseout = function() {
		weiter.style.visibility = "hidden";
	}
	weiterA.onclick = function() {
		bildweiter();
	}
	zurueckA.onclick = function(){
		bildzurueck();
	}
	zurueckA.onmouseover = function() {
		if(bildnummer >0) {
			zurueck.style.visibility = "visible";
		}
	}
	zurueckA.onmouseout = function() {
		zurueck.style.visibility = "hidden";
	}
...
div.appendChild(bild);
	div.appendChild(map);
	map.appendChild(weiterA);
	map.appendChild(zurueckA);
...

des generierten HTML Text hänge ich als Bildschirmfoto an.

Kann mir jemand vielleicht sagen, woran das liegt, dass der Internet Explorer das nicht anzeigt?

Gruß

-André-
 

Anhänge

  • code1.jpg
    code1.jpg
    13,7 KB · Aufrufe: 32
Hi,

habe im Augenblick nur den IE6 zum Testen - dort funktioniert jedoch nachstehender Workaround. Ob es für dein Vorhaben tatsächlich praktikabel ist, musst du probieren.
Code: 
<html>
<head>
<title>www.tutorials.de</title>
<meta name="author" content="Quaese">
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
  <!--
function createMap(){
  var bild = new Image();
  bild.src = "bild.gif";
  bild.setAttribute("usemap","#bildst");

  if(document.all && !window.opera){
    var map = document.createElement("<map name=\"bildst\"></map>");
  }else{
    var map = document.createElement("map");
    map.name = "bildst";
  }

  if(document.all && !window.opera){
    var objArea = document.createElement("<area onmouseover=\"mouseOverFn(this);\">");
  }else{
    var objArea = document.createElement("area");
    objArea.onmouseover = function(){ mouseOverFn(this);}
  }
  objArea.shape = "rect";
  objArea.coords = "0, 0, 100, 100";
  objArea.href = "http://www.tutorials.de/";

  map.appendChild(objArea);
  document.getElementById("outID").appendChild(bild);
  document.getElementById("outID").appendChild(map);

  if(document.all && !window.opera)
    document.getElementById('outID').innerHTML = document.getElementById('outID').innerHTML;
}

function mouseOverFn(objSrc){
  alert(objSrc.href);
}
 //-->
</script>
</head>
<body>
<button onclick="createMap();">createMap</button>
<div id="outID"></div>
</body>
</html>
Vielleicht kannst du damit etwas anfangen.

Ciao
Quaese
 
Ich muss die Frage noacheinmal öffene, ich habe das Problem erst mal gelöst gehabt, aber beim IE 6 klappt dass nicht, ihr könnt euch dass mal anschauen auf folgender Seite: http://www.bingentanzt.de/bildergalerie.php?id=2&ordner=frueh08&js=true dort habe ich das eingebaut, mit allen Funktioniert das außer mit IE sechs, ich weiß nur leider nicht, warum.

VIelleicht könnt ihr mir dabei helfen.

Ps: das javascript findet ihr auf http://www.bingentanzt.de/javascript/javascript.js, falls ihr reinschauen wollt.

Gruß

-André-
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück