...

View Full Version : Repeating the same mouseover affect with multiple images on the same page



Malka
07-03-2003, 04:13 PM
I have multiple thumnail pictures that when I mouseover, I want to popup a new page with the larger photo as well as a discription of the photo. I have set this up on 14 pictures in the same html document. Unfortunately I have two problems.

1. Onload a window pops up with a larger image of the first thumbnail that I setup to do the mouseover effect.
2. When you mouseover the thumbnails, everyone opens the page for the last thumbnail on the page. (pictures 1-14 all open the html for #14)

The page location is: http://www.thejacksonempire.com/blizzard.html

I will post the code for a few of the images, as posting the whole page would be too long. There are three tables with four or five thumbnails in each table. This is the code for one of the tables.

<TABLE border=0 cellpadding=6 cellspacing=0 width=175>
<TR valign=TOP colspan=3>
<TD BGCOLOR="333333">
<SCRIPT LANGUAGE="JavaScript">
<!--
function window()
{
window1=open("d_rback.html","Blizzard2003","toolbar=no,scrollbars=no,width=620,height=415");
}
//-->
</SCRIPT>
<a href="d_rback.html" onMouseOut="window1.close()"; onMouseOver="window(); return true;"><img src="images/blizzard/Thumbnail/d_rback.gif" width="100" height="75">
</a> </TD>
<TD></TD>
<TD BGCOLOR="333333">
<SCRIPT LANGUAGE="JavaScript">
<!--
function window()
{
window1=open("m_back.html","Blizzard2003","toolbar=no,scrollbars=no,width=620,height=415");
}
//-->
</SCRIPT>
<a href="m_back.html" onMouseOut="window1.close()"; onMouseOver="window(); return true;"><img src="images/blizzard/Thumbnail/m_back.gif" WIDTH="100" height="75">
</a> </TD>
<TD></TD>
<TD BGCOLOR="333333">
<SCRIPT LANGUAGE="JavaScript">
<!--
function window()
{
window1=open("m_back1.html","Blizzard2003","toolbar=no,scrollbars=no,width=620,height=415");
}
//-->
</SCRIPT>
<a href="m_back1.html" onMouseOut="window1.close()"; onMouseOver="window(); return true;"><img src="images/blizzard/Thumbnail/m_back1.gif" WIDTH="100" height="75">
</a> </TD>
<TD></TD>
<TD BGCOLOR="333333">
<SCRIPT LANGUAGE="JavaScript">
<!--
function window()
{
window1=open("m_closeback.html","Blizzard2003","toolbar=no,scrollbars=no,width=620,height=415");
}
//-->
</SCRIPT>
<a href="m_closeback.html" onMouseOut="window1.close()"; onMouseOver="window(); return true;"><img src="images/blizzard/Thumbnail/m_closeback.gif" WIDTH="100" height="75">
</a> </TD>
<TD></TD>
<TD BGCOLOR="333333">
<SCRIPT LANGUAGE="JavaScript">
<!--
function window()
{
window1=open("m_rback.html","Blizzard2003","toolbar=no,scrollbars=no,width=620,height=415");
}
//-->
</SCRIPT>
<a href="m_rback.html" onMouseOut="window1.close()"; onMouseOver="window(); return true;"><img src="images/blizzard/Thumbnail/m_rback.gif" width="100" height="75">
</a> </TD>
</TR>
</TABLE>
<br>
<TABLE border=0 cellpadding=6 cellspacing=0 width=175>
<TR valign=TOP colspan=3>
<TD BGCOLOR="333333">
<SCRIPT LANGUAGE="JavaScript">
<!--
function window()
{
window1=open("m_wayback.html","Blizzard2003","toolbar=no,scrollbars=no,width=620,height=415");
}
//-->
</SCRIPT>
<a href="m_wayback.html" onMouseOut="window1.close()"; onMouseOver="window(); return true;"><img src="images/blizzard/Thumbnail/m_wayback.gif" width="100" height="133">
</a> </TD>
<TD></TD>
<TD BGCOLOR="333333">
<SCRIPT LANGUAGE="JavaScript">
<!--
function window()
{
window1=open("path1.html","Blizzard2003","toolbar=no,scrollbars=no,width=620,height=415");
}
//-->
</SCRIPT>
<a href="path1.html" onMouseOut="window1.close()"; onMouseOver="window(); return true;"><img src="images/blizzard/Thumbnail/path1.gif" WIDTH="100" height="75">
</a> </TD>
<TD></TD>
<TD BGCOLOR="333333">
<SCRIPT LANGUAGE="JavaScript">
<!--
function window()
{
window1=open("path2.html","Blizzard2003","toolbar=no,scrollbars=no,width=620,height=415");
}
//-->
</SCRIPT>
<a href="path2.html" onMouseOut="window1.close()"; onMouseOver="window(); return true;"><img src="images/blizzard/Thumbnail/path2.gif" WIDTH="100" height="75">
</a> </TD>
<TD></TD>
<TD BGCOLOR="333333">
<SCRIPT LANGUAGE="JavaScript">
<!--
function window()
{
window1=open("pkinglot.html","Blizzard2003","toolbar=no,scrollbars=no,width=620,height=415");
}
//-->
</SCRIPT>
<a href="pkinglot.html" onMouseOut="window1.close()"; onMouseOver="window(); return true;"><img src="images/blizzard/Thumbnail/pkinglot.gif" WIDTH="100" height="75">
</a> </TD>
</TR>
</TABLE>

:confused: Do I need to change the "Blizzard2003" part to be different for each thumbnail? Or do I need to change the window # for each thumbnail? Or is there a completely different fix for this?
:confused:

Thank you in advance for your assistance. Please let me know if I can provide any further information to help you help me.

beetle
07-03-2003, 06:34 PM
No, you need to learn about parameters.

Each "window" function you wrote overwrote the previous, which is why all of your links used that version.

In the <head>

<script type="text/javascript">
function imageWindow( url )
{
var imageWin = window.open( url, 'imageWin', 'width=620,height=415' );
imageWin.focus();
return false;
}
</script>Then, in your HTML

<a href="d_rback.html" onclick="return imageWindow( this.href );">
<img src="images/blizzard/Thumbnail/d_rback.gif" width="100" height="75">
</a>I highly advise against doing this with mouse over/out events. It will be very taxing on the browser, and somewhat counterintuitive, even to a moderately advanced user.

Malka
07-04-2003, 12:04 AM
Thank you so much for your help. I can understand about the java taxing the page/reseources. I originally was looking for a script/applet that I could use where when you moused over the thumbnail it opened the picture in the top spot (there is already a large picture there) but I wasn't able to find anything that I saw I could manipulate to do what I want.

I may drop the whole Idea and just have the thumbnails be plain links. I just figured all the "back" would get annoying.

:thumbsup: Thank you again for your assistance :thumbsup:



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum