Firefox funktioniert - IE nicht - Wieso?
ghost
- browser
Ich hab einen Code geschrieben ( HTML und JavaScript ) mit dessen Hilfe eine kleine Bilderübersicht erstellt werden soll. Hierbei sollen zuerst die Bilder verkleinert angezeigt werden. Nachfolgend wird dann zu beginn das erste Bild vergrößert angezeigt. Wenn man nun auf eins der verkleinerten Bilder klickt wird dieses anstatt des ersten vergrößert angezeigt.
Mein Problem ist nun das das ganze im Firefox funktioniert, im IE jedoch nur die kleinen Bilder angezeigt werden.
Ich hoffe ihr könnt mir weiterhelfen! Danke!!
<html>
<head>
<script language="JavaScript">
function anzeigen(img)
{
var cb = 300; // container_breite
var ch = 400; // container_hoehe
document.getElementById("anzeige_container").width = cb;
document.getElementById("anzeige_container").height = ch;
var image = new Image();
image.src = img.src;
var b = image.width;
var h = image.height;
var q = b / h; // seitenverhaeltnis = breite / hoehe
if (q >= 1)
{
q = cb / b;
ch = h * q;
image.width = cb;
image.height = ch;
}
else
{
q = ch / h;
cb = b * q;
image.width = cb;
image.height = ch;
}
document.getElementById("anzeige_container").width = image.width;
document.getElementById("anzeige_container").height = image.height;
document.getElementById("anzeige_container").src = image.src;
}
</script>
</head>
<body leftmargin="0" topmargin="0" onload="javascript:bild = new Image();bild.src='images/box1.jpg';anzeigen(bild)">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="ueber2"> </td>
</tr>
<tr>
<td class="ueber5"><div align="center">Gitterboxen</div></td>
</tr>
<tr>
<td class="ueber2"> </td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="ueber2"> </td>
</tr>
<tr>
<div align="center" style="overflow:auto">
<img onclick="javascript:anzeigen(this)" src="images/box1.jpg" width="50" height="50">
<img onclick="javascript:anzeigen(this)" src="images/box2.jpg" width="50" height="50">
</div>
</tr>
<tr>
<div align="center"
<img id="anzeige_container" width="300" height="400"></div>
</tr>
<tr>
<td class="ueber2"> </td>
</tr>...........
<<< Rest lass ich mal weg, da Standard
hi,
Mein Problem ist nun das das ganze im Firefox funktioniert, im IE jedoch nur die kleinen Bilder angezeigt werden.
Bekommst du Javascript-Fehlermeldungen im IE? (Kleines gelbes Dreieck in der Statuszeile.)
Ich hoffe ihr könnt mir weiterhelfen!
Ein Online-Beispiel wäre dazu sicher hilfreich.
gruß,
wahsaga
hi wahsaga!
Thanks für die Antwort!
Eine Fehlermeldung krieg ich leider nicht :( Beim IE wird das große Bild einfach nicht angezeigt ( trotz aktiviertem JS ).
Du kannst ja mal auf http://www.stapler-gebraucht.de unter Gitterboxen schaun....
CU
Hi,
Du kannst ja mal auf http://www.stapler-gebraucht.de unter Gitterboxen schaun....
Du meinst http://www.stapler-gebraucht.de/gb1.htm? Mein IE 6 wechselt das große Bild, sofern Javascript aktiviert ist.
freundliche Grüße
Ingo
<script language="JavaScript">
Du meinst: <script type="text/javascript">
<body leftmargin="0" topmargin="0"
Du meinst:
body {
margin: 0px;
}
var image = new Image();
'Image' ist ein Begriff, der in der Semantik von JavaScript eine spezielle Bedeutung hat. 'image' könnte da durchaus vom IE fehlinterpretiert werden.
onload="javascript:bild = new Image();bild.src='images/box1.jpg';anzeigen(bild)">
javascript: in einem Eventhandler? Lass das mal weg, evtl. ist das schon das, was den IE stört...
<table width="100%" border="0" cellspacing="0" cellpadding="0">
... viel überflüssiger und falscher Code...
</tr>
<img onclick="javascript:anzeigen(this)" src="images/box1.jpg" width="50" height="50">
Schon wieder javascript: - evtl. rausnehmen...
Außerdem fehlt da alt="alternativtext".
<div align="center"
<img id="anzeige_container" width="300" height="400"></div>
Da fehlt was.
<<< Rest lass ich mal weg, da Standard
Sicher?