Bild austauschen

Hallo,

wie kann ich mittels Javascript bei einem Klick auf ein Bild das Bild durch
ein anderes austauschen? Bei einem weiteren Klick soll dann wieder das erste
Bild erscheinen usw.!

Kenn ihr eine Möglichkeit, das zu realisieren? Leider kenn ich mich mit
JavaScript nicht so gut aus, bei google hab ich auch nichts gefunden...

viele Grüße + danke
Sebastian

Sebastian Zinser wrote:

wie kann ich mittels Javascript bei einem Klick auf ein Bild das Bild
durch ein anderes austauschen? Bei einem weiteren Klick soll dann
wieder das erste Bild erscheinen usw.!

<img src="bild1.gif" alt="foo bar"
onclick="src=/bild1\.gif/.test(src)?'bild2.gif':'bild1.gif'">

ciao, dhgm

Sebastian Zinser wrote:

wie kann ich mittels Javascript bei einem Klick auf ein Bild das Bild durch
ein anderes austauschen?

<img src="whatever.gif"
onclick="this.src = 'whatelse.gif';"

Bei einem weiteren Klick soll dann wieder das erste
Bild erscheinen usw.!

<img src="whatever.gif"
onclick="if (this.src.indexOf('whatever.gif') != -1) {
this.src = 'whatelse.gif';
}
else {
this.src = 'whatever.gif';
}"

--

Martin Honnen
http://JavaScript.FAQTs.com/

Hallo

ich hätte da auch noch ein kleines weiteres Problem beim Bild tauschen denn
ich mach das mit einer Function

function bildwechsel(Bildname){
if(document.getElementById(Bildname).src.indexOf(' maximize.gif') == -1)
{
document.getElementById(Bildname).src = "maximize.gif"
}
else
{
document.getElementById(Bildname).src = "minimize.gif"
}
}
-----------
<img src='maximize.gif' border='0' name='Bildname' id='Bildname'
onClick=\"bildwechsel(this.name);\">

Jetzt ist es aber so dass ich mir Dynamisch per PHP Tabellen ausgeben lasse
z.B 5 St Tabellen in jeder Tabelle erscheint dann dass Bild nur der wechsel
findet immer nur beim ersten Bild statt.

Wie kann ich das machen damit mir egal in welcher tabelle ich das Bild
anklicke nur das auch gewechselt wird das zur Tabelle gehört?


Vielen Dank schonmal für eure Hilfe

MfG
Brandmeir Gerhard

Vielen Dank für die schnelle Antwort, hat bestens beklappt!!



"Martin Honnen" <mahotrash (AT) yahoo (DOT) de> schrieb im Newsbeitrag
news:429dac88$0$13466$9b4e6d93 (AT) newsread2 (DOT) arcor-online.net...

Sebastian Zinser wrote:


wie kann ich mittels Javascript bei einem Klick auf ein Bild das Bild
durch
ein anderes austauschen?

img src="whatever.gif"
onclick="this.src = 'whatelse.gif';"

Bei einem weiteren Klick soll dann wieder das erste
Bild erscheinen usw.!

img src="whatever.gif"
onclick="if (this.src.indexOf('whatever.gif') != -1) {
this.src = 'whatelse.gif';
}
else {
this.src = 'whatever.gif';
}"

--

Martin Honnen
http://JavaScript.FAQTs.com/

Brandmeir Gerhard wrote:

function bildwechsel(Bildname){
if(document.getElementById(Bildname).src.indexOf(' maximize.gif') == -1)
{
document.getElementById(Bildname).src = "maximize.gif"
}
else
{
document.getElementById(Bildname).src = "minimize.gif"
}
}
-----------
img src='maximize.gif' border='0' name='Bildname' id='Bildname'
onClick=\"bildwechsel(this.name);\"

onClick='bildwechsel(this)'

function bildwechsel(elm) {
elm.src = elm.src.indexOf("maximize.gif") == -1 ? "maximize.gif" :
"minimize.gif";
}

Jetzt ist es aber so dass ich mir Dynamisch per PHP Tabellen ausgeben lasse
z.B 5 St Tabellen in jeder Tabelle erscheint dann dass Bild nur der wechsel
findet immer nur beim ersten Bild statt.

Wie kann ich das machen damit mir egal in welcher tabelle ich das Bild
anklicke nur das auch gewechselt wird das zur Tabelle gehört?

Vermutlich vergibst Du keinen eindeutigen Name/ID. Wobei Du aufpassen
musst: Die Funktion rufst Du mit this.name als Parameter auf. In der
Funktion verwendest Du aber getElementById was nach einer ID sucht. Das
sollte so nicht sein.

Grüße
Daniel

Hallo Daniel danke für deine Antwort

habe schon eine Lösung gefunden die so aussieht:

<img src='modules/squadblack/bilder/maximize.gif' border='0'
name='b$row[id]' id='b$row[id]' onClick=\"menu('m$row[id]', 0,
this.name);return false;\">

<script>
var mstat = new Array();

function menu(mid, mdepht, Bildname) {
if(window.document.getElementById(mid).style.displ ay == 'none')
{
window.document.getElementById(mid).style.display = 'none';
mstat[mdepht] = '';
}else{
window.document.getElementById(mid).style.display = 'block';
mstat[mdepht] = mid;
}

if (mstat[mdepht] != mid)
{
window.document.getElementById(mid).style.display = 'block';
window.document.getElementById(mid).style.paddingL eft = mdepht * 10;
mstat[mdepht] = mid;
document.getElementById(Bildname).src =
'modules/squadblack/bilder/minimize.gif';
} else {
window.document.getElementById(mid).style.display = 'none';
mstat[mdepht] = '';
document.getElementById(Bildname).src =
'modules/squadblack/bilder/maximize.gif';
}
}
</script>


das klappt jetzt wunderbar alles jede Dynamisch erzeugte Tabelle wird jetzt
mit dem jeweiligen dazugehörigem Bild aus und eingeblendet.
Jetzt möchte ich aber gerne einen (Knopf oder Bild egal ) haben wenn ich auf
den klicke dass alle erzeugten Tabellen und Bilder auf einmal aus und
eingeblendet werden.

Wie kann ich das machen ?

Vielen Dank schon mal für eure Tips

Gruss
Gerhard

Brandmeir Gerhard wrote:

habe schon eine Lösung gefunden die so aussieht:

Die würde ich dringend überarbeiten. Schau Dir mein Beispiel nochmal
genau an, dann kannst Du Deine Lösung entsprechend kürzen. Das ist nicht
nur wesentlich effizienter sondern auch lesbarer, einfacher in der
Wartung und deutlich weniger Code der übertragen werden muss.

das klappt jetzt wunderbar alles jede Dynamisch erzeugte Tabelle wird jetzt
mit dem jeweiligen dazugehörigem Bild aus und eingeblendet.
Jetzt möchte ich aber gerne einen (Knopf oder Bild egal ) haben wenn ich auf
den klicke dass alle erzeugten Tabellen und Bilder auf einmal aus und
eingeblendet werden.

Dafür müsstest Du die Row-Elemente kennen die versteckt werden sollen.

Angenommen die IDs der zu versteckenden row-Elemente beginnen alle mit
"m$row":

function setAllVisible (vis) {
var allRows = document.getElementsByTagName("tr");
for (var i=0; i<allRows.length; i++) {
if (allRows[i].id && allRows[i].id.indexOf("m$row") == 0) {
allRows[i].style.display = vis ? "table-row" : "none";
}
}
}

Grüße
Daniel