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.


<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>

<img id="scream" src="Default.jpg" alt="The Scream" width="220" height="277"/></td>

Jquery Script:

<script language="javascript" src="//"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#mainDiv').css('cursor', 'pointer');
$("#mainDiv").children().click(function (n, i) {
var id =;
var newSrc = "../Tiles/" + id + ".jpg";
$("#scream").attr('src', newSrc);

No comments:
Write comments
Recommended Posts × +