Menu
Community /Pin to ProfileBookmark
@cootheadMar 04.2012 — #Hi there a6turbo,
and a warm welcome to these forums. ?
If you are going to put the onclick event handler in the HTML code, then use this...
...but if you prefer the modern method of separating presentation from markup use this...
[i]coothead[/i]
I need help with onClick image replacement!
Complete noob here. I’m simply making a page that displays image1. When the visitor clicks image1, the code needs to replace it with image2. I’ve searched hours on the web(including this forum) and haven’t been able to figure this out. Helps greatly appreciated!
Here’s my code:
[CODE]<html>
<head>
<script type=”text/javascript”>
function image()
{
document.getElementById(“changeimage”).innerHTML=”http://howimetyourotaku.files.wordpress.com/2011/05/ultimate-rage-face.jpg”;
}
</script>
</head>
<body id=”changeimage”>
<img src=”http://i3.kym-cdn.com/entries/icons/original/000/004/077/Raisins_Face.jpg” onClick=”image();”>
</body>
</html>
Sign in
to post a comment3 Comments(s) ↴
0
@cootheadMar 04.2012 — #Hi there a6turbo,and a warm welcome to these forums. ?
If you are going to put the onclick event handler in the HTML code, then use this...
[color=navy]<img src="http://i3.kym-cdn.com/entries/icons/original/000/004/077/Raisins_Face.jpg"
onclick="this.src='http://howimetyourotaku.files.wordpress.com/2011/05/ultimate-rage-face.jpg'">
[/color]...but if you prefer the modern method of separating presentation from markup use this...
[color=navy]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="language" content="english">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title></title>
<script type="text/javascript">
function init(){
document.getElementById('changeimage').onclick=function() {
this.src='http://howimetyourotaku.files.wordpress.com/2011/05/ultimate-rage-face.jpg';
}
}
window.addEventListener?
window.addEventListener('load',init,false):
window.attachEvent('onload',init);
</script>
</head>
<body>
<div>
<img id="changeimage" src="http://i3.kym-cdn.com/entries/icons/original/000/004/077/Raisins_Face.jpg" alt="">
</div>
</body>
</html>
[/color][i]coothead[/i]