PDA

View Full Version : Gallery Mouse Over Issues



techgrowth
01-23-2008, 02:26 PM
I realize I am new to this forum, I searched your entie site for more than an hour prior to making this post. Hope I can find some resolution here.

This gallery is located here: http://ems-usa.com/new/zscanner_700.shtml

Problem: The primary image is getting displayed when the mouse moves between the images. Triggering the mouseout event before firing the mouseover event of the next image making it show the original image between the two.

Desired Effect: The primary image should only appear when the mouse moves outside the thumbnail gallery, not when it moves between the images.

Things I tried...

- Tried removing the mouseout event, of course this means the original image will never reappear

- Tried placing the event to replace the original image in DIV tag but this ends up having the same effect.

- Tried removing the link tags and putting all the mouse events in the DIV tags but this did not work ether.





<script language="JavaScript1.2" type="text/javascript">
<!--
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

//-->
</script>



<!--Right Panel Starts here-->
<div class="right_panel">
<!--Block 1 Starts here-->
<div class="right_block">
<div class="thumb_block mar_r7"><a href="javascript:;" onmouseout="MM_swapImgRestore();" onmouseover="MM_swapImage('ZS700_box1','','images/ZS700_box1_f2.jpg','ZS700_image_swap','','images/ZS700_image_swap_f3.jpg',1);"><img name="ZS700_box1" src="images/ZS700_box1.jpg" width="65" height="65" border="0" id="ZS700_box1" alt="IMG" /></a></div>
<div class="thumb_block mar_r7"><a href="javascript:;" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('ZS700_image_swap','','images/ZS700_image_swap_f4.jpg','ZS700_box2','','images/ZS700_box2_f2.jpg',1)"><img name="ZS700_box2" src="images/ZS700_box2.jpg" width="65" height="65" border="0" id="ZS700_box2" alt="IMG" /></a></div>
<div class="thumb_block"><a href="javascript:;" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('ZS700_image_swap','','images/ZS700_image_swap_f5.jpg','ZS700_box3','','images/ZS700_box3_f2.jpg',1)"><img name="ZS700_box3" src="images/ZS700_box3.jpg" width="65" height="65" border="0" id="ZS700_box3" alt="IMG" /></a></div>
<div class="thumb_block mar_r7"><a href="javascript:;" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('ZS700_image_swap','','images/ZS700_image_swap_f6.jpg','ZS700_box4','','images/ZS700_box4_f2.jpg',1)"><img name="ZS700_box4" src="images/ZS700_box4.jpg" width="65" height="65" border="0" id="ZS700_box4" alt="IMG" /></a></div>
<div class="thumb_block mar_r7"><a href="javascript:;" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('ZS700_image_swap','','images/ZS700_image_swap_f7.jpg','ZS700_box5','','images/ZS700_box5_f2.jpg',1)"><img name="ZS700_box5" src="images/ZS700_box5.jpg" width="65" height="65" border="0" id="ZS700_box5" alt="IMG" /></a></div>
<div class="thumb_block"><a href="javascript:;" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('ZS700_image_swap','','images/ZS700_image_swap_f8.jpg','ZS700_box6','','images/ZS700_box6_f2.jpg',1)"><img name="ZS700_box6" src="images/ZS700_box6.jpg" width="65" height="65" border="0" id="ZS700_box6" alt="img" /></a></div>
</div>
<!--Block 1 Ends here-->
<!--Block 2 Starts here-->
<div class="right_block mar_t15">
<div class="right_block_top"></div>
<div class="right_block_mid">
<div class="right_block_content">
<ul class="simple_listing" >
<li>ZScanner 700 Demonstration <br />
Video</li>
<li>ZScanner 700 Product <br />
Brochure</li>


<li>Applications</li>

<li>Project Gallery</li>

<li>Scanning Software</li>

<li>Request more information</li>

</ul>

</div>
</div>

jscheuer1
01-23-2008, 04:22 PM
<!--Block 1 Starts here-->
<div class="right_block" onmousemove="clearTimeout(MM_swapImgRestore.t);" onmouseout="MM_swapImgRestore.t=setTimeout('MM_swapImgRestore()', 100);">
<div class="thumb_block mar_r7"><a href="javascript:;" onmouseover="MM_swapImage('ZS700_box1','','images/ZS700_box1_f2.jpg','ZS700_image_swap','','images/ZS700_image_swap_f3.jpg',1);"><img name="ZS700_box1" src="images/ZS700_box1.jpg" width="65" height="65" border="0" id="ZS700_box1" alt="IMG" /></a></div>
<div class="thumb_block mar_r7"><a href="javascript:;" onmouseover="MM_swapImage('ZS700_image_swap','','images/ZS700_image_swap_f4.jpg','ZS700_box2','','images/ZS700_box2_f2.jpg',1)"><img name="ZS700_box2" src="images/ZS700_box2.jpg" width="65" height="65" border="0" id="ZS700_box2" alt="IMG" /></a></div>
<div class="thumb_block"><a href="javascript:;" onmouseover="MM_swapImage('ZS700_image_swap','','images/ZS700_image_swap_f5.jpg','ZS700_box3','','images/ZS700_box3_f2.jpg',1)"><img name="ZS700_box3" src="images/ZS700_box3.jpg" width="65" height="65" border="0" id="ZS700_box3" alt="IMG" /></a></div>
<div class="thumb_block mar_r7"><a href="javascript:;" onmouseover="MM_swapImage('ZS700_image_swap','','images/ZS700_image_swap_f6.jpg','ZS700_box4','','images/ZS700_box4_f2.jpg',1)"><img name="ZS700_box4" src="images/ZS700_box4.jpg" width="65" height="65" border="0" id="ZS700_box4" alt="IMG" /></a></div>
<div class="thumb_block mar_r7"><a href="javascript:;" onmouseover="MM_swapImage('ZS700_image_swap','','images/ZS700_image_swap_f7.jpg','ZS700_box5','','images/ZS700_box5_f2.jpg',1)"><img name="ZS700_box5" src="images/ZS700_box5.jpg" width="65" height="65" border="0" id="ZS700_box5" alt="IMG" /></a></div>
<div class="thumb_block"><a href="javascript:;" onmouseover="MM_swapImage('ZS700_image_swap','','images/ZS700_image_swap_f8.jpg','ZS700_box6','','images/ZS700_box6_f2.jpg',1)"><img name="ZS700_box6" src="images/ZS700_box6.jpg" width="65" height="65" border="0" id="ZS700_box6" alt="img" /></a></div>
</div>
<!--Block 1 Ends here-->

techgrowth
01-23-2008, 04:44 PM
A very nice clean solution. Thanks so much John.