Thursday, March 14, 2013

Div Tag list in Jquery




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>

No comments:
Write comments
Recommended Posts × +