...

View Full Version : Rollover thumbnail-Display larger elsewhere



amerifax
04-16-2012, 07:18 PM
I have a thumbnail image at a set location. I want to have it display at a given location ,not cover thumbnail, when someone rolls over the image.

Very new, total new, to CSS. You can see what I need to accomplish at www.home2000.com, large display on lower right.

Bob

sunfighter
04-17-2012, 09:01 PM
To hover over an image and have that show a larger image at a new location all done with css has always been a challenge for me. I wish I could do it, but all I ever end up with is two images that flicker. This can be done with some javascript though.

The example I give can do this for a number of smaller images provided the small image has a 't' after the name and before the dot image type.



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>New document</title>
<script type="text/javascript">
function hidy()
{
document.getElementById('shown_pic').style.backgroundImage = "";
}

function show(image)
{
front = image.substring(0, image.lastIndexOf('.')-1);
back = image.substring(image.lastIndexOf('.'));
final = front.concat(back);
document.getElementById('shown_pic').style.backgroundImage = "url('"+final+"')";
}
</script>

<style type="text/css">
div#shown_pic
{
position: absolute;
top: 300px;
left: 450px;
}
#shown_pic
{
height: 240px;
width: 320px;
}
</style>
</head>

<body>
<img src="images/pic3t.jpg" onmouseover="show('images/pic3t.jpg');" onmouseout="hidy();" height="75" width="100" alt="" />
<div id="shown_pic">
</div>
</body>
</html>


Here are the two images used:
pic3.jpg
http://i815.photobucket.com/albums/zz74/sunfighter41/pic3.jpg

and
pic3t.jpg
http://i815.photobucket.com/albums/zz74/sunfighter41/pic3t.jpg

amerifax
04-18-2012, 09:33 PM
I'll be working on this for a couple of days. Thanks for the help which I was told was not going to happen with any code.

I want it to be a navigation tree function. When I mouseover the navigation tree, rather than a thumbnail, it will just be a list or node on the tree. Right now on my site it will give me a display as fast as I can move the mouse and that's what I am looking for. Do you think this is workable? I use the thumbnail to large picture just as way to explain better what I was looking to do.

Bob



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum