Canedje
Posts: 265
Joined: Thu Mar 26, 2015 7:18 am

change a butto at clicking on it

Mon May 11, 2015 7:38 pm

I like to have a selfmade on or off buttonin jpg or png format and toggle between both buttons at clicking on them in a website (In HTML/PHP of JS what is needed to get it done).
Can anybody give some advice or example?

Heater
Posts: 17113
Joined: Tue Jul 17, 2012 3:02 pm

Re: change a butto at clicking on it

Tue May 12, 2015 1:26 am

Using just HTML5 you can do this:

Code: Select all

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Untitled Document</title>
<script>
function changeIt() {
    "use strict";
    var elem = document.getElementById('img1');
    console.log("Clicked;", elem);
    if (elem.getAttribute("src") === 'playbutton.png') {
        elem.setAttribute("src", "pausebutton.jpg");
    } else {
        elem.setAttribute("src", "playbutton.png");
    }
}
</script>
</head>
<body>
	<a href="#" onclick="changeIt()"><img id="img1" src='playbutton.png' border='0' /></a>
</body>
</html>
I suggest you have a google around for combinations of "html5", "element attributes", "click handlers", "document object model", "javascript", "image tag" etc etc. There is a lot to learn to understand this simple example. Get google to find you a tutorial or two.
Memory in C++ is a leaky abstraction .

Canedje
Posts: 265
Joined: Thu Mar 26, 2015 7:18 am

Re: change a butto at clicking on it

Tue May 12, 2015 6:38 am

Heater wrote:Using just HTML5 you can do this:

Code: Select all

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Untitled Document</title>
<script>
function changeIt() {
    "use strict";
    var elem = document.getElementById('img1');
    console.log("Clicked;", elem);
    if (elem.getAttribute("src") === 'playbutton.png') {
        elem.setAttribute("src", "pausebutton.jpg");
    } else {
        elem.setAttribute("src", "playbutton.png");
    }
}
</script>
</head>
<body>
	<a href="#" onclick="changeIt()"><img id="img1" src='playbutton.png' border='0' /></a>
</body>
</html>
I suggest you have a google around for combinations of "html5", "element attributes", "click handlers", "document object model", "javascript", "image tag" etc etc. There is a lot to learn to understand this simple example. Get google to find you a tutorial or two.
Thanks. This is a great help

Return to “Other programming languages”