# kleines Bild im großen anzeigen



## ICEWeasel (27. November 2004)

Hallo 
Da ich micht nicht so gut in Html auskenne, brauch ich mal hilfe von profis!
Und zwar will ich, wenn ich auf ein kleines Bild klicke, es im großem erscheint! (wie es bei Ebay auch is wenn man mehrere Bilder angiebt)







schonmal danke für die Hilfe

nico


----------



## Oliver Gringel (27. November 2004)

Das kann man mit JavaScript machen. 
	
	
	



```
onClick="grossesbild.src='kleinesbild.jpg'"
```


----------



## Gumbo (27. November 2004)

Ich hab mir für meine eBay-Auktionen eine JavaScript-Funktion geschrieben, welche diesen Teil automatisiert:
	
	
	



```
function init_gallery() {
	var dls = document.getElementsByTagName('dl');
	for(i=0; i<dls.length; i++) {
		if( dls[i].className != 'gallery' ) {
			continue;
		}

		var dds = dls[i].getElementsByTagName('dd');
		for(j=0; j<dds.length; j++) {
			var lnk = dds[j].firstChild;
			lnk.onclick = new Function("document.getElementById('gallery_img').src='"+lnk.getAttribute('href')+"'; return false;");
		}

		var randKey = (Math.round(Math.random()*100) % dds.length);
		var newIMG = document.createElement('img');
		newIMG.setAttribute('id', 'gallery_img');
		newIMG.setAttribute('src', dds[randKey].firstChild.getAttribute('href'));
		newIMG.setAttribute('title', dds[randKey].firstChild.firstChild.getAttribute('title'));
		newIMG.setAttribute('galleryimg', 'no');
		var newDT = document.createElement('dt');
		newDT.appendChild(newIMG);
		dls[i].insertBefore(newDT, dls[i].firstChild);
	}
}
onload = init_gallery;
```
Der dazugehörende HTML-Teil:
	
	
	



```
<dl class="gallery">
	<dd><a href="bild1.gross.jpg"><img src="bild2.klein.jpg" alt="Abbildung 1" /></a></dd>
	<dd><a href="bild2.gross.jpg"><img src="bild2.klein.jpg" alt="Abbildung 2" /></a></dd>
</dl>
```


----------



## ICEWeasel (28. November 2004)

erstmal vielen Dank für die schnellen Antworten!
Aber irgedwie bin ich zu doof das zu laufen zu bekommen  


```
<html>

<script language="JavaScript" type="text/JavaScript">
<!--

function init_gallery() {
	var dls = document.getElementsByTagName('dl');
	for(i=0; i<dls.length; i++) {
		if( dls[i].className != 'gallery' ) {
			continue;
		}

		var dds = dls[i].getElementsByTagName('dd');
		for(j=0; j<dds.length; j++) {
			var lnk = dds[j].firstChild;
			lnk.onclick = new 

Function("document.getElementById('gallery_img').src='"+lnk.getAttribute('href')+"'; return false;");
		}

		var randKey = (Math.round(Math.random()*100) % dds.length);
		var newIMG = document.createElement('img');
		newIMG.setAttribute('id', 'gallery_img');
		newIMG.setAttribute('src', dds[randKey].firstChild.getAttribute('href'));
		newIMG.setAttribute('title', dds[randKey].firstChild.firstChild.getAttribute('title'));
		newIMG.setAttribute('galleryimg', 'no');
		var newDT = document.createElement('dt');
		newDT.appendChild(newIMG);
		dls[i].insertBefore(newDT, dls[i].firstChild);
	}
}

onload = init_gallery;

//-->
</script>

<head>


<title></title>
</head>
<body bgcolor="#63666D" marginwidth="0" marginheight="0" topmargin="0" leftmargin="0">

    
	<dl class="gallery">
	<dd><a href="dieb1.jpg"><img src="dieb.jpg" alt="Abbildung 1" /></a></dd>
	<dd><a href="spiegel1.jpg"><img src="spiegel.jpg" alt="Abbildung 2" /></a></dd>
	</dl>
   



</body>
</html>
```

Was is hier falsch?


----------



## Gumbo (28. November 2004)

Nimm mal die Kommentarzeichen raus.


----------



## ICEWeasel (28. November 2004)

oh wie dumm von mir naja jetzt gehts
vielen dank


----------

