The main DIV contains several child DIV tags and on each child DIV click relevant image will be displayed on another DIV.
HTML:
<div id="mainDiv" style="overflow: auto; width: 300px; height: 100px">
<div id="Tile1" style="background-color: #99FF99"><img src="../Tiles/Tile1.jpg" width="20px" height="20px"/> Tile1</div>
<div id="Tile2" style="background-color: #CCFF99"><img src="../Tiles/Tile2.jpg" width="20px" height="20px"/> Tile2</div>
<div id="Tile3" style="background-color: #99FF99"><img src="../Tiles/Tile3.jpg" width="20px" height="20px"/> Tile3</div>
<div id="Tile4" style="background-color: #CCFF99"><img src="../Tiles/Tile4.jpg" width="20px" height="20px"/> Tile4</div>
</div>
<img id="scream" src="Default.jpg" alt="The Scream" width="220" height="277"/></td>
Jquery Script:
<script language="javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#mainDiv').css('cursor', 'pointer');
$("#mainDiv").children().click(function (n, i) {
var id = this.id;
var newSrc = "../Tiles/" + id + ".jpg";
$("#scream").attr('src', newSrc);
});
});
</script>
Thursday, March 14, 2013
Div Tag list in Jquery
Subscribe to:
Post Comments (Atom)
No comments:
Write comments