nicht angemeldet
Gallery mit Javascript (IE vs. FFox)
Hallo,
ich hab mir ein kleines Scriptfür eine Galerie zusammengestrickt. Bei klick auf ein Thumbnail wird das Bild und der Beschreibungstext ausgetauscht.Wenn ich alle Elemente in die Seite direkt reinschreibe funktioniert es ohne Probleme:
######### Code ########
<html>
<head>
<script type="text/javascript">
<!--
// Image-Preloader
image1 = new Image();
image1.src = "pic01.jpg";
image2 = new Image();
image2.src = "pic02.jpg";
// swapImage
function swapImage(imgName,swapImg,descriptText)
{
document.images[imgName].src=swapImg;
document.getElementById('description').innerHTML = descriptText;
}
//-->
</script>
</head>
<body>
<div id="description">Beschreibungstext</div>
<div id="imageBox">
<img src="pic00.jpg" alt="" name="big">
</div>
<ul>
<li><a href="#" onclick="swapImage('big','pic01.jpg','Besch 1 abc')"><img src="pic01_th.jpg"></a></li>
<li><a href="#" onclick="swapImage('big','pic02.jpg','2 abc')"><img src="pic02_th.jpg"></a></li>
<li><a href="#" onclick="swapImage('big','pic03.jpg','3 abc')"><img
</ul>
</body>
</html>
######## End Code ########
jetzt wollte ich das ganze aber in eine Seite mit mehreren verschachtelten Divs einbetten, damit das ganze schön arrangiert wird (ein Div zum zentrieren des ganzen, ein weiteres zur Content-Definition, darin dann unterscheidung zwischen 2 Spalten - in der linken das eigentliche Bild, in der rechten Thumbnails zum anklicken)
Im Firefox 2.0.0.12 wird es ohne Probleme ausgeführt, im IE 7.0.5730.13 wird nur das Bild ausgetauscht und der Text nicht. Wo liegt bei mir der Fehler? kann mir wer weiterhelfen? Zur Unterstützung hab ich den Code noch angehängt, das CSS aber weggelassen (oben auch), das ist ja nur zur schöneren Darstellung da.
Vielen Dank schonmal!
######## Code ########
<html>
<head>
<title>Gallery</title>
<script type="text/javascript">
<!--
// Image-Preloader
image1 = new Image();
image1.src = "pic01.jpg";
image2 = new Image();
image2.src = "pic02.jpg";
// swapImage
function swapImage(imgName,swapImg,descriptText)
{
document.images[imgName].src=swapImg;
document.getElementById('description').innerHTML = descriptText;
}
//-->
</script>
</head>
<body>
<div class="container">
<div class="content">
<div class="left">
<div class="item">
<div id="description">Beschreibungstext</div>
<div id="imageBox">
<img src="pic00.jpg" alt="" name="big">
</div>
</div>
</div>
<div class="right">
<ul>
<li><a href="#" onclick="swapImage('big','pic01.jpg','abc...1')"><img src="pic01_th.jpg"></a></li>
<li><a href="#" onclick="swapImage('big','pic02.jpg','xyz...2')"><img src="pic02_th.jpg"></a></li>
</ul>
</div>
</div>
</div>
</body>
</html>
######## End Code ########
-
OK, nach vielem rumprobiere bin ich auf eine Problembehebung gekommen:
Bei den übergebenen Variablen
<a href="#" onclick="swapImage('big','pic01.jpg','abc...1')"><img src="pic01_th.jpg"></a>
muss der Beschreibungstext (also hier 'abc...1') als erste Variable aufgeführt werden.