HTML hovering over thumbnail to bring up larger image on top of it. How?

I am new to site and first question. So hope not too silly.    I wish to have lots of small thumbnails on page and when mouse hovers over each individual thumbnail it will enlarge into a larger image - on top of the thumbnail mouse is over.   Thanks to Nancy O answering Bravats question on this, I found the following HTML from Nancy,  however..... am darned if I am able to have the image hover exactly over the thumbnail.    Not to left, not to right, etc etc,   but over top of thumbnail.    Can someone please tell me what to put in where to make this happen?  Thank you.
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Disjointed Image Rollovers</title>
<style type="text/css">
/**BEGIN DISJOINTED IMAGE ROLLOVERS**/
#rollover a {
border:none;
text-decoration:none;
padding: 0 0.5em 0 0.5em; /**space between small icons**/
/**remove this rule if all full size images are to share the same display area. **/
#rollover a span {
visibility:hidden;
background-color: #FFF;
display:block;
position: absolute;
/**adjust location of full size images**/
left: 50%;
top: 50%;
/**optional full size image captions**/
font-size: 12px;
line-height: 1.2;
color:#666;
text-align: center;
/**optional full size image borders, padding**/
border: 5px solid orange;
padding: 5px;
#rollover a:hover span, #rollover a:active span, #rollover a:focus span {visibility:visible;}
#rollover a:hover, #rollover a:focus
{visibility:visible;}
/**END DISJOINTED ROLLOVERS**/
</style>
</head>
<body>
<!--begin disjointed rollovers -->
<div id="rollover">
<p>
<a href="#"><img src="SmallIcons/image.png" alt="some description" /><span><img src="FullSize/image.jpg" alt=" " /><br />optional caption #1</span></a>
<a href="#"><img src="SmallIcons/image.png" alt="some description" /><span><img src="FullSize/image.jpg" alt=" " /><br />optional caption #2</span></a>
<a href="#"><img src="SmallIcons/image.png" alt="some description" /><span><img src="FullSize/image.jpg" alt=" " /><br />optional caption #3</span></a>
</p>
</div>
<!--end disjointed rollovers -->
</body>
</html>

Here is my Demo.   http://alt-web.com/DEMOS/CSS-Disjointed-Image-Rollover.shtml
First, #rollover a needs to have position:relative.
Second, you will need to tweak left & top values to suit your needs.
#rollover a span {
visibility:hidden;
background-color: #FFF;
display:block;
position: absolute;
/**adjust positioning of full size images in px or %**/
left: 0px;
top: -140px;
For better answers, we need a link to your page.
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media  Specialists 
http://alt-web.com/
http://twitter.com/altweb

