Создание кнопок JS, которые переключают свое изображение при нажатии - PullRequest
Новая
       16

Создание кнопок JS, которые переключают свое изображение при нажатии

1 голос
/ 23 марта 2012

Я делаю что-то вроде этого -

http://www.w3schools.com/html5/tryit.asp?filename=tryhtml5_video_js_prop

но я хочу заменить кнопки изображениями, которые при нажатии переключаются на другое изображение. Другими словами, кнопка Play изменится на кнопку Pause.

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

Любая помощь приветствуется! 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
</head>

<body>


<script type="text/javascript">

function changeIt()
{
var theImg = document.getElementsByTagName('img')[0].src;

var x = theImg.split("/");
var t = x.length-1;
var y = x[t];

if(y=='btnPlay.gif')
{
document.images.PlayOrPause.src='btnPause.gif'
}
if(y=='btnPause.gif')
{
document.images.PlayOrPause.src='btnPlay.gif'
}



}

</script>

<a href="#" onclick="changeIt()"><img src='btnPause.gif' name='PlayOrPause' border='0' /></a>

Ответы [ 2 ]

2 голосов
/ 23 марта 2012

Попробуйте, используя тип ввода изображения

HTML 

<input type="image" src="play.png" class="play" onclick="toggle(this);"/>

CSS 

.play, .pause {width:100px;height:100px;}

1013 *

JS 

function toggle(el){
    if(el.className!="pause")
    {
        el.src='pause.png';
        el.className="pause";
    }
    else if(el.className=="pause")
    {
        el.src='play.png';
        el.className="play";
    }

    return false;
}  ​

Скрипка здесь .

0 голосов
/ 23 марта 2012 
swap : function(id) {
    var e = document.getElementById(id);
    e.className = (e.className == 'image1') 
        ? 'image2' 
        : 'image1';        
}

Вы можете просто создать функцию, которая проверяет текущий класс и переключает его. Это самый простой пример, в котором 2 класса имеют разные фоновые изображения. Остальная часть логики, которую вы могли бы обрабатывать, с помощью другой функции, которая управляет «состоянием» игры игрока, приостановлено и т. Д.

...