onclick

TKOlit

TKOlit

Mitglied
Hi,

ich hab ne seite mit drei Bildern gebastelt, wenn ich nun auf eins der Bilder klicke erscheint an der selben stelle nen anderes. Wenn ich nun auf eins der anderen 2 Bilder klicke, verändert sich das so wie das erste, und das erste versetzt sich in seinen ursprünglichen Zustand zurück.

>>link<<
Code: 
<html><head><title>Test</title>
<style type="text/css">
<!--
.normal { font-style:normal }
.align1 {position:absolute; top:150px; left:10px; width:150px; height:150px;}
.align2 {position:absolute; top:300px; left:10px; width:150px; height:150px;}
.align3 {position:absolute; top:450px; left:10px; width:150px; height:150px;}
-->
</style>
<script type="text/javascript">
<!--
x = 0;
-->
</script>
</head><body>
<form name="Formular" action="">
<div  class="align1"><img src="images2/rad.jpg"></div>
<div  Id="1" class="align1"><img src="images1/rad.jpg" onClick=' document.getElementById(x).style.visibility = "visible"; document.getElementById("1").style.visibility = "hidden"; x = "1"'></div>
<div  class="align2"><img src="images2/rad.jpg"></div>
<div  Id="2" class="align2"><img src="images1/rad.jpg" onClick=' document.getElementById(x).style.visibility = "visible"; document.getElementById("2").style.visibility = "hidden"; x = "2";'></div>
<div  class="align3"><img src="images2/rad.jpg"></div>
<div  Id="3" class="align3"><img src="images1/rad.jpg" onClick=' document.getElementById(x).style.visibility = "visible"; document.getElementById("3").style.visibility = "hidden"; x = "3";'></div>
</form>
<div Id="0" style="position:absolute; top:0px; left:0px; width:0px; height:0px;"></div>
</body></html>

Das ganze funktioniert auch wunderbar im IE 6 und mit Opera 6. Nur bei Netscape 6 werden die Bilder zwar ausgeblendet, wenn ich auf ein anderes bild klicke aber nicht wieder eingeblendet, und bei mozilla 1 passiert gleich gar nix.

Wie bekomme ich es nun hin, dass das script auch in netscape und mozilla funktioniert?

Ciao TKOlit
 
Code: 
<html><head><title>Test</title>
<script>
function changImg(x) {
  var iGs = new Array("1", "2", "3");
  var d = document;
  for(var i = 1; i < 4; i++) {
    if(x == iGs[i]) {
	  d.images[i].src = "images2/rad.jpg";
	} else {
	  d.images[i].src = "images/rad.jpg";
	}
  }
}
</script>
</head><body>
<img src="images/rad.jpg" name="1" border=0 onclick="changImg('1')"><p>
<img src="images/rad.jpg" name="2" border=0 onclick="changImg('2')"><p>
<img src="images/rad.jpg" name="3" border=0 onclick="changImg('3')"><p>
</body></html>

das sollte gehn versteh aber nicht wieso du das so machst
bei deinem beispiel gibt es ja eigentlich nur 2 bilder
images/rad.jpg und images2/rad.jpg
ich hab dir das beispiel jetzt auch so gecoded - falls das nicht gewünscht is musst da den code natürlich wegschmeissen und neuen machen - aber falls das so willst wie auf deinem beispiel is das so richtig -]
 
Hab doch noch mal ne frage

Wie bekomm ichs hin, dass fals noch andere bilder vorher im html-dokument vorhanden sind, nicht die ersten bilder geändert werden, sondern echt nur die 3 hier?
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück