Friday, February 22, 2013

jQuery image change demo



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