Challenge: how to bypass shadowbox with image map "area" getElement command!

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

Challenge: how to bypass shadowbox with image map "area" getElement command!

greg_bonnier
Hi there, I have a whole website made with image maps, including external links... After a long research, i've finally got to make it work... One little problem tho... With the following command on:

window.onload = function(){ Shadowbox.setup(document.getElementById('map').getElementsByTagName('area'))

My pictures load just fin in the shadowbox... But now, all my URLs also using image maps 'area' tags (i.e. back button and external links) are trying to load in shadowbox!

So there must be a way to force the bypass of shadowbox...

Considering the "rel" tag does not affect this, removing it is useless... It still tries to load in shadowbox because the command found its 'area' tag and it's part of the same 'map'.

SO, how do I get an external link, made with an image map to bypass shadowbox?

Here's my simple code...

<area shape="rect" coords="192,345,269,368" href="index.html" target="_blank" />

Thanks!
Reply | Threaded
Open this post in threaded view
|

Re: Challenge: how to bypass shadowbox with image map "area" getElement command!

HenzeBerkheij
so..basically you want a picture to open shadowbox unless you click on an other part of the image??

anyway.. the getElementsByTagname returns an array of htmlobjects...what you can do is loop through them and filter the ones out you don't want to hook Shadowbox on...if that is what you want to achieve...

the best method is loop through them and put the ones you want to add to shadowbox into a new array and then put that array in the Shadowbox.setup.
Reply | Threaded
Open this post in threaded view
|

Re: Challenge: how to bypass shadowbox with image map "area" getElement command!

greg_bonnier
i'm not sure I got that... But I think you got what I wanted to do... Yes indeed the command goes and search out for a bunch of HTML objects, while not all of those same object times, in this case "area", should trigger Shadowbox...

So how do I loop them?

What do you mean by putting them into an array?

Thanks.
Reply | Threaded
Open this post in threaded view
|

Re: Challenge: how to bypass shadowbox with image map "area" getElement command!

HenzeBerkheij
well..like this:

var areas = document.getElementById('map').getElementsByTagName('area');
var shadowboxAreas = new array();
for (i=0;i<areas.length;i++){
    if(areas[i].rel.substr(0,8)=="Shadowbox"){
         shadowboxAreas[] = areas[i];
    }
}

Shadowbox.setup(shadowboxAreas);

something like this? this is the idea..code is not tested, so i am not sure if this is bugfree, but this is the idea..and if debugged, this is how it should work!
Reply | Threaded
Open this post in threaded view
|

Re: Challenge: how to bypass shadowbox with image map "area" getElement command!

Daniel B
In reply to this post by greg_bonnier
Hi, if you want URL to work with shadowbox aswell as the pictures you can just put in a iframe-player:

<script type="text/javascript"> Shadowbox.init({ language: 'sv', players: ['img', 'wmp', 'iframe'] }); </script>
At least this solved my problem, when I had trouble with area that had links to both pictures, webpages, pdf etc. (The external webpage will open in the shadowbox-layer.)