Wie man Bild beim Klicken auf Bild tauscht?

Hier verwende ich zwei Bilder. Wenn ich einmal auf das Bild "Sort_down.png" klicke, wird es in "Sort_up.png" geändert. Wenn ich erneut auf dieses Bild klicke, wird nicht wieder zu Sort_down.png gewechselt, wie kann ich das erreichen?Wie man Bild beim Klicken auf Bild tauscht?

<script type="text/javascript"> 
function clkimg() { 
     var img = document.getElementById('stCodeDSC'); 
       img.src = '../Images/sort_up.png'; 

     } 
    </script> 


    <td width="11%" bgcolor="#C5DEFF" class="menu_header"> 
    <div align="center" onclick="clkimg();" > 
    <img name="stCodeDSC" class="img" src="../Images/Sort_down.png" id="stCodeDSC"> 
    </div> 
</td>

Quelle

2012-04-11 SHAURAJ SINGH

Sie ändern die Bildquelle nicht von sort_up zu source_down beim zweiten Klick. –

ya ich dnt hv ny Idee ,, cn u plz tll .. –

das sieht aus wie ein Duplikat von http://stackoverflow.com/questions/10090562/how-to-swap-image-on-click – Timmerz

Sie sagen es nicht zu sortieren. In Ihrem Klickcode müssen Sie prüfen, ob das Bild angezeigt wird, und es entsprechend ändern. Etwas wie:

if(img.src === '../Images/sort_up.png') 
    img.src = '../Images/sort_down.png'; 
else 
    img.src = '../Images/sort_up.png';

Im Allgemeinen jedoch diese besser gehandhabt durch das Hinzufügen oder Entfernen einer Klasse auf Klick werden würde, und das Styling der Klasse mit CSS.

Quelle

2012-04-11 05:54:21

seine Änderung nur einmal ... es ändert sich wieder –

@SHAURAJSINGH: es sollte funktionieren. Überprüfen Sie, ob Ihre Bilder auf dem Pfad vorhanden sind. Demo: http://jsfiddle.net/xc8Pe/ – codef0rmer

es funktioniert nur einmal.Ein Bild nach oben zu ändern, aber wieder von oben nach unten. –

Je nachdem, welchen Browser Sie verwenden, wird die Quelle eines Bilds auf eine relative URL festgelegt. Wenn Sie die Quelle zurückgeben, erhalten Sie die absolute URL. Wenn Sie einen Knebel verwenden möchten, können Sie für eine Zeichenfolge in der Quelle überprüfen, zum Beispiel:

function clkimg() { 
    var img = document.getElementById('stCodeDSC'), 
     nextImg = img.src.indexOf('up.png')>0 ? 'down':'up'; 
    img.src = '../Images/sort_' + nextImg + '.png'; 
}

Wenn die Sort_up und SORT_DOWN Bilder sind eigentlich nur Symbole der nach oben oder unten Zustand der aktuellen Art identifiziert, Sie kann die beiden Bilder zu einem zusammenfassen und sie als Sprite verwenden, das Sie mit CSS anzeigen. Weitere Informationen erhalten Sie unter https://stackoverflow.com/search?q=css+sprite

Quelle

2012-04-11 06:36:01 steveukx

Wie man Bild beim Klicken auf Bild tauscht?

Antwort

Verwandte Themen