PDA

Click to See Complete Forum and Search --> : thumbnails, hover effects and popup windows.

d0l1
09-18-2003, 04:30 PM
i am extremely new at all of this and i finally found myself a script for thumbnails with an effect - wherein you hover over a picture and it turns from black and white to colour.

skippy.

now i wanted to know how i can incoroporate a pop up window scirpt into it. i would like the thumbnail to open in a pop-up window [with the full sized pic] and then the rest of the thumbnails to open in that window thereafter.

if anyone can help with this, i would be forever grateful.

----------------

here is the script i found -

----------------

<head>
<SCRIPT language="JavaScript">
<!--
browserName=navigator.appName;
browserVer=parseInt(navigator.appVersion);
if ((browserName=="Netscape" && browserVer>=3) || (browserName=="Microsoft Internet Explorer" && browserVer>=4))
version="n3";
else
version="n2";
if (version=="n3")
{
pic1on= new Image(100,25);
pic1on.src="http://someplace.com/image_1_ON_name.gif";
pic2on= new Image(100,25);
pic2on.src="http://someplace.com/image_2_ON_name.gif";

pic1off= new Image(100,25);
pic1off.src="http://someplace.com/image_1_OFF_name.gif";
pic2off= new Image(100,25);
pic2off.src="http://someplace.com/image_2_OFF_name.gif";
}

function lightup(imgName)
{
if (version=="n3")
{
imgOn=eval(imgName + "on.src");
document[imgName].src= imgOn;
}
}

function turnoff(imgName)
{
if (version=="n3")
{
imgOff=eval(imgName + "off.src");
document[imgName].src= imgOff;
}
}
//-->
</SCRIPT>
</head>
<body>

<A HREF="http://someplace.com/page1.htm" onMouseover="lightup('pic1')" onMouseout="turnoff('pic1')">
<IMG SRC="http://someplace.com/image_1_OFF_name.gif" name="pic1" width="100" height="25" border="0">
<P>
<A HREF="http://someplace.com/page2.htm" onMouseover="lightup('pic2')" onMouseout="turnoff('pic2')">
<IMG SRC="http://someplace.com/image_2_OFF_name.gif" name="pic2" width="100" height="25" border="0">
d229rp
09-19-2003, 04:58 AM
Hi,

The problem is fairly simple.

Just change

<A HREF="http://someplace.com/page1.htm" onMouseover="lightup('pic1')" onMouseout="turnoff('pic1')">
<IMG SRC="http://someplace.com/image_1_OFF_name.gif" name="pic1" width="100" height="25" border="0">
<P>
<A HREF="http://someplace.com/page2.htm" onMouseover="lightup('pic2')" onMouseout="turnoff('pic2')">
<IMG SRC="http://someplace.com/image_2_OFF_name.gif" name="pic2" width="100" height="25" border="0">

to

<A HREF="http://someplace.com/page1.htm" TARGET="popup" onMouseover="lightup('pic1')" onMouseout="turnoff('pic1')">
<IMG SRC="http://someplace.com/image_1_OFF_name.gif" name="pic1" width="100" height="25" border="0">
<P>
<A HREF="http://someplace.com/page2.htm"
TARGET="popup" onMouseover="lightup('pic2')" onMouseout="turnoff('pic2')">
<IMG SRC="http://someplace.com/image_2_OFF_name.gif" name="pic2" width="100" height="25" border="0">

You should notice I've added TARGET="popup" to each HREF. The name 'popup' is not important, it could be anything like 'blue' or 'chair', but it is important to give each HREF the same target so they all popup in the same window.

Hope that helps
d0l1
09-19-2003, 05:14 AM
<i>but the thing is i would like the window that pop ups to be a certain size [the size of the picture, that is]. how do i resize it, and have it without scrollbars? that is the main problem that i was having, actually.

i did this a few years ago when i put my first site up but well, i don't remember any of it anymore.

:(

if you could help i would be very grateful.
Charles
09-19-2003, 05:24 AM
Just add something like

onclick="window.open(this.href, 'child', 'height=400,width=300'); return false"

to the start tag for your A elements.
d0l1
09-19-2003, 05:44 AM
thank you so much. it is exactly what i was looking for.

:)

i will most probably be back within the next few days asking about something else. hehe.

don't think i could get very far without the help of people like you.

i appreciate this a lot.
:D