Forum Moderators: open

Message Too Old, No Replies

Bigger Picture displayed on mouse

Bigger pic should be displayed when i move mouse on a smaller image

         

contentmaster

12:02 pm on Dec 31, 2003 (gmt 0)

10+ Year Member



Hi I want to create a small gallery of thumbnail pics on the left hand side of my page and my aim is to display a larger size pic of the same image on the right hand side of the page..how do i do this.do i use onmouseover script!

please help

jbinbpt

12:16 pm on Dec 31, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Hi..... This script is from one of my first java attempts. It uses text to the left that swaps a larger images on the right when the text is mouseovered. Plaay with it like I did to suit your needs.

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 &amp; 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

Longhaired Genius

12:19 pm on Dec 31, 2003 (gmt 0)

10+ Year Member



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 would say, don't try to be too clever; if your images are worth seeing people will be prepared to wait a few seconds to see them.

thehittmann

12:29 pm on Jan 1, 2004 (gmt 0)

10+ Year Member



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.

contentmaster

2:54 pm on Jan 1, 2004 (gmt 0)

10+ Year Member



Hello
Thanks jbinbpt for the script! I need to try it out properly to do it right..actually I'm not a very script savvy person.... My question to you is that will this type of a script make my page load slowly.....

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

jbinbpt

3:14 pm on Jan 1, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



The image size is an issue. If you keep the images small enough, then this works. It is an easy script to follow. It's a combination of a tutorial and suggestions.

A good free graphics program is irfanview [irfanview.com] for controling image size.

contentmaster

5:49 pm on Jan 2, 2004 (gmt 0)

10+ Year Member



jbinbpt Hi i need some help with the script you gave me!
As I told you im not a very script savvy person....:( I cant seem to understand what changes need to be made to put images instead of the text links on the left! Please Help!

Contentmaster

thehittmann

6:00 am on Jan 3, 2004 (gmt 0)

10+ Year Member



a version of the above script can replace your text links

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.