Hi all,

I'm trying to combine lightbox and image mapping and it's getting ugly.
I was able to rig it so that it works in firefox, but that it doesn't work for Safari (see 2nd line of image mapping). Then I was able to get it to almost work in Safari, but that option doesn't work in firefox (see first line of image mapping).

Here's my coding:

<div id="north_east">

<img src="http://www.webmaster-talk.com/images/maps/northeast.gif" height="528" width="576" border="0" alt="northeast" usemap="#northeast">

<map name="northeast">


<a href="http://www.webmaster-talk.com/images/image-1.jpg" area shape="rect" coords="461,308,341,335" rel="lightbox[northeast_map]" title="Cape Cod Canal, MA"></a>

<area shape="rect" coords="490,185,339,218" title="Sheepscot River, ME" href="http://www.webmaster-talk.com/images/energy_earth.jpg" rel="lightbox[northeast_map]">

<a href="http://www.webmaster-talk.com/images/image-3.jpg" area shape="rect" coords="430,350,290,363" rel="lightbox[northeast_map]" title="Housatonic River, CT"></a>

<a href="http://www.webmaster-talk.com/images/image-4.jpg" area shape="rect" coords="450,370,312,387" rel="lightbox[northeast_map]" title="Long Island Sound"></a>

<a href="http://www.webmaster-talk.com/images/image-5.jpg" area shape="rect" coords="380,392,280,416" rel="lightbox[northeast_map]" title="East River, NY"></a>

<a href="http://www.webmaster-talk.com/images/image-6.jpg" area shape="rect" coords="390,440,250,470" rel="lightbox[northeast_map]" title="Manasquan River, NJ"></a>

</map>
</div>

Here's the site:
http://www.e3-inc.com/web/projects.html
Thanks in advance for any help!

-Ivan

Well, Firefox is throwing a JS error, so you might want to start by debugging that.

Originally Posted by LadynRed

Well, Firefox is throwing a JS error, so you might want to start by debugging that.

a) I am not sure how to check what the JS error is.

b) Firefox isn't my problem; it's working with that browser! My issue is with Safari!

-Ivan

Firebug shows me this - lightbox.js, line 226

The "coords" attribute of the <area shape="rect"> tag is not in the "left,top,right,bottom" format.


[IMG]chrome://firebug/content/blank.gif[/IMG]undefined

this.imageArray[imageNum] has no properties
start(area)lightbox.js (line 226)
(no name)(click clientX=0, clientY=0)lightbox.js (line 194)
(no name)()prototype.js (line 209)
wrapper(click clientX=0, clientY=0)prototype.js (line 3877)

[IMG]chrome://firebug/content/blank.gif[/IMG] while (this.imageArray[imageNum][0] != imageLink.href) { imageNum++;...

We'll have to wait for a Mac user, sorry

Actually, http://www.apple.com/safari/ it's out for windows ^_^ so now you can have all four rendering engines (WebKit/KDE, Gecko, Opera, and IE) on one machine.

Anyway, area is a tag. You're using a tags. http://www.w3schools.com/TAGS/tag_area.asp

Which lightbox are you using?
From what I've seen, it dosn't work well (if at all) with image mapping.

You might want to try something like "facebox" which will work for images, urls and image maps.

*UPDATE*

I cant get the popup to work in FF and I see nothing at all except your background in IE??