✔ (IE Fehler) Bilder dynamisch wechseln

M

Marc_CH_

Grünschnabel
hallo

Ich hab folgendes Problem:

Ich habe einen Ordner "bilder" der eine Anzahl an bilder enthält. In diesem Ordner befindet sich ein weiterer Ordner "thumbs" der die Thumbnails der Bilder enthält. Jetzt hab ich folgendes gemacht.
Oben auf der Seite werden alle Thumbnails aufgelistet und darunter befindet sich ein Bereich der 400px mal 300px gross ist. Wenn ich jetzt jeweils auf ein Thumbnail klicke, wird das Bild im grossen Bereich dargestellt. Das Funktioniert im FF und Opera alles Bestens, nur im IE gehts nicht. Wenn ich dort auf ein Thumbnail klicke, zeigt er mir im grossen Bereich nur eine weisse Fläche (resp. nichts) an.

hier mein code:

html
Code: 
<!--xml version="1.0" encoding="utf-8"-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http:www.w3.org/1999/xhtml" xml:lang="de" lang="de">
	<head>
		<title>Test</title>
		<script type="text/javascript" src="test.js"></script>
	</head>
	<body>
		<a href="javascript:;"><img src="http://localhost/ajax/test/img/thumb/1.jpg" onclick="changeImage(this);"></a>
		<a href="javascript:;"><img src="http://localhost/ajax/test/img/thumb/2.jpg" onclick="changeImage(this);"></a>
		<a href="javascript:;"><img src="http://localhost/ajax/test/img/thumb/3.jpg" onclick="changeImage(this);"></a>
		<a href="javascript:;"><img src="http://localhost/ajax/test/img/thumb/4.jpg" onclick="changeImage(this);"></a>
		<a href="javascript:;"><img src="http://localhost/ajax/test/img/thumb/5.jpg" onclick="changeImage(this);"></a>
		<div id="bigImage" style="border: 1px solid black;"><img src="" /></div>
	</body>
</html>

javascript
Code: 
window.onload = function() {
	document.getElementById("bigImage").firstChild.setAttribute(
		"src",
		document.body.getElementsByTagName("a")[0].firstChild.src.replace("/thumb", "")
	);
}

function changeImage(img) {
	document.getElementById("bigImage").firstChild.setAttribute(
		"src",
		img.src.replace("/thumb", "")
	);
}

warum funktioniert das im IE nicht? hab echt keinen plan mehr! hab schon so viel versucht, aber es nützt alles nichts...

danke für eure hilfe!
 
Hi,

entferne mal das javascript: ; in den href-Attributen.

Aus
Code: 
<a href="javascript:;">
wird
Code: 
<a href="#">
Ciao
Quaese
 
danke. ja jetzt gehts :). aber nun springt er allerfdings bei jedem klick an den anfang der seite zurück. wie kann man das verhindern (ausser mit "javascript:;")?
 
Hi,

versuch mal in Deiner Funktion false zurück zu geben. Diesen Wert reichst Du dann weiter an den A-Tag.

Code: 
function changeImage(img) {
  document.getElementById("bigImage").firstChild.setAttribute(
    "src",
    img.src.replace("/thumb", "")
  );
  return false;
}
Die Links werden folgendermassen angepasst:
Code: 
<a href="#"><img src="http://localhost/ajax/test/img/thumb/5.jpg" onclick="return changeImage(this);"></a>
Ciao
Quaese
 
Das Script finde ich interessant.

Könnte es gut gebrauchen aber würde ohne Thumbs arbeiten sondern mit Links wasmüsste ich dann verändern und wohin kommt das javascript.

HAbe noch nie damit gearbeitet.

MFG Daniel
 
Hi,

die Funktionsaufrufe platzierst Du im A-Tag. Allerdings kannst Du jetzt nicht mehr this übergeben. Stattdessen
ist es möglich, die Funktion mit dem Namen der Bilddatei aufzurufen.

Mein Vorschlag:
Code: 
<html>
<head>
<title>Test</title>
<script type="text/javascript">
// Verzeichnis mit den Bilddateien
var strImgPath = "http://localhost/ajax/test/img/";

function changeImage(strImg) {
  document.getElementById("bigImage").firstChild.setAttribute(
    "src",
    (strImgPath + strImg)
  );
  return false;
}
</script>
</head>
<body>
  <a href="#" onclick="return changeImage('bild1.jpg');">Bild 1</a>
  <a href="#" onclick="return changeImage('bild2.jpg');">Bild 2</a>
  <a href="#" onclick="return changeImage('bild3.jpg');">Bild 3</a>
  <div id="bigImage" style="border: 1px solid black;"><img src="" /></div>
</body>
</html>
Ciao
Quaese
 
Marc_CH_ hat gesagt.:
geil :D es funktioniert. kannst du mir auch noch erklären warum das so geht?
Zum Vergrößern anklicken....

Return wird dazu verwendet das Funktionen Sachen zurückliefern, false bedeuted unwahr. Meist wird ein Return false dazu verwendet um auszudrücken das in der funktion was falsch gelaufen ist. Nach einem Return innerhalb einer funktion wird sofort abgebrochen und nichts weiter ausgeführt was darunter steht.

Hier wird es dazu verwendet dem Browser sozusagen zu sagen das die weitere skriptausführung des links abgebrochen wird. Sprich ein link wo nur return false; drinsteht macht garnix wenn man draufklickt und der browser javascript unterstüzt ^^
 
Guten Abend allerseits,

Habe das jetzt eingebaut und fertig nur ist im IE ist dann da am Anfang dieses rote Kreuz wenn noch kein Bild ausgewählt wurde als ob ein Bild nicht vorhanden ist.

Jetzt habe ich mir gedacht wäre es ja sinnig wenn man programmiert das am Anfang bevor ein Bild angeklickt wurde da ein bestimmtes Startbild ist (oder wenn es geht auch ein php dokument),

Nur wie ist die Frage.

MFG Daniel
 
Hi!
KingOfRap hat gesagt.:
Habe das jetzt eingebaut und fertig nur ist im IE ist dann da am Anfang dieses rote Kreuz wenn noch kein Bild ausgewählt wurde als ob ein Bild nicht vorhanden ist.

Jetzt habe ich mir gedacht wäre es ja sinnig wenn man programmiert das am Anfang bevor ein Bild angeklickt wurde da ein bestimmtes Startbild ist
Zum Vergrößern anklicken....
Kann es sein, dass du diese Zeile in deinem Dokument stehen, und vergessen hast, im src-Attribut die Grafik-URI anzugeben?

Code: 
<div id="bigImage" style="border: 1px solid black;"><img src="wohin_geht_denn_die_reise?" /></div>
Dann wird vom IE auch kein rotes Kreuz angezeigt, und das Dokument besitzt das Startbild, das mit dem Script getauscht werden kann.

Somit muss da auch nichts mehr programmiert werden, damit beim Dokumentaufruf ein Startbild vorhanden ist.
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück