onClick bild wechsel...

[incognito]

hallöchen, ich hätte gern eine Information, ob ich einigermaßen auf dem richtigen Weg bin ein, bild durch onClick auszuwächseln und poste hier mal mein sehr kurzen code...

var a = new image();
a.src = "bild5.jpg";

function b()
document.getElementsByTagName("list")[0] = "a";
}

html
<li class="one">
<a href="www.1.de><img src="bild1.jpg"></a></li>
<li class="two">
<a href="www.2.de"><img src="bild2.jpg"></a></li><li>
<li class="three">
<a href="www.3.de"><img src="bild3.jpg"></a></li></li>
<li class="four">
<a href="www.4.de"><img src="bild4.jpg"></a></li></li>

Die idee dahinter, ich hole mir mit a ein neues Bild.
Nehme mir den Listeneintrag vor und ersetze ihn gegen das a bild...
mit einem onClick handler.

Ansonsten wird  das alte Bild angezeigt.

[Take]

Moin,

hallöchen, ich hätte gern eine Information, ob ich einigermaßen auf dem richtigen Weg bin ein, bild durch onClick auszuwächseln und poste hier mal mein sehr kurzen code...

var a = new image();
a.src = "bild5.jpg";

Das Image wird großgeschrieben (JavaScript ist case-sensitive).

function b()
document.getElementsByTagName("list")[0] = "a";
}

Ab hier wirds Quatsch:
1. Es gibt kein HTML-Element namens "list", du meinst "li".
2. Du wolltest wahrscheinlich = a (ohne Anführungszeichen) schreiben, und nicht einen String zuweisen, oder? Aber selbst dann ist das so nicht richtig, denn auf diese Art und Weise kann man keine DOM-Nodes ersetzen. Du musst in b() das src-Attribut des <http://de.selfhtml.org/javascript/objekte/node.htm#first_child@title=ersten Kindelements> (das Bild) des ersten Kindelements (der Link) des Listenelements auf das src-Attribut von a setzen:

function b() {  
    document.getElementsByTagName('li')[0].firstChild.firstChild.src = a.src;  
}

<li class="one">
<a href="www.1.de><img src="bild1.jpg"></a></li>
<li class="two">
<a href="www.2.de"><img src="bild2.jpg"></a></li><li>
<li class="three">
<a href="www.3.de"><img src="bild3.jpg"></a></li></li>
<li class="four">
<a href="www.4.de"><img src="bild4.jpg"></a></li></li>

Die Klassenvergebung ist ja wohl mal total sinnlos... nth-child existiert! Und was soll das zweite Listenelement um <li class="three">? Und das letzte schließende Tag ist auch irgendwie zu viel...

Gruß,
Take

[incognito]

hm...
case-sensitiv ok.
aber das mit den knoten versteh ich nicht ganz.
Ich habe doch ein li element (eigentlich ja mehrere)

"spricht mir das erste li element an"    ?           ?             ????
also document.getElementsByTagName('li')[0].firstChild.FirstChild.src =a.src;

ich dachte wenn ich es so schreibe

document.getElementsByTagName("li")[0] = a; (das mit den anführungszeichen tut mir leid, wollte die variable zuweisen.

Habe ich ja das li element mit der nummer. = dem Bild gesetzt. hatte zum Teil auch ein wenig gehofft das es wenn ich = a mache es den Link und die position behält. Und nur das Bild wechselt.

oder wäre es sinvoller gewesen meine variable a die schon das Bild zugewiesen bekommen hat sprich a + document.getElementsByTagName....

das mit den klassen, dachte das wäre so ok.

In der Hinsicht, das ich gar nichts weiß. Schockt es mich ein wenig...

[Felix Riesterer]

Lieber incognito,

Dein grundsätzlicher Denkfehler liegt darin, dass Du keine HTML-Elemente (in JS sind das Objekte) einfach so durch andere ersetzen kannst, um das zu erreichen, was Du willst.

Du willst, dass ein anderes Bild angezeigt wird? Dann musst Du die referenzierte Bilddatei im <img>-Element ändern, sprich: den Wert des src-Attributs mit einer neuen URL befüllen. In JS bedeutet das, dass Du die ".src"-Eigenschaft eines Objektes (des <img>-Elements) mit Deiner neuen URL beschreibst.

// Folgende Zeile setzt voraus, dass im Dokument <img id="wechselbild" ... /> steht:  
var meinBild = document.getElementById("wechselbild");  
  
// Bild ändern durch neue URL  
meinBild.src = "http://example.com/anderes-bild.jpg";

Woher Du nun die URL für das neue Bild holst, überlasse ich Dir.

Liebe Grüße,

Felix Riesterer.

[incognito]

ok Ich bedanke mich für das erste mal bei euch.
Und werde mich mal dahinterklemmen mein objekt Wissen zu erweitern.

[incognito]

oh man...

Ich hab mein Fehler denk ich behoben. Ich kann das Bild jetzt ändern via
.style.BackgroundImage. Aber nun ein anderes problem.

hier der code.

window.onload = function b();
 var i = 0;
 if (i > 0)
  i++
document.getElementsByTagName('li')[0].style.backgroundImage = "url(images/navigation.community.jpg)";
}

