Question

90

Making JS buttons that toggle their image on click

rated 0 times [ 91] [ 1] / answers: 1 / hits: 17247 / 12 Years ago, fri, march 23, 2012, 12:00:00

I am doing something like this-

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

but I want to replace the buttons with images that toggle to another image when clicked. In other words, the Play button will change to a Pause button.

There are many tutorials that show how to do this with only one button but as soon as I add more buttons, the new ones don't work.

Any help appreciated!

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

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

dahlias

Add To Favorites

Follow

Total Points: 730

Total Questions: 104

Total Answers: 101

Location: Denmark

Member since Tue, Jul 19, 2022

2 Years ago

dahlias questions

1 wire:click call two methods at once

Tue, Nov 17, 20, 00:00, 4 Years ago

1 Check if a piece of the element is in viewport

Tue, Oct 27, 20, 00:00, 4 Years ago

1 Jest, match to regex

Fri, Jul 17, 20, 00:00, 4 Years ago

1 define base URL globally in Axios plugin for Vue

Fri, Jan 17, 20, 00:00, 4 Years ago

1 JavaScript simple profanity filter

Wed, Jun 5, 19, 00:00, 5 Years ago

View All

answered 12 Years ago milor · Accepted Answer

Try this using input type image

HTML

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

CSS

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

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;

}

A fiddle is here.