PDA

View Full Version : Photo Gallery: first photo always shows when mouse hovers between 2 thumbnails


Kraut55
10-11-2008, 11:59 AM
http://www.wereofftobvi.com Gallery

Hi,
I am new here and also new to Dreamweaver. I have tried to build this gallery which unfortunately has an unwanted feature: when the mouse hovers between 2 thumbnails, the first photo is visible. There is no clean change from one picture to the other possible, as the first photo always shows for a split second.
What did I do wrong?
Thank you.
Kraut55

domedia
10-11-2008, 07:15 PM
If you don't want the image to change on mouseout, then just remove it.
Highlight a thumbnail and investigate the behviours panel

Kraut55
10-11-2008, 07:56 PM
If you don't want the image to change on mouseout, then just remove it.


I must confess that I don't understand that. If I removed the first picture it would not be able to be seen when I go to the No 1 Thumbnail.

Cary
10-11-2008, 08:03 PM
Basically, you need to remove the gaps between the thumbnail links, but still have the look of them being spaced apart. Padding on the images can be used to create the spacing without there being any space between the actual links.

Your page is missing the opening html and head tags as well as the closing head, body and html tags.

Here's one way you can do it. Read the comments in the html and the embedded styling in the head.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<script type="text/javascript">
<!--
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];}}
}

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];}
}
//-->
</script>
<style type="text/css">
#thumbs img {
border: none; /* removes the ugly border from around the thumbs */
padding: 5px 7px 5px 8px; /* 5px on top and bottom; 8px and 7px to the left and right; 8+7+125=140; 140*5=700 */
}
</style>
</head>
<body onLoad="MM_preloadImages('Images/home_over.jpg','Images/travel_info_over.jpg','Images/accomodations_over.jpg','Images/aboutVG_over.jpg','Images/contact_over.jpg','Images/gallery_over.jpg','Images/hotel_2.jpg','Images/hotel_3.jpg','Images/hotel_4.jpg','Images/hotel_5.jpg','Images/hotel_6.jpg','Images/hotel_7.jpg','Images/hotel_8.jpg','Images/hotel_9.jpg','Images/hotel_10.jpg')" onclick="Swap Image">
<table width="700" border="0" cellpadding="0" cellspacing="0">
<tr>
<td><img src="Images/banner_bvi.jpg" alt="Banner" width="700" height="90" id="Image2" /></td>
</tr>
<tr>
<td bgcolor="#97530A"><a href="index.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image3','','Images/home_over.jpg',1)"><img src="Images/home1.jpg" alt="Home" name="Image3" width="90" height="20" border="0" id="Image3" /></a><a href="travel.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image4','','Images/travel_info_over.jpg',1)"><img src="Images/travel_info1.jpg" alt="Travel Info" name="Image4" width="120" height="20" border="0" id="Image4" /></a><a href="accomodations.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image5','','Images/accomodations_over.jpg',1)"><img src="Images/accomodations1.jpg" alt="Accomodations" name="Image5" width="150" height="20" border="0" id="Image5" /></a><a href="aboutbvi.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image6','','Images/aboutVG_over.jpg',1)"><img src="Images/aboutVG1.jpg" alt="About BVI" name="Image6" width="170" height="20" border="0" id="Image6" /></a><a href="contact.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image7','','Images/contact_over.jpg',1)"><img src="Images/contact1.jpg" alt="Contact" name="Image7" width="100" height="20" border="0" id="Image7" /></a><a href="gallery.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image22','','Images/gallery_over.jpg',1)"><img src="Images/gallery1.jpg" alt="Gallery" name="Image22" width="70" height="20" border="0" id="Image22" /></a></td>
</tr>
</table>
<p><img src="Images/hotel_1.jpg" name="LargeImage" width="700" height="456" id="LargeImage"></p>
<!-- added thumbs ID to table, reduced cellspacing to 0, and removed the divs from the cells -->
<!-- No more gaps between links, but the CSS retains the appearance of spacing. -->
<table id="thumbs" width="700" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><a href="javascript:;"><img src="Images/hotel_1_resize.jpg" width="125" height="81"></a></td>
<td><a href="javascript:;" onMouseOver="MM_swapImage('LargeImage','','Images/hotel_2.jpg',1)" onMouseOut="MM_swapImgRestore()"><img src="Images/hotel_2_resize.jpg" width="125" height="81"></a></td>
<td><a href="javascript:;" onMouseOver="MM_swapImage('LargeImage','','Images/hotel_3.jpg',1)" onMouseOut="MM_swapImgRestore()"><img src="Images/hotel_3_resize.jpg" width="125" height="81"></a></td>
<td><a href="javascript:;" onMouseOver="MM_swapImage('LargeImage','','Images/hotel_4.jpg',1)" onMouseOut="MM_swapImgRestore()"><img src="Images/hotel_4_resize.jpg" width="125" height="81"></a></td>
<td><a href="javascript:;" onMouseOver="MM_swapImage('LargeImage','','Images/hotel_5.jpg',1)" onMouseOut="MM_swapImgRestore()"><img src="Images/hotel_5_resize.jpg" width="125" height="81"></a></td>
</tr>
<tr>
<td><a href="javascript:;" onMouseOver="MM_swapImage('LargeImage','','Images/hotel_6.jpg',1)" onMouseOut="MM_swapImgRestore()"><img src="Images/hotel_6_resize.jpg" width="125" height="81"></a></td>
<td><a href="javascript:;" onMouseOver="MM_swapImage('LargeImage','','Images/hotel_7.jpg',1)" onMouseOut="MM_swapImgRestore()"><img src="Images/hotel_7_resize.jpg" width="125" height="81"></a></td>
<td><a href="javascript:;" onMouseOver="MM_swapImage('LargeImage','','Images/hotel_8.jpg',1)" onMouseOut="MM_swapImgRestore()"><img src="Images/hotel_8_resize.jpg" width="125" height="81"></a></td>
<td><a href="javascript:;" onMouseOver="MM_swapImage('LargeImage','','Images/hotel_9.jpg',1)" onMouseOut="MM_swapImgRestore()"><img src="Images/hotel_9_resize.jpg" width="125" height="81"></a></td>
<td><a href="javascript:;" onMouseOver="MM_swapImage('LargeImage','','Images/hotel_10.jpg',1)" onMouseOut="MM_swapImgRestore()"><img src="Images/hotel_10_resize.jpg" width="125" height="81"></a></td>
</tr>
</table>
<p><a href="index.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image1','','Images/home_over.jpg',1)"><img src="Images/home1.jpg" alt="Home" name="Image1" width="90" height="20" border="0" id="Image1" /></a><a href="travel.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image21','','Images/travel_info_over.jpg',1)"><img src="Images/travel_info1.jpg" alt="Travel Info" name="Image21" width="120" height="20" border="0" id="Image21" /></a><a href="accomodations.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image91','','Images/accomodations_over.jpg',1)"><img src="Images/accomodations1.jpg" alt="Accomodations" name="Image91" width="150" height="20" border="0" id="Image91" /></a><a href="aboutbvi.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image101','','Images/aboutVG_over.jpg',1)"><img src="Images/aboutVG1.jpg" alt="About BVI" name="Image101" width="170" height="20" border="0" id="Image101" /></a><a href="contact.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image111','','Images/contact_over.jpg',1)"><img src="Images/contact1.jpg" alt="Contact" name="Image111" width="100" height="20" border="0" id="Image111" /></a><a href="gallery.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image15','','Images/gallery_over.jpg',1)"><img src="Images/gallery1.jpg" alt="Gallery" name="Image15" width="70" height="20" border="0" id="Image15" /></a></p>
</body>
</html>

Kraut55
10-11-2008, 08:20 PM
Read the comments in the html and the embedded styling in the head.


Thank you very much for the comments and the additional advice. This has really helped me a lot.
Have a nice weekend.

Kraut55

domedia
10-11-2008, 08:21 PM
I must confess that I don't understand that. If I removed the first picture it would not be able to be seen when I go to the No 1 Thumbnail.

I meant removing the onmouseout function, I was a little unclear :)
Cary's suggestion is a great one if you want the large image to revert to the original one once the mouse is not hovering any of the thumbnails

berlin28
11-10-2008, 06:08 PM
oups i did a mistake with the topics i meant if this galerry was free to use!

Corrosive sorry i meant this use!