mein onclick

<li class="one" onclick="b"();> <a href="www.1.de">

also mein Gedanke...
Ich verändere das backgroundImage bei onClick. die if bedingung soll sicherstellen das es erst funktioniert wenn man darauf klickt.
Denke wenn ich ihr einen Wert gebe onclick mache i größer und verändere das Bild. (weiß nicht wie das gehen soll mit einer onClick bedingung)

Und unten dann in meiner li class eingebunden.
Mein Problem ist ich kann keinen Link mehr erkennen nur die Grafiken bzw es ist gar kein Link mehr vorhanden.
Sollte ich einen link mit appendChild anhängen?
Ohne die Bedingung wird die Grafik gleich ersetzt ansonsten steht sie im grundzustand. Aber mit keiner fläche zum anklicken für onClick.

[Felix Riesterer]

Lieber incognito,

wieso benutzt Du auf einmal ein Hintergrundbild? Was genau willst Du denn eigentlich erreichen? Was soll bei welcher User-Aktion wie aussehen? Wenn das geklärt ist, dann kann man Dir vielleicht besser raten, was zu tun ist.

Liebe Grüße,

Felix Riesterer.

[incognito]

ja.

Ich habe eine navigation. diese besteht aus 4 bildern nebeneinander.
Diese 4 bilder, möchte ich wenn man daraufklickt ein anderes Bild zuweisen.
So dass es aussieht wie man diesen Button nach innen gedrückt hat.(also ein grafiken austausch)
nur einer dieser 4 Button sollte gedrückt werden können.
Ein Beispiel habe ich auch parat.
http://eu.battle.net/d3/de/ möchte diesen effekt erzielen in der Navigation.
Habe mich auch schon schlau gemacht und mitbekommen das dies auch mit css möglich wäre. Ich würde das aber lieber mit Javascript erzielen.
ich habe jeder li class einen hintergrund gegeben und versuche diesen nun mit Javascript zu verändern.

Später wird es noch einen Mouseover effect geben der mir einen container öffnet. Mit einer Auswahl der jeweiligen Menüpunkte.

Aber bis jetzt hapert es noch am bildwechsel.

[Felix Riesterer]

Lieber incognito,

Aber bis jetzt hapert es noch am bildwechsel.

nein, Du hast ganz andere Baustellen, als solchen Schnickschnack. Wenn Du meinst, JavaScript sei Dein Allheilmittel, dann hast Du wesentliche Grundlagen der Webseitenerstellung noch nicht begriffen. Die <http://de.selfhtml.org/css/layouts/navigationsleisten.htm#modern@title=CSS-basierte Lösung> ist in jedem Fall vorzuziehen. Auch und gerade wenn Du später noch aufklappbare Menüs möchtest!

Liebe Grüße,

Felix Riesterer.

[incognito]

Mein gedanke warum Javascript und nicht css, liegt einfach darin, das ich keine 50 Seiten an css code möchte. Das macht einfach keine gute Figur im quellcode. Und halte Javascript einfach für Dynamischer.

Aber bin ja kein Profi. Deshalb werde ich es mal mit css versuchen.

[Felix Riesterer]

Lieber incognito,

das ich keine 50 Seiten an css code möchte. Das macht einfach keine gute Figur im quellcode.

aha, DAS ist ja mal ein ARGUMENT! Warum das nicht schon früher mal jemand angebracht hat...?

Und halte Javascript einfach für Dynamischer.

Das ist es. Aber warum etwas mit JavaScript nachbilden, wenn Browser schon solche Dinge "von Haus aus" anbieten? Die CSS-Variante ist auf jeden Fall sicherer.

Aber bin ja kein Profi.

Das hast Du mit Deiner Argumentation schlüssig dargelegt. *g*

Deshalb werde ich es mal mit css versuchen.

Bei Fragen bezüglich CSS kommst Du wieder hierher. Dazu ist das Forum ja da!

Liebe Grüße,

Felix Riesterer.

[incognito]

»»Bei Fragen bezüglich CSS kommst Du wieder hierher. Dazu ist das Forum ja da!

Auf jedenfall :) danke

[EKKi]

Mahlzeit incognito,

Mein gedanke warum Javascript und nicht css, liegt einfach darin, das ich keine 50 Seiten an css code möchte.

Faulheit war noch nie ein akzeptabler Grund für irgendetwas.

Das macht einfach keine gute Figur im quellcode.

Was meinst Du jetzt *damit*?

Und halte Javascript einfach für Dynamischer.

Das mag sein - aber für die Darstellung ist CSS zuständig. Punkt.

Aber bin ja kein Profi. Deshalb werde ich es mal mit css versuchen.

Gern ... bei (konkreten) Fragen hilft man Dir hier im Forum gern weiter.

MfG,
EKKi

[EKKi]

Mahlzeit Felix Riesterer,

Aber bis jetzt hapert es noch am bildwechsel.

nein, Du hast ganz andere Baustellen, als solchen Schnickschnack.

Z.B. überhaupt syntaktisch korrekten und validen Quellcode zu schreiben. Beispiele gefällig?

window.onload = function b();

<li class="one" onclick="b"();> <a href="www.1.de">

MfG,
EKKi