mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: Fr 29.03.2024 15:33 Benutzername: Passwort: Auto-Login

Thema: JavaScript Bildwechsel in Tabelle - mit Ziel in neuer Zelle vom 02.12.2007


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Programmierung -> JavaScript Bildwechsel in Tabelle - mit Ziel in neuer Zelle
Autor Nachricht
jojoba
Threadersteller

Dabei seit: 02.12.2007
Ort: Neuss
Alter: -
Geschlecht: Männlich
Verfasst So 02.12.2007 23:13
Titel

JavaScript Bildwechsel in Tabelle - mit Ziel in neuer Zelle

Antworten mit Zitat Zum Seitenanfang

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
  View user's profile Private Nachricht senden
sahnemuh

Dabei seit: 19.06.2003
Ort: /dev/null
Alter: 42
Geschlecht: Männlich
Verfasst Mo 03.12.2007 01:20
Titel

Antworten mit Zitat Zum Seitenanfang

lass das .img weg.
document.getElementById('bild' + mynumber).src = "images/auswahl1/bild" + mynumber + ".jpg";
  View user's profile Private Nachricht senden
Anzeige
Anzeige
Raumwurm

Dabei seit: 21.12.2004
Ort: -
Alter: -
Geschlecht: Männlich
Verfasst Mo 03.12.2007 01:43
Titel

Antworten mit Zitat Zum Seitenanfang

Und falls Du das geklickte Buidl weiterhin gehighlightet
lassen willst könntest Dus auch so umsetzen:
bildwechselen
  View user's profile Private Nachricht senden
jojoba
Threadersteller

Dabei seit: 02.12.2007
Ort: Neuss
Alter: -
Geschlecht: Männlich
Verfasst Mo 03.12.2007 02:01
Titel

Antworten mit Zitat Zum Seitenanfang

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.
  View user's profile Private Nachricht senden
jojoba
Threadersteller

Dabei seit: 02.12.2007
Ort: Neuss
Alter: -
Geschlecht: Männlich
Verfasst Mo 03.12.2007 02:03
Titel

Antworten mit Zitat Zum Seitenanfang

Hallo Raumwurm, ich habe deine Antwort erst gesehen, nachdem ich meinen Beitrag abgeschickt hatte. Dein Beispiel zeigt das, was ich gerne hätte.
  View user's profile Private Nachricht senden
 
Ähnliche Themen Bildwechsel mit Javascript
bildwechsel per javascript
Bildwechsel - Javascript
Bildwechsel mit JavaScript
[JavaScript] Bildwechsel-Schleife
javascript-bildwechsel in anderen bereich!
Neues Thema eröffnen   Neue Antwort erstellen
MGi Foren-Übersicht -> Programmierung


Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.