In this demo, only images are changed when users click the 1, 2,3 link while other parts of the website keep unchanged. jUQery html, <img> attr method are used.
Code:
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<h1> jQuery image change demo</h1>
<div id="container">
<img src="http://www3.telus.net/public/jianlu58/belugas3D.jpg" />
</div>
<p id="menu">
<a href="http://www3.telus.net/public/jianlu58/belugas3D.jpg">1</a> |
<a href="http://www3.telus.net/public/jianlu58/brain.JPG">2</a>|
<a href="http://www3.telus.net/public/jianlu58/pumpkin.JPG">3</a>
</p>
<script>
$("#menu a").click(function(){
$("#container").html($("<img>").attr("src", this.href));;
return false;
});
</script>
</body>
</html>
Demo: click link 1, 2,3 to see images changed.
jQuery image change demo
No comments:
Post a Comment