JavaScript Popout with Imagemap

JavaScript
1

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:

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

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…

3

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.

4

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

5

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!

6

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

Hey mate,

Here is what i mean…i’ve tried and tested it so i know it works:


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

8

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:

<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.

9

I’d recommend using a standard jquery lightbox plugin and reference the area tags of the image map…

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