Results 1 to 3 of 3

Thread: Popup image on hover

  1. #1
    Join Date
    Sep 2012
    Posts
    22
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default Popup image on hover

    1) Script Title: Popup on hover? (Sorry, not sure this is correct title. I don't see it listed on your website, but it is Dynamic Drive code)

    2) Script URL (on DD): ?

    3) Describe problem: I'm trying to add a popup image to an image map hotspot on hover. I've used this css/html before on buttons, but never on image maps.

    Page in question:

    http://www.legacyptla.com/Stage/html/investment_portfolio-alt.html

    (top left orange button is currently the only one with an image map)

    ========================
    My html looks like this:
    HTML Code:
    <div class="mapcontainer">
    <img src="../images/US_Map-alt.png" alt="Investment Portfolio" width="960" height="550" usemap="#Map" class="scalable" />
    <a class="thumbnail2"><span><img src="../images/popup_washington-cedarwillows.png" width="450" height="500" class="scalable"/>
    <map name="Map"><area shape="circle" coords="146,53,6" href="#" alt="Cedar Willows"></map></span></a>
    </div>
    =========================
    The css looks like this:
    Code:
    .mapcontainer{
    	position: relative;
    }
    
    .thumbnail2 img{
    border: none;
    margin: 0;
    }
    
    .thumbnail2:hover{
    background-color: transparent;
    }
    
    .thumbnail2:hover img{
    border: none;
    }
    
    .thumbnail2 span{ /*CSS for enlarged image*/
    	position: absolute;
    	padding: 0px;
    	left: -1000px;
    	border: none;
    	visibility: hidden;
    	color: black;
    	text-decoration: none;
    }
    
    .thumbnail2 span img{ /*CSS for enlarged image*/
    	border-width: 0;
    	padding: 0px;
    }
    
    .thumbnail2:hover span{ /*CSS for enlarged image*/
    	visibility: visible;
    	top: 200px;
    	left: 60px; /*position where enlarged image should offset horizontally */
    	z-index: 50;
    }
    Last edited by jscheuer1; 08-15-2013 at 09:37 AM. Reason: Formatting

  2. #2
    Join Date
    Sep 2012
    Posts
    22
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    Please disregard this post. I found a work-around. Thanks.

  3. #3
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,951
    Thanks
    43
    Thanked 3,194 Times in 3,157 Posts
    Blog Entries
    12

    Default

    In the future, please use the forum's bbcode tags to indent your code and make it more readable:

    for php code............[php] <?php /* code goes here */ ?> [/php]
    for html...............[html] <!-- markup goes here -->.....[/html]
    for js/css/other.......[code] code goes here................[/code]


    The simple editor has a button for the [code][/code] tag, you may use that:

    #

    Not the #i one, which is really just for highlighting.

    The advanced editor (activated by using the 'Go Advanced' button from the simple editor) has buttons for PHP and HTML code braces as well. But for simplicity, you can just use the [code][/code] tag for any code if you prefer.

    Your applicable post in this thread has already been edited for you by a member of the moderator staff.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

Similar Threads

  1. Image Popup on hover
    By Learning2Code in forum Looking for such a script or service
    Replies: 2
    Last Post: 01-23-2011, 10:46 PM
  2. Hover Popup Image
    By earlp in forum CSS
    Replies: 0
    Last Post: 11-21-2010, 06:18 PM
  3. Can't find hover popup on this site
    By Ready in forum Dynamic Drive scripts help
    Replies: 0
    Last Post: 12-03-2008, 11:31 PM
  4. CSS popup image viewer hover conflict
    By delcour in forum Dynamic Drive scripts help
    Replies: 0
    Last Post: 04-14-2008, 08:05 AM
  5. Mouse hover popup image viewer.
    By starcrossed49 in forum Looking for such a script or service
    Replies: 3
    Last Post: 05-17-2007, 03:34 PM

Bookmarks

Posting Permissions

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