Hi All,
I am newbie to this group as well as to jquery. I am running the
below code
---------------------------------------------------------------------------------------------------------------------------------------
<!--
To change this template, choose Tools | Templates
and open the template in the editor.
-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title> Page with Gadgets</title>
<meta http-equiv="Content-Type" content="text/html;
charset=UTF-8">
<script type="text/javascript" language="javascript"
src="jquery-1.2.6.min.js"> </script>
<script type="text/javascript">
$(document).ready(function(){
//Hide all the images
$("img:not(first)").hide();
//Only on click of Tirumala Arch show the figure
$("a#tpt").click(function()
{
$("img#firstimg").show();
});
//Only on click of Sahara Fort1 show the figure
$("a#sahara1").click(function()
{
$("img#secondimg").show();
});
//Only on click of Sahara Fort2 show the figure
$("a#sahara2").click(function()
{
$("img#thirdimg").show();
});
});
</script>
</head>
<body>
<table id="details" border="1" >
<thead>
<tr>
<th>Image Name</th>
<th>Image</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<a id="tpt" href="">Tirumala Arch</a>
</td>
<td>
<img id ="firstimg" src="./Images/
Tirumala_natural_stone_arch.jpg" width="500" height="375"
alt="Tirumala_natural_stone_arch"/>
</td>
</tr>
<tr>
<td>
<a id="sahara1" href="">Sahara Fort1</a>
</td>
<td>
<img id ="secondimg" src="./Images/300px-
Rainbow_Bridge.jpg" width="500" height="375"
alt="Tirumala_natural_stone_arch"/>
</td>
</tr>
<tr>
<td>
<a id="sahara2" href="">Sahara Fort2</a>
</td>
<td>
<img id ="thirdimg" src="./Images/
514032779_06.jpg" width="500" height="375"
alt="Tirumala_natural_stone_arch"/>
</td>
</tr>
</tbody>
</table>
</body>
</html>
---------------------------------------------------------------------------------------------------------------------------------------
My objective is to hide all the images except the first one in the
table and show them only if i click on the link associated with the
image. But what is happening is all the images are getting hidden,
which i donot want.
Also when i click on the link the image will be displayed for a split
of a second but disappears because the page is getting loaded and
hence the ready event is getting called again. Please let me know if
there is anything wrong with the code.
Thanks,
--Mayur
