✔ Bilder tauschen per Click-Event

[lambda]

Hallo Zusammen,
mein Problem hört sich erstmal trivial an, aber bringt mich langsam zur Verzweiflung.

Ich habe eine Liste mit kleinen Thumb-Bildern, klickt man auf eines soll rechts daneben das Bild in groß angezeigt werden.

Im wesentlichen habe ich 1x das kleine Bild:

<a href="javascript:;" id="bam" onmouseup="swap_i('img_test', './imgs/1/thumb_m_xy.jpg' ">
<img id='thumb_img' alt='' src="./imgs/1/thumb_s_xy.jpg" style="border:inherit"/>
</a>

und das Vorschau-Bild:

<img id="img_test" alt="" src="./imgs/1/default.jpg" style="border:0; z-index: 107; left: 618px; position: absolute; top: 69px;"/>

sowie die JS-Funktion zum tauschen:

function swap_i(name, to) {            
     document.images[name].src = to;            
}

Soweit so gut. Das klappt lokal auch super, lade ich es aber auf den Server geht es auch, aber nur per Doppelklick. Klicke ich nur einmal verschwindet das große Bild, bzw. wird manchmal nur halb angezeigt.

Interessant ist auch, dass wenn ich eine Msg-Box hinzufüge, es einwandrei klappt.

function swap_i(name, to) {            
     document.images[name].src = to;         
     Alert('hello, hello');
}

Hoffe ihr könnt mir irgendeinen Tipp geben, aufjedenfall schonmal vielen Dank vorab!

 

[Maik]

Probier's doch mal mit dem Event-Handler onclick.

 

[lambda]

Moinsen,
nein, oncklick hat den selben Effekt!

UPDATE: Mit mouseover geht's einwandfrei!

 

[Maik]

Nächster Versuch: ersetze für das Vorschaubild das Attribut id='img_test' durch name='img_test' und notiere den Link mal (testweise) so:

<a href="#" id="bam" onmouseup="swap_i('img_test', './imgs/1/thumb_m_xy.jpg' ">
<img id='thumb_img' alt='' src="./imgs/1/thumb_s_xy.jpg" style="border:inherit"/>
</a>

 

[lambda]

Sehr geil, so geht's! Super vielen Dank! *bier ausgeb*