In this
post, I am going to show you a gallery application, where user selects a link
and based on the selection the image is displayed without refreshing the page.
<ul>
<li>
<a
href="rabbit.jpeg" onclick="changeImage(this); return
false;">Rabbit</a>
</li>
<li>
<a
href="lion.jpeg" onclick="changeImage(this); return
false;">Lion</a>
</li>
<li>
<a
href="tiger.jpg" onclick="changeImage(this); return
false;">Tiger</a>
</li>
<li>
<a
href="wolf.jpeg" onclick="changeImage(this); return
false;">Wolf</a>
</li>
</ul>
Whenever
user clicks on image, I am calling changeImage function by passing ‘this’ as
argument. ‘this’ keyword is used to refer current element.
changeImage(this); return false;
See above
statement, after calling changeImage(this); function, I am immediately returning
false, it stops the default behaviour of hyper link tag (By default it opens the
image in separate page).
<img
src="rabbit.jpeg" id="placeHolder"></img>
Above
statement is the place holder for the image.
Following
is the implementation of changeImage function.
function
changeImage(element){
var imgValue =
element.getAttribute("href");
var placeHolder =
document.getElementbyId("placeHolder");
placeHolder.setAttribute("src",
imgValue);
}
Following
is the complete working application.
image.html
<!DOCTYPE html> <html> <head> <title>Image Gallery</title> <style type="text/css"> .left { float: left; width: 40%; font-size: 2em; } .right { float: left; margin-left: 2em; } </style> </head> <body> <h1>Click on any hyper link</h1> <div class="left"> <ul> <li> <a href="rabbit.jpeg" onclick="changeImage(this); return false;">Rabbit</a> </li> <li> <a href="lion.jpeg" onclick="changeImage(this); return false;">Lion</a> </li> <li> <a href="tiger.jpg" onclick="changeImage(this); return false;">Tiger</a> </li> <li> <a href="wolf.jpeg" onclick="changeImage(this); return false;">Wolf</a> </li> </ul> </div> <div class="right"> <img src="rabbit.jpeg" id="placeHolder"></img> </div> <script> function changeImage(element) { var imgValue = element.getAttribute("href"); var placeHolder = document.getElementbyId("placeHolder"); placeHolder.setAttribute("src", imgValue); } </script> </body> </html>
No comments:
Post a Comment