Zmień obraz w przycisku na kliknij

Mam przycisk z obrazem wewnątrz, który chcę zamienić po kliknięciu. Ta część działa, ale teraz chcę, aby po ponownym kliknięciu powróciła do oryginalnego obrazu.Zmień obraz w przycisku na kliknij

Kod używam:

<button onClick="action();">click me<img src="images/image1.png" width="16px" id="ImageButton1"></button>

I JavaScript:

function action() { 
    swapImage('images/image2.png'); 
}; 

var swapImage = function(src) { 
    document.getElementById("ImageButton1").src = src; 
}

Z góry dzięki!

Źródło

2013-05-19 JamesM

http://stackoverflow.com/questions/10465082/change-button-image-after-click-to-loading-and-then-with-another-image-after-1?rq=1 –

Zapomniałeś zadać pytanie. – nnnnnn

Podczas gdy może użyć zmiennej globalnej, nie trzeba. Kiedy używasz setAttribute/getAttribute, dodajesz coś, co pojawia się jako atrybut w kodzie HTML. Musisz także mieć świadomość, że dodanie globusa po prostu dodaje zmienną do okna lub nawigatora lub obiektu dokumentu (nie pamiętam).

Można również dodać go do samego obiektu (tj. Jako zmienną, która nie jest widoczna, jeśli html jest wyświetlany, ale jest widoczna, jeśli element html jest wyświetlany jako obiekt w debugerze i przeglądany jest jego właściwości.)

Oto dwie alternatywy. 1 przechowuje alternatywny obraz w sposób, który spowoduje, że będzie widoczny w html, a drugi nie.

<!DOCTYPE html> 
<html> 
<head> 
<script> 
function byId(e){return document.getElementById(e);} 

window.addEventListener('load', mInit, false); 

function mInit() 
{ 
    var tgt = byId('ImageButton1'); 
    tgt.secondSource = 'images/image2.png'; 
} 

function byId(e){return document.getElementById(e);} 

function action() 
{ 
    var tgt = byId('ImageButton1'); 
    var tmp = tgt.src; 
    tgt.src = tgt.secondSource; 
    tgt.secondSource = tmp; 
}; 

function action2() 
{ 
    var tgt = byId('imgBtn1'); 
    var tmp = tgt.src; 
    tgt.src = tgt.getAttribute('src2'); 
    tgt.setAttribute('src2', tmp); 
} 
</script> 
<style> 
</style> 
</head> 
<body> 
    <button onClick="action();">click me<img src="images/image1.png" width="16px" id="ImageButton1"></button> 
    <br> 
    <button onClick="action2();">click me<img id='imgBtn1' src="images/image1.png" src2='images/image2.png' width="16px"></button> 
    </body> 
</html>

Źródło

2013-05-19 10:22:19 enhzflep

To działało idealnie, dziękuję! – JamesM

Musisz zachować starą wartość w zmiennej globalnej.

Na przykład:

var globalVarPreviousImgSrc; 
var swapImage = function(src) 
{ 
    var imgBut = document.getElementById("ImageButton1"); 

    globalVarPreviousImgSrc = imgBut.src; 
    imgBut.src = src; 
}

Następnie w sposobie działania można sprawdzić, czy to była równa starej wartości

function action() 
{ 
    if(globalVarPreviousImgSrc != 'images/image2.png') 
    { 
    swapImage('images/image2.png'); 
    }else{ 
    swapImage(globalVarPreviousImgSrc); 
    } 
}

Źródło

2013-05-19 09:28:30 DaveHogan

Kiedy używam tego, obraz zmienia się przy pierwszym kliknięciu, ale nie zmienia się z powrotem. – JamesM

sprawdzić ten przykład roboczych po prostu skopiować i pasty RUN-

HTML

<button onClick="action();">click me<img src="http://dummyimage.com/200x200/000000/fff.gif&text=Image+1" width="200px" id="ImageButton1"></button>

JAVASCRIPT

<script> 
function action() 
{ 
if(document.getElementById("ImageButton1").src == 'http://dummyimage.com/200x200/000000/fff.gif&text=Image+1') 
document.getElementById("ImageButton1").src = 'http://dummyimage.com/200x200/dec4ce/fff.gif&text=Image+2'; 
else 
document.getElementById("ImageButton1").src = 'http://dummyimage.com/200x200/000000/fff.gif&text=Image+1'; 
} 
</script>

Sprawdź to pracy przykład - http://jsfiddle.net/QVRUG/4/

Źródło

2013-05-19 09:32:50 swapnesh

Nie mogę tego zrobić. Umieściłem to w jsfiddle, to też tam nie działa. http: // jsfiddle.net/LqTGJ/ – JamesM

@JamesM proszę zaktualizować skrzypce i daj mi znać, jeśli masz jakieś problemy. – swapnesh

Obraz również nie zmienia się w tym myślę. – JamesM

to nie jest dobry pomysł, aby używać zmiennych globalnych w JavaSkrypty użyć zamknięcie lub obiektu dosłowne. Można zrobić coś takiego za pomocą zamknięcia

(function(){ 
    var clickCounter = 0; 
    var imgSrc1 = "src to first image"; 
    var imgSrc2 = "src to second image" 
    functions swapImage (src) 
    { 
    var imgBut = document.getElementById("ImageButton1"); 
    imgBut.src = src; 
    } 

    function action() 
    { 
    if(clickCounter === 1) 
    { 
    swapImage(imgSrc1); 
    --clickCounter; 
    }else{ 
    swapImage(imgSrc2); 
    ++clickCounter; 
    } 
} 
})();

(nie mam uruchomić ten kod chociaż)

Ten miły w3documentation daje najlepsze praktyki.

Źródło

2013-05-19 09:44:55

Zmień obraz w przycisku na kliknij

Odpowiedz

Powiązane problemy