Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    Apr 2012
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Rollover thumbnail-Display larger elsewhere

    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

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    3,762
    Thanks
    23
    Thanked 548 Times in 547 Posts
    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.

    Code:
    <!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


    and
    pic3t.jpg

  • #3
    New Coder
    Join Date
    Apr 2012
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Great Help

    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
    Last edited by amerifax; 04-18-2012 at 08:41 PM.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •