Sie befinden sich hier im Forenarchiv von phpforum.de wenn Sie direkt ins Forum möchten, klicken Sie bitte hier. Zur Startseite kommen Sie hier.

Bildwechsel

Hi, ich möchte gerne beim mouseover und mouseout die Grafik meines Buttons ändern. Anders als in dem hier von mir aufgeführten Code (gekürztes Beispiel von Selfhmtl) möchte bzw. kann ich die Grafiken nicht über den Index von images ansprechen (z.B. images[0]), da meine Seite dynamisch generiert wird und nur der erste und letzte Button so einen Effekt erhalten soll. Den ersten anzusprechen ist keine problem der is ja immer images[0] ;-). Mein Problem ist der letzte.
Nun meine Frage: Lös ich dieses Problem am besten, in dem ich mir vorher das letze Element des Images-Array über die Array-funktionen ausgebe lasse oder klappt das irgendwie auch einfacher? (z.B. über getElementById() oder dem Image eine feste Stelle im Images-Array zuweisen)
Es wäre nett, wenn ihr mir mit Beispielcode auf die Sprünge helfen könntet.


Code:                   In Zwischenablage kopieren (nur IE)
1">

DANKE!!!!
Hier gehts zum Orginal Eintrag "Bildwechsel" im Forum

Antworten

Du kannst jedem Bild eine ID geben, siehe auch http://de.selfhtml.org


2.

Ok, das hab ich schon mal versucht.

sah dann so aus
Code:                   In Zwischenablage kopieren (nur IE)
2">

Code:                   In Zwischenablage kopieren (nur IE)
3">

Die Fehlermeldung der Scriptkonsole von Firefox war dann. window.document.getElementById("id").src hat keine Eigenschaften
Weis jemand was ich falsch gemacht habe, und sind vielleicht CSS´s auch ne Möglichkeit für dieses Problem ?(z.B. hover?) Hab nur gelesen, dass es da ein Problem mit flimmernden Buttons unter IE 6 gibt, deshalb mein Ansatz mit Javascript


3.

Zitat:
Racksel postete
Die Fehlermeldung der Scriptkonsole von Firefox war dann. window.document.getElementById("id").src hat keine Eigenschaften

Und was ist mit document.getElementById("bild1").src ?

Allerdings weiß ich gar nicht, ob es überhaupt erlaubt ist, DOM Level 0 und DOM Level 2 zu "kreuzen". ;) (IMHO lieber nicht)

DOM Level 0: document.images["bild1"].src=neuerURL;
<img name="bild1" ...>

DOM Level 2: document.getElementById("bild1").setAttribute("src",neuerURL);
<img id="bild1" ...>

oder:

document.getElementsByName("bild1")[0].setAttribute("src",neuerURL);
<img name="bild1" ...>

Hoffentlich überflüssig zu erwähnen, daß man hier gemeinhin DOM Level 0 nimmt, da es mehr Browser verstehen. ;-)

BTW: Das letzte Image kann man auch so ansprechen: document.images[document.images.length-1].src=neuerURL;
Aber über den Namen ist es natürlich sauberer. ;)


Zitat:
sind vielleicht CSS´s auch ne Möglichkeit für dieses Problem ?(z.B. hover?)
Nein, das wird erst mit CSS Level 3 möglich sein. CSS bietet bis dahin nur die Möglichkeit Hintergrundbilder auszutauschen (und ggf. per :before etc. aber das ist etwas anderes und der IE beherrscht es ohnehin nicht). Diese Variante hat gegenüber der JS-Methode aber den gravierenden Nachteil, daß die Informationsweitergabe nicht in jedem Fall gesichert ist (wurde mal als "technische Spielerei" der Gattung "sowas ist mit CSS auch möglich" veröffentlicht und startete dann von einer "Bitte nicht einsetzen"-Demonstration zu einem in gewissen Kreisen gerne genutzten JS-losen Variante. Nutzen bringt die CSS-Variante wirklich nur bei Hintergrundbildern, also wenn im Vordergrund tatsächlich stets etwas zu sehen ist (Grafik mit Beschriftung auf transparentem Grund oder schlicht Text).


4.

Ok mit DOM Level eins funktioniert es. Leider aber nur wenn ich den namen des Bildes fest in meine Funktion schreibe, wenn ich es mit Parameterübergabe mache spinnt er mir rum

Mein Versuch. In diesem Fall für OnClick
Code:                   In Zwischenablage kopieren (nur IE)
4">

Fehler: window.document.images.bild has no properties

Wieso sagt er hier bild und nimmt nicht den von mir übergebenen Parameter? (bitte steinigt mich nicht, wenn ich hier einen grundlegenden Javascriptfehler mache.


5.

Zitat:
Racksel postete
Ok mit DOM Level eins funktioniert es.

0! DOM Level 1 sind die proprietären "Anfangsversuche" von MS (document.all) und Netscape (Layer).

Zitat:
function Bildwechsel(bild,Bildobjekt) {
window.document.images["bild"].src = Bildobjekt.src;

Gleicher Fehler wie oben. Du greifst auf den Namen "bild" zu, anstatt auf die Variable bild. Entferne die Anführungszeichen!


6.

Danke Cybaer für deine Geduld und auch allgemein.

Aber das hatte ich schon versucht und dann kommt diese Fehlermeldung.
Fehler: window.document.images[bild] has no properties


7.

Zitat:
Racksel postete
Danke Cybaer für deine Geduld und auch allgemein.

Keine Ursache.

Zitat:
Aber das hatte ich schon versucht und dann kommt diese Fehlermeldung.
Fehler: window.document.images[bild] has no properties
LOL - ich hatte wohl schon beim ersten Fehler aufgehört weiter zu schauen. ;)

Zitat:
<a href="blabla" onclick="Bildwechsel(vorherige,onclickvorherige)" target="_self" >
<img src="grafiken/vorherige.png" name="vorherige">
</a>

Hier muß natürlich das vorherige in einfache Anführungszeichen, da ja der String 'vorherige' übergeben werden soll! :D


Hier gehts zum Orginal Eintrag "Bildwechsel" im Forum
 
phpforum.de | Impressum | Handy Bundles