IMAGE MAP. PLEASE HELP

classic Classic list List threaded Threaded
7 messages Options
Reply | Threaded
Open this post in threaded view
|

IMAGE MAP. PLEASE HELP

petegoose
How on earth do I get shadowbox to work with image maps. I was originally using lightbox but could not get it to work when using image maps and area tags so I switched to shadowbox because it boasted this feature. I have set everything up correctly and it works perfectly except when I try and link to an image from a mapped area.

I have look at the code on the shadowbox website that demonstrates the use of mapping and there is no rel tag, strange?

If any one can help I would really appreciate it.

Thanks
Reply | Threaded
Open this post in threaded view
|

Re: IMAGE MAP. PLEASE HELP

IchDu
Look at the top of the page (http://mjijackson.com/shadowbox/index.html (sourcecode)):
Shadowbox.setup(document.getElementById('hongkongmap').getElementsByTagName('area'));
so he has setup the image map!
Reply | Threaded
Open this post in threaded view
|

Re: IMAGE MAP. PLEASE HELP

Mahdi Montgomery
I had the same issue.. This was the solution for me:

$(document).ready(function(){
    var img = $("img[usemap]");
    usemap = img.get(0).getAttribute('usemap');
    map = $('map[name="'+usemap.substr(1)+'"]');
    Shadowbox.setup($(map).find('area[coords]'));
    Shadowbox.init();
});


Using a standard map setup, and Shadowbox 3.0.3 - hope this helps someone!

The following code was taken from: http://davidlynch.org/js/maphilight/docs/demo_usa.html

    var img = $("img[usemap]");
    usemap = img.get(0).getAttribute('usemap');
    map = $('map[name="'+usemap.substr(1)+'"]');

Cheers
Reply | Threaded
Open this post in threaded view
|

Re: IMAGE MAP. PLEASE HELP

TheVul
Works like a dream. Thanks Mahdi. :)
Reply | Threaded
Open this post in threaded view
|

Re: IMAGE MAP. PLEASE HELP

manfer
There is an example of image-map in github where the code is stored:
https://github.com/mjijackson/shadowbox/blob/master/examples/image-map.html
Reply | Threaded
Open this post in threaded view
|

Re: IMAGE MAP. PLEASE HELP

TRI0N
Now that I got this to actually work with an Image Map how do I control the size of the shadow box? Since I can't set the initial size with rel="" there has to be a way to set a standard width and height to this.
Reply | Threaded
Open this post in threaded view
|

Re: IMAGE MAP. PLEASE HELP

TRI0N
Based on mjijacksons example the way to define the height and width is:


Shadowbox.init();

window.onload = function() {
Shadowbox.setup(document.getElementById("mbgc_layout").getElementsByTagName("area"), {
height: 500,
width: 500
});
}

Now that will open Image Map files to your desired height and width.