Image Thumbnail Viewer II -- Photos not responding to "mouseover" in IE9
1) Script Title: Image Thumbnail Viewer II
2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...thumbnail2.htm
3) Describe problem: I used this script for years and loved it. Today I realized it is no longer working in Internet Explorer 9 (but it does work in the other browsers I tried). I went back to Dynamic Drive and saw the script was updated, so I started to implement the changes. With both the old script and the new script all the thumbnails display but mouseover does not work in IE9. Instead, I have to "click" on the thumbnails, which then takes me to a blank white page displaying the photo in the upper left. I thought I had installed the new code correctly, but since the example is working for me on the Dynamic Drive website in IE9, I clearly have something wrong on my website. (Either old or new script will work in Compatibility mode, but I want it to work without using Compatibility mode.) I do have thumbnailviewer2.js and the spinningred.gif uploaded to my server. I did remove the copyright message for the right-click code in case it was interferring, but that did not seem to make any difference, so I left it in here so that you could see what I am fully working with. I greatly appreciate any help to get mouseover to work in IE9! Here is my code for the entire page (and then I have more commentary at the end of the first set of coding):
Code:
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="thumbnailviewer2.js">
/***********************************************
* Image Thumbnail Viewer II script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* Visit http://www.dynamicDrive.com for hundreds of DHTML scripts
* This notice must stay intact for legal use
***********************************************/
</script>
</head>
<body bgcolor="#21231F">
<script language=JavaScript>
<!--
var message="Photos Copyright";
///////////////////////////////////
function clickIE4(){
if (event.button==2){
alert(message);
return false;
}
}
function clickNS4(e){
if (document.layers||document.getElementById&&!document.all){
if (e.which==2||e.which==3){
alert(message);
return false;
}
}
}
if (document.layers){
document.captureEvents(Event.MOUSEDOWN);
document.onmousedown=clickNS4;
}
else if (document.all&&!document.getElementById){
document.onmousedown=clickIE4;
}
document.oncontextmenu=new Function("alert(message);return false")
// -->
</script>
<table border="0" width="100%" cellspacing="0" cellpadding="0" height="966">
<tr>
<td width="15%" height="36"></td>
<td width="70%" height="36">
<p> </td>
<td width="15%" height="36"></td>
</tr>
<tr>
<td width="15%" height="871"></td>
<td width="70%" bgcolor="#000000" height="871">
<table border="0" width="100%" cellspacing="0" cellpadding="0">
<tr>
<td width="100%" colspan="3">
<table border="0" width="100%" cellspacing="0" cellpadding="0">
<tr>
<td width="17%">
<p align="center"></td>
<td width="83%"></td>
</tr>
</table>
</td>
</tr>
<tr>
<td width="19%">
<p align="center"></p>
</td>
<td width="81%" colspan="2">
<table border="0" width="100%" cellspacing="20" cellpadding="0">
<tr>
<td width="12%">
</td>
<td width="76%" align="center">
<div id="loadarea" style="width: 692; height: 461" align="center">
<p align="center">
<img border="0" src="images/11.jpg" width="692" height="461">
<br>
<font color="#FFFFFF"><font face="Arial" size="3">
<br>
Please select a photo.</font>
</div>
</font>
</td>
<td width="12%">
</td>
</tr>
<tr>
<td width="12%">
</td>
<td width="76%">
<p align="center">
<font color="#FFFFFF">
<a href="images/1.jpg" rel="enlargeimage::mouseover" rev="loadarea"><img border="0" src="images/1thumbnail.jpg" width="80" height="80"></a>
<a href="images/2.jpg" rel="enlargeimage::mouseover" rev="loadarea"><img border="0" src="images/2thumbnail.jpg" width="80" height="80"></a>
<a href="images/3.jpg" rel="enlargeimage::mouseover" rev="loadarea"><img border="0" src="images/3thumbnail.jpg" width="80" height="80"></a>
<a href="images/4.jpg" rel="enlargeimage::mouseover" rev="loadarea"><img border="0" src="images/4thumbnail.jpg" width="80" height="80"></a>
<a href="images/5.jpg" rel="enlargeimage::mouseover" rev="loadarea"><img border="0" src="images/5thumbnail.jpg" width="80" height="80"></a>
<a href="images/6.jpg" rel="enlargeimage::mouseover" rev="loadarea"><img border="0" src="images/6thumbnail.jpg" width="80" height="80"></a></font>
</p>
<p align="center">
<font color="#FFFFFF">
<a href="images/7.jpg" rel="enlargeimage::mouseover" rev="loadarea"><img border="0" src="images/7thumbnail.jpg" width="80" height="80"></a>
<a href="images/8.jpg" rel="enlargeimage::mouseover" rev="loadarea"><img border="0" src="images/8thumbnail.jpg" width="80" height="80"></a>
<a href="images/9.jpg" rel="enlargeimage::mouseover" rev="loadarea"><img border="0" src="images/9thumbnail.jpg" width="80" height="80"></a>
<a href="images/10.jpg" rel="enlargeimage::mouseover" rev="loadarea"><img border="0" src="images/10thumbnail.jpg" width="80" height="80"></a>
<a href="images/11.jpg" rel="enlargeimage::mouseover" rev="loadarea"><img border="0" src="images/11thumbnail.jpg" width="80" height="80"></a>
<a href="images/12.jpg" rel="enlargeimage::mouseover" rev="loadarea"><img border="0" src="images/12thumbnail.jpg" width="80" height="80"></a>
</font>
</p>
</td>
<td width="12%">
</td>
</tr>
<tr>
<td width="12%">
</td>
<td width="76%">
<p align="center"></p>
</td>
<td width="12%">
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td width="19%"></td>
<td width="47%"></td>
<td width="34%"></td>
</tr>
</table>
</td>
<td width="15%" height="871"></td>
</tr>
<tr>
<td width="15%" height="59"></td>
<td width="70%" height="59">
<p align="center"></td>
<td width="15%" height="59"></td>
</tr>
</table>
</body>
</html>
*****When I try to replace part of the code with this, which I think is the updated version, it does not work in IE9 or Mozilla Firefox, the only two I just tested:
<font color="#FFFFFF">
<a href="images/1.jpg" rel="enlargeimage" rev="targetdiv:loadarea,trigger:mouseover,preload:yes"><img border="0" src="images/1thumbnail.jpg" width="80" height="80"></a>
<a href="images/2.jpg" rel="enlargeimage" rev="targetdiv:loadarea,trigger:mouseover,preload:yes"><img border="0" src="images/2thumbnail.jpg" width="80" height="80"></a>
<a href="images/3.jpg" rel="enlargeimage" rev="targetdiv:loadarea,trigger:mouseover,preload:yes"><img border="0" src="images/3thumbnail.jpg" width="80" height="80"></a>
<a href="images/4.jpg" rel="enlargeimage" rev="targetdiv:loadarea,trigger:mouseover,preload:yes"><img border="0" src="images/4thumbnail.jpg" width="80" height="80"></a>
<a href="images/5.jpg" rel="enlargeimage" rev="targetdiv:loadarea,trigger:mouseover,preload:yes"><img border="0" src="images/5thumbnail.jpg" width="80" height="80"></a>
<a href="images/6.jpg" rel="enlargeimage" rev="targetdiv:loadarea,trigger:mouseover,preload:yes"><img border="0" src="images/6thumbnail.jpg" width="80" height="80"></a></font>
</p>
<p align="center">
<font color="#FFFFFF">
<a href="images/7.jpg" rel="enlargeimage" rev="targetdiv:loadarea,trigger:mouseover,preload:yes"><img border="0" src="images/7thumbnail.jpg" width="80" height="80"></a>
<a href="images/8.jpg" rel="enlargeimage" rev="targetdiv:loadarea,trigger:mouseover,preload:yes"><img border="0" src="images/8thumbnail.jpg" width="80" height="80"></a>
<a href="images/9.jpg" rel="enlargeimage" rev="targetdiv:loadarea,trigger:mouseover,preload:yes"><img border="0" src="images/9thumbnail.jpg" width="80" height="80"></a>
<a href="images/10.jpg" rel="enlargeimage" rev="targetdiv:loadarea,trigger:mouseover,preload:yes"><img border="0" src="images/10thumbnail.jpg" width="80" height="80"></a>
<a href="images/11.jpg" rel="enlargeimage" rev="targetdiv:loadarea,trigger:mouseover,preload:yes"><img border="0" src="images/11thumbnail.jpg" width="80" height="80"></a>
<a href="images/12.jpg" rel="enlargeimage" rev="targetdiv:loadarea,trigger:mouseover,preload:yes"><img border="0" src="images/12thumbnail.jpg" width="80" height="80"></a>
</font>
</p>
******What am I doing wrong when I am trying to implement the new coding style?
