Изменить изображение в кнопке при нажатии

У меня есть кнопка с изображением внутри, которую я хочу поменять при нажатии. Я получил эту часть работы, но теперь я также хочу, чтобы она снова возвращалась к исходному изображению при повторном нажатии.Изменить изображение в кнопке при нажатии

код я использую:

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

И Javascript:

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

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

Заранее спасибо!

источник

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 –

Вы забыли задать вопрос. – nnnnnn

Пока вы можете использовать, используйте глобальную переменную, вам не нужно. Когда вы используете setAttribute/getAttribute, вы добавляете что-то, что появляется в качестве атрибута в HTML. Вы также должны знать, что добавление глобальной просто добавляет переменную в окно или навигатор или объект документа (я не помню, какой из них).

Вы также можете добавить его к самому объекту (то есть в качестве переменной, которая не видна, если html просматривается, но отображается, если вы просматриваете элемент html как объект в отладчике и смотрите на его свойства.)

Вот две альтернативы. 1 сохраняет альтернативное изображение таким образом, чтобы он был видимым в html, а другой - нет.

<!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>

источник

2013-05-19 10:22:19 enhzflep

Это сработало отлично, спасибо! – JamesM

Вам необходимо сохранить старое значение в глобальной переменной.

Например:

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

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

Затем в методе действий вы можете проверить, если он был равен старому значению

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

источник

2013-05-19 09:28:30 DaveHogan

Когда я использую это, изображение меняет первый раз, когда я нажимаю, но не меняю назад. – JamesM

Проверить это рабочий пример просто скопировать пасты и 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>

Проверить это работает пример - http://jsfiddle.net/QVRUG/4/

источник

2013-05-19 09:32:50 swapnesh

Я не могу заставить его работать. Я поставил его в jsfiddle, он тоже не работает. Http: // jsfiddle.net/LqTGJ/ – JamesM

@JamesM, пожалуйста, chk обновленная скрипка, и дайте мне знать, если у вас есть какие-либо проблемы. – swapnesh

Изображение также не меняется в этом, я думаю. – JamesM

Это не очень хорошая идея, чтобы использовать глобальные переменные в JavaScripts использовать замыкание или литерала объекта. Вы можете сделать что-то подобное с помощью закрытия

(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; 
    } 
} 
})();

(я не запускаю этот код, хотя)

Это хороший w3documentation дает лучшие практики.

источник

2013-05-19 09:44:55

Изменить изображение в кнопке при нажатии

ответ

Смежные вопросы