• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

"img" ignoriert "id"; bei "audio" sperrt "id" gut.

U

udo_html

Neues Mitglied
Hallo,
Mit "id=" kann ich filtern, ob z.B. unter <audio> eine Musikdatei gesendet wird oder nicht.
Wenn ich denselben Befehl auf "img" anwende, wird der Filter ignoriert und das Bild wird ohne Bedingungen abgebildet. Kennt jemand den Grund, bzw. hat eine Abhilfe?

So klappt die Verknüfung gut:
>div>
<img onClick="document.getElementById('music35').play()" src="w/alle.jpg" />
<audio id="music35" src="t/right1.wav" ></audio>
</div>

Das klappt auch, wenn die Zeile
<audio id="music35" src="t/right1.wav" ></audio>
außerhalb von <div> ... </div> steht.
Wenn ich dasgleiche für Bilder mit der "id="-Bedingung plane, z.B. mit:
<img id="music32" src = "c/3d_a.gif" />
wird [id="music32"] als Filterbegrenzung einfach ignoriert - das Bild erscheint immer.

Vielen Dank für eine Antwort im voraus.
Udo
 
In dem Fall kannst du natürlich nicht play() verwenden, ein Bild ist ja kein Audio-Objekt. ;)

Es gibt hier zwei Möglichkeiten zum Ziel zu gelangen. Die erste besteht darin, den <img>-Container statisch ins HTML zu schreiben und per CSS mit einem display: none zu belegen, das beim Klick entfernt wird. Die zweite wäre, den <img>-Container beim Klick zu erzeugen und an die richtige Stelle im DOM einzufügen. Für Beides sind allerdings grundlegende JS bzw. jQuery (damit geht es einfacher) Kenntnisse erforderlich.
 
Zuletzt bearbeitet:
Hallo,
ich habe mir selbst - dank SELFHTML - eine funktionierende Antwort gegeben. Es folgen 2 Möglichkeiten. (Entsprechende Link-Dateien müssen natürlich angepasst werden).
Das funktioniert auch in Tabellen.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Bild austauschen</title>
<!-- xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx zwei Varianten xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx -->
<script type="text/javascript"> function neuesBild () {
if (document.getElementById("B").src.indexOf("a.jpg") > -1) {
document.getElementById("B").src = "ae.jpg"; document.getElementById("B").title = "Bild 2"; return;
}
if (document.getElementById("B").src.indexOf("ae.jpg") > -1) {
document.getElementById("B").src = "au.jpg"; document.getElementById("Bild").title = "Bild 3";
return;
}
if (document.getElementById("B").src.indexOf("au.jpg") > -1) {
document.getElementById("B").src = "a.jpg"; document.getElementById("B").title = "Bild 1";
}
}
</script></head><body><br>
<a href="javascript:neuesBild()">neues Bild</a>
<!-- xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx -->
<blockquote><blockquote><blockquote>
<script language = "javascript">
fun ction bildanders() {
document.TB.border=5;
document.TB.src="a.jpg"
}
</script></head><body>
<Form Name = "Test">
<input type="button" name = "TB" id ="id2" value= "Funct." onclick = "bildanders()" >
<input type="text" name = "tb" id ="id2" value= "ohne Rand" onclick = document.TB.border=0 >
<input type="text" name = "TB" id ="id2" value= "HALLO" onclick = document.TB.border=3 >
<input type="button" name = "TB" id = "id2" value="Vogel" onclick= document.TB.src="vogel.png" >
</Form>
<table width="1000" border="1"><tr><td width="360">
<img src="a.jpg" margin-top:"600px" NAME="TB" id ="id2" width="200" height="50" border="10" />
</td><td width="545">
<img id="B" src="a.jpg" width="289" height="302" alt="Bild 1" title="Bild 1" />
</td>
<td width="32">&nbsp;</td>
<td width="35">&nbsp;</td>
</tr></table></body></html>
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben