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?
Re: change a butto at clicking on it
Using just HTML5 you can do this:
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.
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>
Memory in C++ is a leaky abstraction .
Re: change a butto at clicking on it
Thanks. This is a great helpHeater wrote:Using just HTML5 you can do this: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.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>