I have this code below which I reduced to this for posting. Essentially, I have a bunch of screen shots which I display in reduced size as a <div> block "menu" with the idea that when the user clicks on a image, it is fully displayed in a <DIV id="divImage"> block below the "image menu."
What is odd is when I have the <DIV id="divImage"> above the "menu", I've able to click on the images and it will show. However, if I move the <DIV id="divImage"> below the menu, then the first click works, but subsequents clicks no longer take. Why? Here is the code: <!-- File: screenshots.htm--> <html> <head> <title>Screen Shots</title> <script type='text/javascript' src='/public/js/jquery.pack.js'></ script> <script type='text/javascript'> $(document).ready(function() { $(".divLogo img").click(function() { var $img = $("#divImage img"); $("#divImage").hide(); $img[0].src = this.src; $("#divImage").show(); }); }); </script> <style> .divLogo { background-repeat: no-repeat; width: 20%; float: left; } #divImage { display:none; position: relative; z-index: 100; border: 2px solid black; } </style> </head> <body> <H4>Screen Shots</h4> <div id="divLogoWin"> <div class="divLogo"><img src="ex1.png" border="0" width="100%"></div> <div class="divLogo"><img src="ex2.png" border="0" width="100%"></div> <div class="divLogo"><img src="ex3.png" border="0" width="100%"></div> </div> <hr> <div id="divImage"><img src="" border="0" width="100%"/></div> <hr> </body> </html>