Image Austausch + InnerText

E

emphillis

Guest
Hallo an alle,

ich bin Azubi und soll an unserer Homepage basteln. Leider habe ich nicht viel Ahnung von Webdesign und die Kollegen haben überhaupt keine Ahnung.
Deshalb würde ich mich sehr freuen, wenn mir jemand helfen könnte.

Problemstellung:
Ich habe in einer Tabellen-Zelle ein image, dieses soll bei einem onMouseOver der Zelle verschwinden und ein Text angezeigt werden. Bei einem anschliessenden onMouseOut, soll dann der Text verschwinden und das image wieder angezeigt werden.

Aktueller Stand:
Definition der Zelle:
<td id="text_box" width="53%" rowspan="5" align="center" bgcolor="#C73343" height="183" onMouseOver="Javascript:change_WCD('0')" onMouseOut="Javascript:change_WCD('1')">

change_WCD Skript:
function change_WCD(changeindex)
{
var wcd_image = new Image();
var wcdummy_image = new Image();
wcd_image.src="../images/wcd.jpg";
wcdummy_image.src="../images/wcd_dummy.jpg";

switch(changeindex)
{
//text
case '0':
{
document.images.wcd_img.src = wcdummy_image.src;
document.all.text_box.innerText = 'TEST';
break;
}
// image
case '1':
{
document.all.text_box.innerText = '';
document.all.wcd_img.src = wcd_image;
break;
}
}
}


Kommentar:
Beim onMOuseOver tausche ich die Graphik durch ein dummyimage aus, welches die gleiche Farbe hat wie der Zellenhintergrund.


Fehlermeldung:
'document.all.wcd_img' ist Null oder kein Objekt

Kommentar:
Ich habe ein etwas probiert und herausgefunden, dass der Fehler beim onMouseOut auftritt. Es sieht so aus, als ob das Image 'Objekt' nacht dem innerText nicht mehr existiert.



Vielen Dank an alle, die sich die Mühe machen mir zu helfen !!!!
 
Du postest leider nicht die ganze Zelle, so sieht man die Definition von wcd_img nicht.

Dann sprichst Du dieses Bild auf zwei verschiedene Arten an:
- document.images.wcd_img.src ...
- document.all.wcd_img.src ...
Mir scheint die erste Art über document.images eleganter, obwohl die zweite Art auch gehen müsste.

Hier
document.all.wcd_img.src = wcd_image;
ist aber sicher ein Fehler, die Zuweisung müsste auf wcd_image.src lauten. Evtl. behebt das den Fehler?

Nebenfrage: muss man in Javascript einen Case-Block in geschweifte Klammern setzen? Ich hab das glaub nie so gemacht
huh.gif


Griessli
Irene
 
Sorry, war ein Fehler beim kopieren.....


document.all.wcd_img.src = wcd_image; ---> steht so auch in meinem Code!


Die Fehlermeldung bleibt.




Bzgl. der Klammerung ----> ich bin das so von 'richtigen' Programmiersprachen gewohnt. Jedenfalss funktioniert es!



Sonst irgendeine Idee????
 
QUOTE (emphillis @ Do 7.10.2004, 15:01)document.all.wcd_img.src = wcd_image; ---> steht so auch in meinem Code!

Wenns wirklich genauso im Code steht, ist es eben falsch. Das fehlt das ".src" am Ende.

Sonst hab ich keine Idee, müsste es höchstens lokal testen, aber dazu bräucht ich den ganzen Source.


QUOTE (emphillis @ Do 7.10.2004, 15:01)Bzgl. der Klammerung ----> ich bin das so von 'richtigen' Programmiersprachen gewohnt.
Für mich ist auch Javascript eine richtige Programmiersprache, wenn auch nur Script... die Klammern um einen Case-Block sind auch bei Java, C# und C++ nicht nötig. Aber schaden tun sie auch nix ;-)

Griessli
Irene
 
Hi !!!

Vielen Dank für die Mühen !!!

Hab den Code auf das Problem beschränkt.

<html>
<head>
<title>TEST</title>
<script language="JScript" type="text/jscript">
function change_WCD(changeindex)
{
var wcd_image = new Image();
var wcdummy_image = new Image();
wcd_image.src="wcd.jpg";
wcdummy_image.src="wcd_dummy.jpg";

switch(changeindex)
{
// text
case '0':
{
document.images.wcd_img.src = wcdummy_image.src;
document.all.text_box.innerText = 'TEST';
break;
}
// image
case '1':
{
document.all.text_box.innerText = '';
document.images.wcd_img.src = wcd_image.src;
break;
}
}
}
</script>
</head>
<body>
<table border="1" cellpadding="0" cellspacing="0" bordercolor="#111111" width="100%">
<tr>
<td width="100%" colspan="3"> </td>
</tr>
<tr>
<td width="33%"> </td>
<td width="33%" id="text_box" height="175" bgcolor="#C73343" onMouseOver="Javascript:change_WCD('0')" onMouseOut="Javascript:change_WCD('1')">
<p align="center"><img id="wcd_img" border="0" src="../wcd.jpg" width="225" height="150"></td>
<td width="34%"> </td>
</tr>
<tr>
<td width="100%" colspan="3"> </td>
</tr>
</table>
</body>
</html>
 
Das Problem tritt beim text_box.innerText auf; damit wird der komplette Inhalt der Zelle überschrieben, und das Image ist nachher tatsächlich nicht mehr vorhanden. Mit einem zusätzlichen Span (oder sonst einem Tag, der Text beinhalten kann) lässt sich das Problem umgehen:

switch(changeindex){
// text
case '0':{
document.images.wcd_img.src = wcdummy_image.src;
document.all.tst.innerText = 'TEST';
break;
}
// image
case '1':{
document.all.tst.innerText = '';
document.images.wcd_img.src = wcd_image.src;
break;
}
}

<td width="33%" id="text_box" height="175" bgcolor="#C73343" onMouseOver="Javascript:change_WCD('0')" onMouseOut="Javascript:change_WCD('1')">
<p align="center"><span id="tst"></span><img id="wcd_img" border="0" src="../wcd.jpg" width="225" height="150">
</p>
</td>

Das Bild wird übrigens im Javascript und im Image-Tag unterschiedlich geladen, einmal vom aktuellen Verzeichnis und einmal vom übergeordneten.

Griessli
Irene
 
Man könnte auch ein gif machen mit dem Text und dann einfach das Bild wechseln.

Franz
 
Sie müssen sich einloggen oder registrieren, um hier antworten zu können.
Zurück
Oben