View Full Version : Rollover thumbnail-Display larger elsewhere

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.


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">
<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+"')";

<style type="text/css">
position: absolute;
top: 300px;
left: 450px;
height: 240px;
width: 320px;

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

Here are the two images used:


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.