Problem with shadowbox on imagemap

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

Problem with shadowbox on imagemap

jocker666
Hello!
I am using shadowbox on two pages. In the first one, I have divs with background images that I made links with rel="shadowbox" and it work just fine.
But on the second page, I am using a big image that I have to map. I want to use the areas of the imagemap as links with shadowbox. To be more precise, I have a pizza image that I have to use as menu, each slice being a "button". Without the shadowbox, it works fine, but if I try to add the shadowbox rel, it doesn't work anymore.
I tried to use areas as links with the shadowbox rel and it works in IE and Chrome, but not in Firefox.
Actualy, when I add the
<a href="..." rel="shadowbox">
 the imagemap stops working in Firefox and it becomes just an image.
Here is the code of the imagemap:
<map id="map" name="map">
	<area shape="poly" coords="357,1,322,309,639,170" href="1.html" title="asd" alt="asd" onMouseOver="if(document.images) document.getElementById('pizza').src= 'img/1_hover.png';" onMouseOut="if(document.images) document.getElementById('pizza').src= 'img/pizza.png';">
	<area shape="poly" coords="639,170,322,309,639,538" href="2.html" title="asd" alt="asd" onMouseOver="if(document.images) document.getElementById('pizza').src= 'img/2_hover.png';" onMouseOut="if(document.images) document.getElementById('pizza').src= 'img/pizza.png';">
	<area shape="poly" coords="639,538,322,309,263,639" href="3.html" title="asd" alt="asd" onMouseOver="if(document.images) document.getElementById('pizza').src= 'img/3_hover.png';" onMouseOut="if(document.images) document.getElementById('pizza').src= 'img/pizza.png';">
	<area shape="poly" coords="263,639,322,309,1,459" href="4.html" title="asd" alt="asd" onMouseOver="if(document.images) document.getElementById('pizza').src= 'img/4_hover.png';" onMouseOut="if(document.images) document.getElementById('pizza').src= 'img/pizza.png';">
	<area shape="poly" coords="1,459,322,309,1,105" href="5.html" title="asd" alt="asd" onMouseOver="if(document.images) document.getElementById('pizza').src= 'img/5_hover.png';" onMouseOut="if(document.images) document.getElementById('pizza').src= 'img/pizza.png';">
	<area shape="poly" coords="1,105,322,309,357,1" href="6.html" title="asd" alt="asd" onMouseOver="if(document.images) document.getElementById('pizza').src= 'img/6_hover.png';" onMouseOut="if(document.images) document.getElementById('pizza').src= 'img/pizza.png';">
  </map>
<img src="img/pizza.png" usemap="#map" id="pizza" alt="">
If I use it like this:

<a rel="shadowbox" href="1.html"><area shape="poly" coords="357,1,322,309,639,170" href="despre.html" title="asd" alt="asd" onMouseOver="if(document.images) document.getElementById('pizza').src= 'img/1_hover.png';" onMouseOut="if(document.images) document.getElementById('pizza').src= 'img/pizza.png';"></a>

it works fine in IE and Chrome, but the imagemap stops working in Firefox and it just shows the simple image.

I would realy apreciate if someone could help me with this.
Reply | Threaded
Open this post in threaded view
|

Re: Problem with shadowbox on imagemap

AHOY
Hi jocker666,

The Shadowbox usage page states this kind of setup is not supported:

http://www.shadowbox-js.com/usage.html

Scroll down to the blue box that states:
"NOTE: [...] Also note that because HTML area tags do not support the rel attribute, you cannot use this method to set them up for use with Shadowbox. Instead, use Shadowbox.setup as described below."
Reply | Threaded
Open this post in threaded view
|

Re: Problem with shadowbox on imagemap

jocker666
Thank you for your so quick response.

So there's no way for a imagemap to work with shadowbox?
Sory if I missunderstood, but if that's what you're saying, that's kind of strange, because it worked in IE and Chrome.

If I understood you wrong, and there is in fact a way to make it work, I'll have to apologise and ask you to explain me how to do it.
Reply | Threaded
Open this post in threaded view
|

Re: Problem with shadowbox on imagemap

dataload
This post was updated on .

Your best bet is to take a look at the image-map example on the shadowbox example page (Edit: fixed link)

Reply | Threaded
Open this post in threaded view
|

Re: Problem with shadowbox on imagemap

AHOY
In reply to this post by jocker666
Hi jocker666,

I'm just quoting what the Shadowbox documentation states.

If you checkout http://www.shadowbox-js.com/usage.html#advanced there are instruction for setting up the <area> tags to work without using the rel attribute using Shadowbox.setup().
Reply | Threaded
Open this post in threaded view
|

Re: Problem with shadowbox on imagemap

AHOY
Note: petemitch's link doesn't work when clicked because of a query parameter appended to the end of the URL but if you copy and paste the URL into your browser, the URL should work.
Reply | Threaded
Open this post in threaded view
|

Re: Problem with shadowbox on imagemap

jocker666
Thank you very much guys!
I'll now start working on this again and I'll come back to let you know what happened.
Reply | Threaded
Open this post in threaded view
|

Re: Problem with shadowbox on imagemap SOLVED

jocker666
I used
Shadowbox.init();
window.onload = function() {
    Shadowbox.setup(document.getElementById("pizza").getElementsByTagName("area"));
}
and it worked perfectly in all three browsers.
But the problem was that now the onMouseOver images didn't show up anymore.
So I set name="hover" in the img tag and I set to every area
onMouseOver="document.hover.src='img/image_name.png';" onMouseOut="document.hover.src='img/pizza.png';"
 instead of
onMouseOver="if(document.images) document.getElementById('pizza').src= 'img/1_hover.png';" onMouseOut="if(document.images) document.getElementById('pizza').src= 'img/pizza.png';"
 .
Now everything is perfect.
Thank you very much! Again. :)