SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Member
    Join Date
    May 2010
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    JavaScript Popout with Imagemap

    Does anyone have a reference to a site or a how-to guide with something that has a simple image click that will do something to the lightbox effect but then the actual lightbox will be an imagemap? An example would be like the SalesForce image found on:

    http://www.salesforce.com/crm/products.jsp

    Obviously, I'm looking to use jQuery or Javascript instead of Flash. Is this possible to script? I would like the image to pop out (the image that is popping out does not need multiple "mapped" areas). The image that DOES pop out does need multiple areas.

    How do I accomplish this in reality?

    (Click "expand" -- this is all I want of my FIRST image, my second image I want an imagemap...).

  2. #2
    SitePoint Enthusiast
    Join Date
    Apr 2009
    Posts
    73
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'd recommend using a standard jquery lightbox plugin and reference the area tags of the image map...

    e.g - $("#myMap area").lightbox();

  3. #3
    SitePoint Member
    Join Date
    May 2010
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question

    Quote Originally Posted by SlickAU View Post
    I'd recommend using a standard jquery lightbox plugin and reference the area tags of the image map...

    e.g - $("#myMap area").lightbox();
    Thanks for the reply. The two major Lightbox's I know are Thickbox (jQuery based) and Lightbox 2.

    Now, for Thickbox (http://jquery.com/demo/thickbox/), you're basically saying if I use it's code base I can just do the following (for a "single image") and it will just work:

    Step one:

    Code:
    <a href="images/single.jpg" title="This single image will pop out to a lightbox" class="thickbox"><img src="images/single_t.jpg" alt="Single Image"/></a>
    Step two, the lightbox/imagemap.

    I need to add the aforesaid area tags in the .js file? I just don't understand where. So, that's my main question. That's the problem I ran into with Lightbox 2 as well.

    My next step would just be to move to Fancybox or ColorBox and try an entirely different method, but I was looking for recommendations on what others would do in such a case.

  4. #4
    SitePoint Enthusiast
    Join Date
    Apr 2009
    Posts
    73
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey mate,

    Here is what i mean...i've tried and tested it so i know it works:

    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">
    <head>
        <title></title>
        <link rel="Stylesheet" type="text/css" href="styles/colorbox.css" />
        <script type="text/javascript" src="scripts/jquery-1.4.1.min.js"></script>
        <script type="text/javascript" src="scripts/jquery.colorbox-min.js"></script>
        <script type="text/javascript">
            $(function () {
                $("#kRuddMap area").colorbox({ width: "50%", height: "50%", iframe: true });
            });
        </script>
    </head>
    <body>
        
        <img src="images/kevin-rudd.jpg" usemap="#kRuddMap" alt="" />
    
        <map name="kRuddMap" id="kRuddMap">
            <area shape="rect" coords="0,0,234,225" href="http://www.google.com.au" title="Google" />
            <area shape="rect" coords="234,0,468,225" href="http://www.yahoo.com.au" title="Yahoo" />
        </map>
    
    </body>
    </html>
    See attached for the sample code.

    Good luck
    Attached Files Attached Files

  5. #5
    SitePoint Member
    Join Date
    May 2010
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey Slick and all,

    This appears to have an imagemap pop out to a lightbox. I want the inverse. Basically, the first image be the popout (one image popout to the lightbox which will contain an imagemap which will be linked to multiple webpages).

    Do you understand what I mean?

    Image > Lightbox > Inside lightbox will be an image with areas (imagemap) and when areas are clicked you are taken to those mapped areas.

    So, basically a "lightbox;" however, the popped out lightbox will CONTAIN the imagemap. Not the first clicked image on the webpage...

  6. #6
    SitePoint Enthusiast
    Join Date
    Apr 2009
    Posts
    73
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Your easiest solution then is to just link have the lightbox open up a seperate html file for each popup...

    e.g -

    click image -> opens imageMapA.html (this file contains your image with image map)

  7. #7
    SitePoint Member
    Join Date
    May 2010
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Is there an existing lightbox library or other application that you recommend for this purpose? My main concern is the resizing when the lightbox pops up.

    Thanks for all of your responses!

  8. #8
    SitePoint Enthusiast
    Join Date
    Apr 2009
    Posts
    73
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If your expecting different sized popups for the lightwindow then it's probably best you use either an ajax call (i'd recommend using colorbox - http://colorpowered.com/colorbox/) and have your markup in a seperate html file OR if you dont have many things that you will be using the lightbox for you can place them on the original page and just load them as inline HTML

  9. #9
    SitePoint Member
    Join Date
    May 2010
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm just expecting simple webpages to pop up. They are going to be links to the internal site (that was referenced in the initial image). Again, it's kind of like salesforce.com does in the initial message, just not using Flash.

    Preferably, I'd like them to load in the original Window the lightbox loaded from, but I do not even know if this is possible. I can test it and see though.


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
  •