Similar Messages

  • Muse, thumbnails, click creates a larger images ???

    muse, how to create a thumbnail and when I click on it or do a roll over it opens up a larger image of the thumbnail, need help.   Wolf

    Please check out: http://tv.adobe.com/watch/learn-muse/creating-a-lightbox-slideshow-in-muse/
    Cheers,
    Vikas

  • Roll over to view larger image, click to select

    Which combined server behaviors or technologies would allow
    me to create a dynamic image gallery of thumbnails that when you
    roll over any thumbnail image (images are populated via repeat
    region recordset behavior), you can view a larger image. Selecting
    a thumbnail would select the larger image version.
    I do not need to know how to create the thumbnail images
    (this would be achieved via aspjpeg with a repeat region applied to
    it) but rather how to make it work as explained.
    check out
    https://www.schooloutfitters.com/catalog/product_info/pfam_id/PFAM898/products_id/PRO987
    for an example.

    OK so I'm almost there! A little more help if it's not too much trouble.
    I've used the "mouse-over to enlarge" example and it seems to be working.
    The images sit together top left (ie. the larger image appears over the top of the smaller image and both top left corners of the images sit in the same x and y position - it appears to grow to the right and down!). Can I change this so that the images sit in the same position bottom right and the image grows bigger, up and right?
    Alternatively if it's easier I could do "mouse-over and click", but I need the click to open my image in a new window, sized to the image (so I can still see the main page in the original browser window).
    Thanks again
    Lopoc

  • RoboHelp 8 HTML WebHelp How to display a larger image of a thumbnail by clicking on or rolling over the thumbnail?

    How would you display a larger image of a thumbnail by clicking or rolling over the thumbnail?

    Hi there
    For a mouseover you would have to add some custom developed JavaScript. You could probably find some pre-made on the web if you poked around.
    Generally speaking, any way you slice it you will be using two images. One for the thumbnail and one for the full sized image. You could employ the popup functionalty to pop up the larger image.
    I used to simply create DHTML drop-downs and insert the large images in the drop-down area.
    Cheers... Rick
    Helpful and Handy Links
    RoboHelp Wish Form/Bug Reporting Form
    Begin learning RoboHelp HTML 7 or 8 within the day - $24.95!
    Adobe Certified RoboHelp HTML Training
    SorcerStone Blog
    RoboHelp eBooks

  • Thumbnails enlarge when hovered over

    Hi all,
    I'm trying to create an archive page for the past issues of a
    newsletter. I've tried creating one with CSS, which looks fine in
    Firefox but tweaks out in IE6. So I'm trying to create an archive
    page using Flash. I'd like to create a page similar to the AIGA
    Design Archives page:
    http://designarchives.aiga.org/
    First, I'm having difficulting with the image gallery itself
    - making the thumbnails zoom out when the mouse hovers. Then on top
    of that, how would I enable the text/information/lightbox to appear
    after the thumbnail (the green box)? It seems like a lot of
    advanced Flash scripting is taking place, and the images are being
    called from a database or XML file? I would eventually like to
    accomplish this part as well, but initially if anyone can help me
    get the image gallery started that would be very helpful.
    I wasn't able to find any tutorials regarding the enlarging
    of a thumbnail gallery, but I've found plenty of other image
    scrolling, XML photo galleries.
    Any help would be appreciated.
    Thanks

    Have a look at the Lee Brimlow carousel 3 tutorial concepts
    ie xml and tootip.
    at
    http://www.gotoandlearn.com/download.php.
    As for making the thumbnails zoom in and out I have a small example
    using mosesSupposes.fuse librarys
    to make things easy. Im not sure how to attach an fla here
    but I will paste the action script below.
    import mx.managers.DepthManager;
    import com.mosesSupposes.fuse.*;
    ZigoEngine.simpleSetup( Shortcuts , PennerEasing );
    var home:MovieClip = this;
    var xpos:Number = 150;
    var ypos:Number = 100;
    var boxwidth:Number = 120;
    for(var i=0;i<3;i++)
    var t = home.attachMovie("box","box"+i,i+1);
    t._x = xpos +(boxwidth * i);
    t._y = ypos;
    t.box.loadMovie("hannah.jpg");
    t.onRollOver = over;
    t.onRollOut = out;
    function over()
    this.setDepthTo(DepthManager.kTop);
    this.scaleTo(120,1,"easeOutBounce");
    function out()
    this.scaleTo(100, 1, "easeOutBounce");
    if you want the fla please contact me directly.
    Steve

  • HELP! How do I link small thumbnail to larger image on same page?

    hello, everyone! I'm working in dreamweaver cs4 and am having no luck!
    see below - I'm trying to link the small thumbnails to the larger image on the left. in other words, when a thumbnail is chosen it's corresponding image would open on the left. I have tried mouse-over effects and image swap behaviors but still no luck. either the larger image replaces the thumbnail or a brand new window opens up with the larger image.
    I want all effects to stay on the same page. any help would be greatly appreciated!

    Hi There:
    Not sure how you have designed your page but here is a simple sample code on how you can do this with javascript and on mouseover event:
    <!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">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    div#left {
    display:none;
    </style>
    <script language="javascript" type="text/javascript">
    <!--
    function showImage(obj) { //v2.0
    //alert(obj);
    document.getElementById(obj).style.display='block';
    //  return eval(obj)
    function hideImage(obj) { //v2.0
    //alert(obj);
    document.getElementById(obj).style.display='none';
    //  return eval(obj)
    //-->
    </script>
    </head>
    <body>
    <div id="left" style="float:left;width:200px;"><img src="left.jpg" width="180" height="273" alt="large" /></div>
    <div id="right" style="float:right;width:200px;"><img src="thumbnail.jpg" alt="small" style="cursor:pointer;" width="57" height="228" onmouseover="showImage('left');" onmouseout="hideImage('left');"/></div>
    </body>
    </html>
    By default the bigger image is initally not there so I have added a display:none style in the head.
    The above code will show the bigger image on left when you do a mouseover on the smaller left thumbnail image. Vice-versa when you move out the mouse the image goes away (you may not need this part). So on each thumbnail image simlarly pass the id of the image you want to show via the javascript showImage function.
    Note: You can use onclick or other event per your preference.
    Regards,
    Vinay

  • Thumbnail to larger image rollover

    In GoLive CS, now that I've learned how to do a regular rollover, I'm trying to do a rollover where a larger image appear (possibly with a brief caption) over or near a thumbnail image. I've searched other threads here about this with suggestions for Lightbox, etc. which I'll consider. But can this simply be done with GL alone? I tried it using the Rollovers and Actions palate but the larger image that appears over the thumbnail is no larger. Does Layers have something to do with a solution (never worked in Layers)? Perhaps there's a tutorial for this?

    In article <[email protected]>,<br /> Wayneswhirld <[email protected]> wrote:<br /><br />> It might work for me even though it seems to leave out the option of a <br />> caption in the larger image<br /><br />You can do that, too, by assigning another GL action to the trigger: <br />Text Swap (ID).<br /><br />First you need to assign an ID to the element - e.g. <p> or <div> - that <br />contains your text. Then add the action to the trigger link and in the <br />Inspector enter the name of the ID and the text you want displayed when <br />the action is triggered.<br /><br />I have two samples here, one on click the other on hover:<br /><a href=http://www.simnet.is/klipklap/golive/swaptext/><br /><a href=http://www.simnet.is/klipklap/golive/swaptext/sample.html><br /><br />-- <br />Cheers  Martin

  • How do I stop text from changing colour when hovering over it?

    Hello, I have downloaded a template for Dream Weaver CS6 (Which is the version i am usig). When you hover over one of the boxes the top text changes colour to black instead of staying white... does any one know how i can make it so the text stays the same colour. I will post a print screen of it.
    Before clicking:
    View image: 1
    When hovering over it:
    http://postimg.org/image/wdsii9mab/
    I will post the code of the index page aswell: <!DOCTYPE html> <html lang="en"> <head> <title>Home</title> <meta ch - Pastebin.com
    Any help is appreciated. Thanks.

    Your unwanted pink hover color comes from style.css line 181 here
    .btn_{
        background: none repeat scroll 0 0 #cf3046;    border: medium none;
        border-radius: 3px;
        box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2);
        color: #ffffff;
        font-family: "Open Sans",sans-serif;
        font-size: 12px;
        font-weight: bold;
        line-height: 15px;
        margin-top: 20px;
        padding: 7px 13px 8px;
        text-decoration: none;
        text-shadow: none;
        text-transform: uppercase;

  • Does PSE13 download photos in the order they are taken on that date and show actual time when hovering over the photo as it did in PSE6?

    In my work, I need to be able to look at photos I took throughout the day at various locations and group them by the time I was there on that date to distinguish the different properties I am taking photos of.  In my previous version of PSE6, when the day's pictures were downloaded, they were downloaded to the computer in the order I took them, and if you hovered over the picture it would show the time the photo was taken.  I just need a program that will organize in that fashion.  I do not need a lot of editing options, more the organizational options.

    Hi,
    If you are happy with PSE 6, why not continue to use it?
    PSE 13 can display the images in date/time order like PSE 6 does. The time doesn't appear when you hover over a thumbnail but can be displayed below the thumbnail. The best thing is for you to download the trial version (select version 13 from the following link) and try it for 30 days to see if you like it.
    Download Photoshop Elements products | 13, 12, 11, 10
    If you use the trial, to see the date and time under each thumbnail you need to go to the View menu in the organizer and ensure that Details is checked.
    Brian

  • Trying to link a thumbnail in one frame to a larger image in another frame GOLIVE 9...

    Hi.
    I am using Adobe Golive 9.
    I found a tutorial on the internet that allows you to create an image gallery with clickable thumbnails
    http://www.tutorialhero.com/click-48179-create_an_image_gallery_with_clickable_thumbnails. php
    However, the tutorial is designed for a page without frames.
    I want to be able to do this using frames.
    I want to link a thumbnail on a page in one frame to a larger image on another page, so that when your mouse is over the thumbnail,
    the larger version appears in the other frame.
    This is what my frames look like so you get an idea of what I'm trying to do
    And here is a picture of the thumbnail in the lower frame and the larger image in the frame above it.
    Could someone please give me STEP BY STEP instructions on how to do this?  I'm new to Golive, using version GOLIVE 9, and I know this can be accomplished using "Set Image URL"  but have no idea how to do it.
    Thank you for your help all.
    Chris.

    A link in one frame is designed to call another page into some other frame, not an image. You can't use SetImageUrl across different pages. You'd probably have to put each of your large images on a page, and call each page each time. I'm not sure why you're so set on using frames, they have many disadvantages.

  • Creating thumbnail "tables" of artwork next to the larger image

    I'm trying to figure out how this person created their site in iweb. Below is the link to their website.
    http://www.adrianmills.co.uk/Illustrations.html
    I'm new to the program, but would really appreciate any advice on how to achieve this look with the thumbnail images to the right of the larger images.
    Thanks in advance.

    It's a flash based slideshow. You can create a nearly identical one from iPhoto with the Flash Album Exporter plugin for iPhoto. The layout you would want to use is SimpleView. You can find it at VersionTracker.com.
    OT

  • Displaying a larger image from a thumbnail [was: Question]

    I would like to display a larger image from a thumbnail inserted on the web page. I inserted a rollover image, used the thumbnail as the original and a larger and different jpeg image as the rollover image. However, when the mouse rolled over the thumbnail, the new rollover image (different then the original) was the same size as the original. Is there an easier way to display a larger image from a thumbnail? What am I doing wrong? Thanks
    [Subject line edited for clarity by moderator]

    Could you also provide a CSS solution to opening a non _self page that is the same size as the image displayed on the page.
    Not possible with pure CSS.  Sorry.  Your best option is to use one of the jQuery Lightbox scripts mentioned below.
    http://line25.com/articles/rounding-up-the-top-10-jquery-lightbox-scripts
    Nancy O.
    Alt-Web Design & Publishing
    Web | Graphics | Print | Media  Specialists
    www.alt-web.com/
    www.twitter.com/altweb
    www.alt-web.blogspot.com

  • Thumbnail image links to larger image - how?

    Mac OX 10.4.11 - GoLive CS(1) I want to create a series of thumbnail images that would act as link to a single large image area (see example http://www.markvelasquez.com/gallery.php?cid=1&pid=5 but ignore the dubious images). 10 or so different thumbnail images would show singularly in the large image area only, and only when activated by a click on a thumbnail.
    I have used slide show (SlideShow.action) in the past but this does not allow for user randon choice, is there an action for this in GoLive.

    Hi...
    You didn't mention whether you wanted a free or commercial Action so have a look at CyberGallery 6.1 for GoLive at http://www.actionscafe.com/Features_Folder/CyberGallery/cgfeatures.html. The GoLive version doesn't have some of the later Dreamweaver features but will let you set up a thumbnails that expand into full size display images when they are clicked.

  • In iPhoto, my thumbnails show but larger images do not, why?

    I am having trouble with some of my larger images not showing up in iPhoto. I click on "Faces" and go into pictures of my mom that I have tagged. I see all the thumbnail images of her, but when I click to view the images larger, it doesn't show the picture. It shouws a triangle with a !
    I am running iPhoto '11 (version 9.2.1)
    Please help me.
    Thanks.

    The ! turns up when iPhoto loses the connection between the thumbnail in the iPhoto Window and the file it represents.
    Option 1
    Back Up and try rebuild the library: hold down the command and option (or alt) keys while launching iPhoto. Use the resulting dialogue to rebuild. Choose to Rebuild iPhoto Library Database from automatic backup.
    If that fails:
    Option 2
    Download iPhoto Library Manager and use its rebuild function. This will create a new library based on data in the albumdata.xml file. Not everything will be brought over - no slideshows, books or calendars, for instance - but it should get all your albums and keywords back.
    Because this process creates an entirely new library and leaves your old one untouched, it is non-destructive, and if you're not happy with the results you can simply return to your old one. .
    Regards
    TD

  • Yellow pop up box when hovering over links missing in CC?

    The behavior when hovering over links in the Links Panel in CS6 was a yellow pop up box with the full path of the link displayed.
    I find that is not the behavior in CC and I am really missing that.
    Have I missed a setting somewhere to enable this in CC?

    That was it.
    Tool tips was not enabled. Enabling it brings back the yellow box. Didn't really think of that as a tool tip.
    Thanks

Maybe you are looking for

  • Error while creating new user via new MDM API

    Hi I have two questions: 1) Is it possible to create a user in MDM via MDM4J? 2) I am trying to create a user through new MDM API (not the MDM4J). When I execute the command CreateUserCommand, I get following error: com.sap.mdm.commands.CommandExcept

  • New ipad help

    I just got my first iPad and it is the mini retina 64 gigs. I don't what to do with it? What can I/should I do with it? Is this a good investment? I have 7.0.4 do I need to update the software Is this the best iPad or should I take it back for a bett

  • Finder Window Info missing

    the information on the bottom of the Finder window is not being shown in 10.7 I always had the available disk space showing. Anyone know how to get this back?

  • How can I access my iPhone backup stored in iCloud?

    Hi, My iPhone was stolen a few months ago and I now have an Android phone. I have an iPad and it shows that my iPhone was backed up onto iCloud. How can I access this back up to retrieve my photos/notes etc? Thanks Jessica

  • Ipad asks for icloud password

    Ipad mini on Power on asks for iCloud password