Forum Moderators: open
Java in head of document...
<SCRIPT LANGUAGE="JAVASCRIPT" TYPE="TEXT/JAVASCRIPT">
<!-- Hide script from old browsers
if (document.images) {
arrowRed = new Image
arrowBlue = new Image
ah = new Image
ap = new Image
rc = new Image
dp = new Image
dk = new Image
eq = new Image
fa = new Image
hp = new Image
hm = new Image
pc = new Image
ph = new Image
pi = new Image
hc = new Image
ve = new Image
vi = new Image
arrowRed.src = "redArrow.gif"
arrowBlue.src = "holder.jpg"
ah.src = "ah.jpg"
ap.src = "ap.jpg"
rc.src = "rc.jpg"
dp.src = "dp.jpg"
dk.src = "dk.jpg"
eq.src = "eq.jpg"
fa.src = "fa.jpg"
hp.src = "hp.jpg"
hm.src = "hm.jpg"
pc.src = "pc.jpg"
ph.src = "ph.jpg"
pi.src = "pi.jpg"
hc.src = "hc.jpg"
ve.src = "ve.jpg"
vi.src = "vi.jpg"
}
else {
arrowRed = ""
arrowBlue = ""
document.arrow = ""
ap = ""
ah = ""
rc = ""
dp = ""
dk = ""
eq = ""
fa = ""
hp = ""
hm = ""
pc = ""
ph = ""
pi = ""
hc = ""
ve = ""
vi = ""
}
// End hiding script from old browsers -->
</SCRIPT>
....Html in body.....
<DIV align="left">
<BLOCKQUOTE>
<TABLE cellpadding="5" cellspacing="5">
<TBODY>
<TR>
<TD align="left">
<A href="accesshatches.htm" onMouseover="document.arrow.src=ah.src" onMouseout="document.arrow.src=arrowBlue.src">Access Hatches</A><BR>
<A href="accessplates.htm"onMouseover="document.arrow.src=ap.src" onMouseout="document.arrow.src=arrowBlue.src">Access Plates</A><BR>
<A href="rcm.htm" onMouseover="document.arrow.src=rc.src" onMouseout="document.arrow.src=arrowBlue.src">Chart & Drawing Tubes </A> <BR>
<A href="drainplug.htm" onMouseover="document.arrow.src=dp.src" onMouseout="document.arrow.src=arrowBlue.src">Drain Plugs</A><BR>
<A href="drinkholders.htm" onMouseover="document.arrow.src=dk.src" onMouseout="document.arrow.src=arrowBlue.src">Drink Holders</A><BR>
<A href="equipholders.htm" onMouseover="document.arrow.src=eq.src" onMouseout="document.arrow.src=arrowBlue.src">Equipment Holders</A><BR>
<A href="fasteners.htm" onMouseover="document.arrow.src=fa.src" onMouseout="document.arrow.src=arrowBlue.src">Fasteners</A> <BR>
<A href="handpumps.htm" onMouseover="document.arrow.src=hp.src" onMouseout="document.arrow.src=arrowBlue.src">Hand Pumps</A><BR>
<A href="plasticclips.htm" onMouseover="document.arrow.src=pc.src" onMouseout="document.arrow.src=arrowBlue.src">Plastic Clips</A><BR>
<A href="plastichinges.htm" onMouseover="document.arrow.src=ph.src" onMouseout="document.arrow.src=arrowBlue.src">Plastic Hinges</A> <BR>
<A href="pick.htm" onMouseover="document.arrow.src=pi.src" onMouseout="document.arrow.src=arrowBlue.src">Stainless Probe / Pick</A><BR>
<A href="hitchcovers.htm" onMouseover="document.arrow.src=hc.src" onMouseout="document.arrow.src=arrowBlue.src">Trailer Hitch Covers</A><BR>
<A href="hook.htm" onMouseover="document.arrow.src=hm.src" onMouseout="document.arrow.src=arrowBlue.src">Utility Hooks</A><BR>
<A href="vents.htm" onMouseover="document.arrow.src=ve.src" onMouseout="document.arrow.src=arrowBlue.src">Vents</A><BR>
<A href="viewplates.htm" onMouseover="document.arrow.src=vi.src" onMouseout="document.arrow.src=arrowBlue.src">View Plates</A></TD>
<TD width="300"><IMG src="holder.jpg" width="300" height="300" name="arrow" alt="arrow"></TD>
</TR>
</TBODY>
</TABLE>
</BLOCKQUOTE>
</DIV>
I'm sure there are other ways....
Adjust as needed
This would require large and small pictures be downloaded every time the page is loaded, which defeats the object of using thumbnail images in the first page.
I agree with this but only if the person already knows what the pictures are. You wouldn't want to wait for ages for them to load then find out..you dont want to see them.
Thumbnails load fast, then it's the users choice what they want to see.
I agree with this but only if the person already knows what the pictures are. You wouldn't want to wait for ages for them to load then find out..you dont want to see them.
Well actually I want to create this type of a pic gallery for the site I am working on...I know this requires a lot of pics but this kind of an effect is important for me to create hence I would like to know whether this effect can be accomplished easily and by someone who is not into programming and is using Frontpage to create the site in question!
Also is there some way to reduce file size of pics I am using....i have heard there is a program which drastically reduces and crunches file size of images?
Thanks
A good free graphics program is irfanview [irfanview.com] for controling image size.
You can pretty much just cut and paste that code and just edit the picture names though...then it would work fine. As text links that change the picture when moused over.
then where the links to pages are replace these with something like this if you want thumbnails.
<a href="accessplates.htm" onMouseOver="document.arrow.src=ab.src" onMouseout="document.arrow.src=arrowBlue.src><img src="ab.JPG" alt="Acess Plates" width="100" height="100" border="0"><img src="ab.jpg" alt="Acess Plates" width="100" height="100"></a><BR>
This will give you a thumbnail that when moused over will change the main picture and this thumbnail can also be linked to another page.