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
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">
document.getElementById('shown_pic').style.backgroundImage = "";
front = image.substring(0, image.lastIndexOf('.')-1);
back = image.substring(image.lastIndexOf('.'));
final = front.concat(back);
document.getElementById('shown_pic').style.backgroundImage = "url('"+final+"')";
<img src="images/pic3t.jpg" onmouseover="show('images/pic3t.jpg');" onmouseout="hidy();" height="75" width="100" alt="" />
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.