So I'm trying to use the jQuery Map Hilight module with Lightbox2 and running into problems. The code below is based on the default code that comes with the jQuery Map Hilight module. Basically, I'm trying to add some AJAX features to imagemaps, so you can click on an area and have a Lightframe pop up with a form that will let you fill in information about what you clicked on.

In the code below, the link at the very bottom (a standard A tag with rel=lightframe) works just like I expect. But in the image map, the first AREA tag, which uses a very similar configuration, does not work (it treats it like a normal link). From the best I can tell, this code should be correct, but it isn't working so I figured I'd consult some experts!

FYI, if I disable the Map Hilight module, I still have the same problems.

Thoughts?

<p><strong>This is a sample image map with jquery based javascript hilighting:</strong></p>
<p>&nbsp;</p>

<img id="mapimage" class="jq_maphilight {strokeColor:'000000'}" src="/sites/default/files/images/sample.png" usemap="#imagemap" border="0" />

<map name="imagemap" id="myimagemap">

<area href="http://www.google.com/" shape="RECT" coords="168,71,312,143" title="Box #1" rel="lightframe[|width: 640px; height: 380px; scrolling: auto;]"  />

<area href="/" shape="RECT" coords="72,167,168,216" title="Box #2" onMouseOver='$("#box2").addClass("error");' onMouseOut='$("#box2").removeClass("error");' />

<area href="/" shape="RECT" coords="193,167,289,216" title="Box #3" onMouseOver='$("#box3").addClass("error");' onMouseOut='$("#box3").removeClass("error");' />

<area href="/" shape="RECT" coords="313,169,409,217" title="Box #4" onMouseOver='$("#box4").addClass("error");' onMouseOut='$("#box4").removeClass("error");' />

<area href="/" shape="RECT" coords="73,240,169,290" title="Box #5" onMouseOver='$("#box5").addClass("error");' onMouseOut='$("#box5").removeClass("error");' />

<area href="/" shape="RECT" coords="193,240,288,288" title="Box #6" onMouseOver='$("#box6").addClass("error");' onMouseOut='$("#box6").removeClass("error");' />

<area href="/" shape="RECT" coords="313,240,409,289" title="Box #7" onMouseOver='$("#box7").addClass("error");' onMouseOut='$("#box7").removeClass("error");' />

</map>

<span id="box1">Box #1</span> | <span id="box2">Box #2</span> | <span id="box3">Box #3</span> | <span id="box4">Box #4</span> | <span id="box5">Box #5</span> | <span id="box6">Box #6</span> | <span id="box7">Box #7</span>

<a href="http://yahoo.com" rel="lightframe[|width: 640px; height: 380px; scrolling: auto;]" >Lightbox2 test</a>

Comments

stella’s picture

stella commented

Can you send me your sample.png image? I want to use the same setup as you.

korvus’s picture

korvus commented

Attached. It's just a little chart that comes with Map Hilight.

stella’s picture

stella commented

I can't even get the mouseover / mouseout stuff working. :/

Do you have a site where I can see it in action?

stella’s picture

stella commented
Category: support » bug
Status: Active » Fixed

I was finally able to reproduce the problem. It's an issue with the jquery library - it doesn't support area.rel. However I've found a solution and I've checked the changes into CVS. It will be available in the next dev release, available later today. The dev release is stable. It just includes a few more features that makes it difficult to create a clean patch.

Cheers,
Stella

korvus’s picture

korvus commented
Status: Fixed » Closed (fixed)

Stella,

I failed to say this earlier, but your turn-around time was amazing and I really appreciate the fix! Thanks!

Jeff

stella’s picture

stella commented

Released in Lightbox2 5.x-2.8 and 6.x-1.8.

Cheers,
Stella

ajlowndes’s picture

ajlowndes commented
Title: Problem getting Lightbox2 to work with ImageMaps » just making this clear

so now let me get this straight: one of Shadowbox's listed features is that is supports imagemaps via the use of the "area" tag. Unfortunately I have been playing with Shadowbox for days now and can't get it to work. I know that Lightbox2 has much better documentation, but so far I have held the belief that it won't work on imagemaps (because it is not included in the feature list), so I haven't tried it. Am I right in concluding after reading this that Lightbox2's rel=lightbox attribute will now work from inside an imagemap just like Shadowbox is supposed to?

ajlowndes’s picture

ajlowndes commented
Title: just making this clear » Problem getting Lightbox2 to work with ImageMaps

why did I manage to change the title of this entire forum topic just by changing what was in the "Issue title" box? I changed it back to what it was, but still... I don't think i should be able to do that...

stella’s picture

stella commented

Yes lightbox2 supports area tags.