Autor |
Nachricht |
jojoba
Threadersteller
Dabei seit: 02.12.2007
Ort: Neuss
Alter: -
Geschlecht:
|
Verfasst So 02.12.2007 23:13
Titel JavaScript Bildwechsel in Tabelle - mit Ziel in neuer Zelle |
|
|
Hallo,
ich habe in einer Joomla!-Website eine Tabelle, in der auf der linken Seite 4 (leicht mattierte) Bilder im Quadrat (2 nebeneinander, und 2 darunter) angezeigt werden. In der Tabellenzelle rechts wird ein großes Bild in der Größe des linken Bereichs dargestellt.
Ziel ist es:
1. dass im linken Bereich jeweils das Bild zu einer nicht-mattierten (=klaren) Ansicht wechselt, wenn man den Mauszeiger darauf hält. Das habe ich mit mouseOver realisiert. Dabei gibt es nur den Bildwechsel, wenn der Mauszeiger über einem Bild ist.
2. wenn man auf der linken Seite ein Bild anklickt, soll das entsprechende mouseOver Bild links fest stehen bleiben und im Tabellenfeld auf der rechten Seite ein neues Bild erscheinen.
Was ich bisher (als neuen Code) habe ist:
Code: | <script type="text/javascript">
function tausche(mynumber) {
document.getElementById('bild' + mynumber).img.src ="images/auswahl1/bild" + mynumber + ".jpg";
}
function tback(mynumber) {
document.getElementById('bildmatt' + mynumber).img.src = "images/auswahl1/bildmatt" + mynumber + ".jpg";
}
function setImg (mynumber) {
document.getElementById('bildbig').img.src = "images/auswahl1/bildbig" + mynumber + ".jpg";
}</script> |
und in einer Zelle zum Test:
Code: | <td><img id="bild1" src="http://www.domain.de/images/auswahl1/bildmatt1.jpg" onmouseout="tback(1);" onclick="setImg(1);" onmouseover="tausche(1);" /> </td> |
Damit wird bisher nur das Bild mit der/dem URL angezeigt. Wenn ich mit dem Mauszeiger darüber gehe, erhalte ich eine kleine Fehlermeldung unten am Rand des Browsers und das Bild verändert sich nicht.
In Firefox erhalte ich folgende Fehlermeldung in der Statusleiste:
Code: | document.getElementById("bild" + mynumber).img has no properties
document.getElementById("bildbig") has no properties
document.getElementById("bildmatt" + mynumber) has no properties |
Und der IE sagt mir, wenn ich mit dem Mauszeiger über das Bild gehe (ebenfalls in der Statusleiste):
Code: | Fehler: 'document.getElementById(...).img' ist Null oder kein Objekt |
Kann mir bitte jemand weiter helfen?
Zuletzt bearbeitet von jojoba am So 02.12.2007 23:17, insgesamt 2-mal bearbeitet
|
|
|
|
|
sahnemuh
Dabei seit: 19.06.2003
Ort: /dev/null
Alter: 42
Geschlecht:
|
Verfasst Mo 03.12.2007 01:20
Titel
|
|
|
lass das .img weg.
document.getElementById('bild' + mynumber).src = "images/auswahl1/bild" + mynumber + ".jpg";
|
|
|
|
|
Anzeige
|
|
|
Raumwurm
Dabei seit: 21.12.2004
Ort: -
Alter: -
Geschlecht:
|
Verfasst Mo 03.12.2007 01:43
Titel
|
|
|
Und falls Du das geklickte Buidl weiterhin gehighlightet
lassen willst könntest Dus auch so umsetzen:
bildwechselen
|
|
|
|
|
jojoba
Threadersteller
Dabei seit: 02.12.2007
Ort: Neuss
Alter: -
Geschlecht:
|
Verfasst Mo 03.12.2007 02:01
Titel
|
|
|
Danke, dann geht es scheinbar zumindest im IE. Im Firefox nicht.
- Frage 2 -
Ich habe allerdings gerade einen anderen Code entdeckt und eingesetzt, den ich jetzt wieder komplett ersetzen müsste:
[code]<script type="text/javascript" language="JavaScript">
<!--
i01 = new Image();
i01.src = "images/bild1.jpg";
i02 = new Image();
i02.src = "images/bild2.jpg";
i03 = new Image();
i03.src = "images/bild3.jpg";
i04 = new Image();
i04.scr = "images/bild4.jpg";
function Change(imgID,imgObjName) {
document.images[imgID].src = eval(imgObjName + ".src")
}
//--></script>[code]
und zum aufrufen:
[code]<td><a href="#" onClick="Change ('ansicht','i01')"><img src="../images/bild1.jpg" border="0" alt="Alttitel"></a></td>[/code]
Das funktioniert zumindest mit dem onClick Wechsel tadelos. Nur weiß ich hier nicht, wie ich die mouseOver, mouseOut und "halte mouseOver-Bild bei Klick" Funktion hinein bekomme.
|
|
|
|
|
jojoba
Threadersteller
Dabei seit: 02.12.2007
Ort: Neuss
Alter: -
Geschlecht:
|
Verfasst Mo 03.12.2007 02:03
Titel
|
|
|
Hallo Raumwurm, ich habe deine Antwort erst gesehen, nachdem ich meinen Beitrag abgeschickt hatte. Dein Beispiel zeigt das, was ich gerne hätte.
|
|
|
|
|
|
|
|
Ähnliche Themen |
Bildwechsel mit Javascript
bildwechsel per javascript
Bildwechsel - Javascript
Bildwechsel mit JavaScript
[JavaScript] Bildwechsel-Schleife
javascript-bildwechsel in anderen bereich!
|
|