E.g html:
<DIV>Here is some text..</DIV>
<DIV><IMG src="image1.png">one</DIV>
When user clicks on the image (image1.png) I want to change the image to image2.png?
How can I do this with plain javascript?
Thanks
-
2Can you post the javascript code that you've already tried? Did you try searching Google? This is a very simple problem.MattDiamant– MattDiamant2013-12-17 18:24:18 +00:00Commented Dec 17, 2013 at 18:24
-
2I thought for sure I'd easily find a duplicate, but I gave up.isherwood– isherwood2013-12-17 18:29:04 +00:00Commented Dec 17, 2013 at 18:29
-
@Matt: I did not spend time on google. I spent some time on SO and somehow was running into much more complex scenarios. I did try google afterwards and found relevant hits. Thanks to all for the answers.RaelB– RaelB2013-12-17 23:19:54 +00:00Commented Dec 17, 2013 at 23:19
Add a comment
|
4 Answers
Just use
<IMG src="image1.png" onclick='this.src="image2.png"'>
Pure JS
document.getElementById('img').onclick=function() {
this.src='image2.png';
};
2 Comments
MattDiamant
While this works, could we not use inline javascript?
Satpal
@MattDiamant, Certainly, but I'm too lazy & tired, even copied portion of comment
<img ... onclick="this.src = 'image2.png'" />
In response to your comment, I don't have a pure JS click handler for you, but with jQuery it would look like this:
$('img').click(function() {
$(this).attr('src', 'image2.png');
});
2 Comments
MattDiamant
While this works, could we not use inline javascript?
isherwood
Certainly, but I'm too lazy to Google event handlers for you. I use jQuery, which makes this type of thing MUCH easier to write from memory. :-)
<DIV>Here is some text..</DIV>
<DIV><IMG id="image1" src="image1.png">one</DIV>
<script type="text/javascript">
window.onload = (function(oldLoad) {
return function() {
oldLoad && oldLoad();
// wire up image event handler
document.getElementById("image1").onClick = function() {
this.src = "image2.png";
}
}
})(window.onload)
</script>
Edit - After my comment:
There are times where many people cannot utilize the power of jQuery. The OP wanted to know in his comment what the purpose of the oldLoad was and I wanted to provide a detailed answer.
Basically what I have written here is something "similar" to jQuery's $(document).ready(). and Here is how I would utilize this example.
<script type="text/javascript">
var Core = {
windowLoadEvent: function(oldLoad, newLoad) {
return function() {
//check if the window.onload already has a function attached if so then execute
oldLoad && oldLoad();
//check if the newload has a function attached if so then execute
newLoad && newLoad();
},
myNewLoadEvent: function() {
document.getElementById("image1").onClick = function() {
this.src = "image2.png";
}
//wireup whatever else is needed.
}
}
window.onload = Core.windowLoadEvent(window.onload, Core.myNewLoadEvent)
</script>
2 Comments
Satpal
that's beautiful
window.onload but what's purpose of oldLoad? Please help me to understand it
John Hartsock
@Satpal I actually messed up...the parameter passed to the onload function should be oldLoad. Now the purpose of this is to mimic something similar to the $(document).ready() function in jQuery. Basically you can bind your events from Javascript instead of handling your event binding using inline html (ie <div onclick="javascript:...">). The code writen above is a simple closure statement that can assist you. I will edit the answer to show you an somewhat advanced way to utilize this.
You may also try this (Example)
HTML:
<div id="images">
<div><IMG src="image1_url" />one</div>
</div>
JS:
var images = document.getElementById('images');
images.onclick = function(e){
var event = e || window.event;
var target = event.target || event.srcElement;
target.src="image2_url";
};
