Bilderwechsel klappt nicht.
steffen
- javascript
Hallo,
ich bin durch etliche Foren gehüpft und habs immernoch nicht hinbekommen. Ein einfacher Bilderwechsel mit JS ...
function change_img(newurl){
window.document.getElementByID['bild'].src = "bla.jpg";
}
<a href="#" onClick="change_img(./Bild2.jpg);">
<img src="./Bild1.jpg" id="bild">
Wo liegt mein Fehler? Hab es auch mit name ausprobiert geht auch nicht. Zu hülf :(
mfg steffen
<a href="#" onClick="change_img(./Bild2.jpg);">
wenn du einer funktion enen parameter als string übergibst, solltest du diesen auch als string kennzeichnen - hochkommas eignen sich dafür ;)
@@steffen:
ich bin durch etliche Foren gehüpft
Vielleicht solltest du nicht so viel rumhüpfen, sondern mal innehalten und dich dem Problem widmen.
window.document.getElementByID['bild'].src = "bla.jpg";
Die Fehlerkonsole sollte dir dazu was sagen. getElementByID erwartet Parameter.
Und außerdem gibt es getElementByID gar nicht.
Live long and prosper,
Gunnar
Mahlzeit,
function change_img(newurl){
window.document.getElementByID['bild'].src = "bla.jpg";
}<a href="#" onClick="change_img(./Bild2.jpg);">
<img src="./Bild1.jpg" id="bild">
Zusätzlich zu den Worten meiner Vorposter: Wenn Du die Funktion mit der Adresse des neuen Bildes aufrufst - wieso ignorierst Du diesen Funktionsparameter innerhalb der Funktion komplett und setzt als neue Adresse irgendeinen festen String?
MfG,
EKKi
Hallo EKKi,
sorry hab das Beispiel verändert, das es deutlicher wird. Derzeitiger stand schaut nun so aus:
<a href="#" onClick="change_img("./Objektfotos/6224/0_PIR_1_Eingang.jpg");">text</a>
Im Quelltext streicht der mir das im change_img rot an.
Die funktion schaut natürlich so aus:
function change_img(newurl){
document.getElementByID['skizze'].firstChild.src = newurl;
}
<div id="skizze"><img src="./Objektfotos/6224/4_Objektskizze__.jpg" style="width: 420px;"></div>
steffen
Mahlzeit,
<a href="#" onClick="change_img("./Objektfotos/6224/0_PIR_1_Eingang.jpg");">text</a>
Keine Gute Idee: ^ ^
hier beginnt der Wert und hier endet der Wert des "onclick"-Attributs. Mit allem, was danach kommt, kann der Browser nichts anfangen (siehe Validator). Du solltest für HTML und Javascript <http://de.selfhtml.org/javascript/sprache/variablen.htm@title=unterschiedliche Anführungszeichen> benutzen.
Im Quelltext streicht der mir das im change_img rot an.
Wer ist "der"?
Die funktion schaut natürlich so aus:
function change_img(newurl){
document.getElementByID['skizze'].firstChild.src = newurl;
}
Natürlich ist nichts - schließlich kann hier keiner hellsehen und es besitzt auch niemand eine fehlerfrei funktionierende Glaskugel ... so weit ich weiß.
Wenn Du Code-Beispiele bringst (was an sich gut und richtig ist) dann bitte auch den Code, den Du verwendest - sonst wird das mit dem Raten schwer.
MfG,
EKKi
@@steffen:
<a href="#" onClick="change_img("./Objektfotos/6224/0_PIR_1_Eingang.jpg");">text</a>
▲ ▲
Hier beginnt der Attributwert. Hier endet er. Wohl nicht das, was du willst.
Du kannst einfache Anführungszeichen innerhalb von doppelten verwenden oder auch andersrum; oder maskieren.
Die funktion schaut natürlich so aus:
function change_img(newurl){
document.getElementByID['skizze'].firstChild.src = newurl;
}
Was heißt hier „natürlich“?? Warum beachtest du die schon gegebenen Hinweise nicht?
<div id="skizze"><img src="./Objektfotos/6224/4_Objektskizze__.jpg" style="width: 420px;"></div>
'alt'-Attribut fehlt.
Live long and prosper,
Gunnar
wozu machst du so einen aufwand ...
<html>
<head>
<title>Dein Bildwechsel</title>
<script language="Javascript">
function Bildwechsel(NeuesBild)
{
document.images["Bild"].src=NeuesBild;
}
</script>
</head>
<body>
<img src="AltesBild.jpg" width="XX" height="XX" alt="Bild"
onClik="Javascript:Bildwechsel('NeuesBild.jpg')" name="Bild">
</body>
</html>
so geht es doch viel einfacher...
<img src="AltesBild.jpg" width="XX" height="XX" alt="Bild"
onClik="Javascript:Bildwechsel('NeuesBild.jpg')" name="Bild">so geht es doch viel einfacher...
nee, so geht es gar nicht.
Wirklich einfacher geht es so:
<img src="AltesBild.jpg" alt="Bild"
onclick="this.src = 'NeuesBild.jpg'">
Struppi.
Mahlzeit,
wozu machst du so einen aufwand ...
function Bildwechsel(NeuesBild)
{
document.images["Bild"].src=NeuesBild;
}
Diese Funktion ist ein Beispiel dafür, wie man es NICHT machen sollte - schließlich beschränkst Du ihre Funktionalität auf genau EIN <image> ... wenn schon, dann solltest Du es folgendermaßen machen:
function Bildwechsel(img, url) {
if (url != '') {
img.src = url;
}
}
<img src="AltesBild.jpg" width="XX" height="XX" alt="Bild" onclick="Bildwechsel(this, 'NeuesBild.jpg')" name="Bild">
Und das wäre dann so zeimlich das, was hier auch schon mehrfach geraten wurde.
<img src="AltesBild.jpg" width="XX" height="XX" alt="Bild"
onClik="Javascript:Bildwechsel('NeuesBild.jpg')" name="Bild">
1. heißt der Eventhandler "onclick" (mit 2 "c" und klein geschrieben) und
2. ist die Angabe des Pseudo-Protokolls "javascript" überflüssig und nicht sinnvoll (wobei die Schreibweise "Javascript" erst recht falsch ist).
so geht es doch viel einfacher...
Nein, im Gegentum.
MfG,
EKKi
hi,
wenn schon, dann solltest Du es folgendermaßen machen:
function Bildwechsel(img, url) {
if (url != '') {
img.src = url;
}
}
>
> `<img src="AltesBild.jpg" width="XX" height="XX" alt="Bild" onclick="Bildwechsel(this, 'NeuesBild.jpg')" name="Bild">`{:.language-html}
Ich hab das mal für mich ein wenig erweitert, jetzt würde ich gerne wissen ob mir das eventuell Schwierigkeiten bereiten könnte, ich bin mit dem Javascripten noch ein ziemlicher Anfänger und unsicher.
~~~javascript
<script type="text/javascript">
function Bildtauschen(id, url) {
document.getElementById(id).src = url;
}
</script>
dann kommt das Bild, das ausgetauscht werden soll,
<img src="platzhalter.gif" width="250" id="objekt_ge" alt="Bilder" />
und schliesslich die Bilderliste, die alle Bilder beinhaltet
<img src="platzhalter.gif" width="30" alt="Bild" onclick="Bildtauschen('objekt_ge', 'platzhalter.gif')">
<img src="platzhalter-1.gif" width="30" alt="Bild" onclick="Bildtauschen('objekt_ge', 'platzhalter-1.gif')">
<img src="platzhalter-2.gif" width="30" alt="Bild" onclick="Bildtauschen('objekt_ge', 'platzhalter-2.gif')">
<img src="platzhalter-3.gif" width="30" alt="Bild" onclick="Bildtauschen('objekt_ge', 'platzhalter-3.gif')">
Ist das eine Funktion die ich ohne Probleme nutzen kann? Funktionieren tut es ja wenigstens schon mal.
grüße