Mouseover thumbnail and display fullsize at right 1

benniesanders · Nov 29, 2005

Hi there, I'm not a javascript programmer, but I need to find a script to display a photo on the right side of the page when a thumbnail is moused over. If somebody could point me to a great resource for javascripts, I'd really appreciate it. I can poke around in there and probably find whatever I need without bothering ya'll too much. many, many thanks in advance.

BillyRayPreachersSon · Nov 29, 2005

http://www.dynamicdrive.com

has loads of scripts - and probably some gallery ones such as you describe.

Hope this helps,
Dan

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

cLFlaVA · Nov 29, 2005

here's an example i just played around with:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">[/URL]

<html>
<head>
<title>Untitled</title>

<script type="text/javascript"><!--
function change(i) {
    var d = document.getElementById('theImg');
    d.src = i.src;
    d.alt = i.alt;
}
//--></script>

<style type="text/css">
#left, #right {
    width: 45%;
    float: left;
}

#left {
    background-color: #ccc;
}

#right {
    background-color: gray;
}

.thumb, #theImg {
    display: block;
    padding: 1em;
}

.thumb {
    height: 50px;
    width: 50px;
}

#theImg {
    height: 400px;
    width: 400px;
}
</style>

</head>

<body>

<div id="left">
  <img src="[URL unfurl="true"]http://www.tek-tips.com/images/logo.gif"[/URL] alt="tek-tips" onmouseover="change(this);" class="thumb" />
  <img src="[URL unfurl="true"]http://www.google.com/images/logo_sm.gif"[/URL] alt="google" onmouseover="change(this);" class="thumb" />
  <img src="[URL unfurl="true"]http://us.a1.yimg.com/us.yimg.com/i/ww/beta/y3.gif"[/URL] alt="yahoo!" onmouseover="change(this);" class="thumb" />
  <img src="[URL unfurl="true"]http://www.msnbc.msn.com/images/msnbc/logo01.gif"[/URL] alt="msnbc" onmouseover="change(this);" class="thumb" />
</div>

<div id="right">
  <img id="theImg" src="" alt="" />
</div>

</body>
</html>

*cLFlaVA
----------------------------
[tt]I already made like infinity of those at scout camp...[/tt]
[URL unfurl="true"]http://www.coryarthus.com/[/url]
[banghead]

theniteowl · Nov 29, 2005

Consider though that using onmouseover can get annoying with a larger image. If someone is moving their mouse across the page and passing over elements with onmouseover causing an image change the flashing of the large image is irritating.
I generally do an onmouseover to visually alter the item the mouse is currently over so you can easily tell what you are selecting but use an onclick to alter the larger image elsewhere on the screen so it is by concious choice of the user that the image is displayed, not by accident of the passage of their mouse pointer on the screen.

Paranoid? ME?? WHO WANTS TO KNOW????

cLFlaVA · Nov 29, 2005

i agree. however in the scenario i provided above the images have been preloaded for the thumbnails, so on most internet connections this should not be an issue.

*cLFlaVA
----------------------------
[tt]I already made like infinity of those at scout camp...[/tt]
[URL unfurl="true"]http://www.coryarthus.com/[/url]
[banghead]

benniesanders · Nov 29, 2005

Ya'll are just awesome. Many thanks for all of the suggestions.

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Mouseover thumbnail and display fullsize at right 1

benniesanders

Programmer

BillyRayPreachersSon

Programmer

cLFlaVA

Programmer

theniteowl

Programmer

cLFlaVA

Programmer

benniesanders

Programmer

Similar threads

Part and Inventory Search

Sponsor