Quick & Dirty: Using LightBox with Image maps
Lightbox technique is very cool way to view enlarged photos, details for text etc. I use Four Level's extension but didn't know if it would work in an image map situation.
It does. I set the lightbox up to link to a normal image, allowing the jquery and other scripts to be copied over to the website directory. Then I updated the image map to contain the reference code to the popup instead of the image.
In the example below, each area mapping has only a 'rel' added, and a ref for the photo to be shown. Quite simple.
<img src="../images/dbfloorplan.jpg" name="floorplan" width="600" height="370" border="0" usemap="#floorplanMap" relalt="" />
<map name="floorplanMap" id="floorplanMap">
<area shape="rect" coords="234,14,314,81" rel="lightbox[tour]" ref="../images/office/bob.jpg" title="Estimator's Office" />
<area shape="rect" coords="357,13,518,81" rel="lightbox[tour]" href="../images/office/elizabeth.jpg" title="Elizabeth's Office" />
<area shape="rect" coords="523,13,591,147"rel="lightbox[tour]" href="../images/office/deck.jpg" title="Trex Decking" />
:
<!--- and so forth --->
:
</map>
Comments (Comment Moderation is enabled. Your comment will not appear until approved.)
[Add Comment]
[Subscribe to Comments]
It's a shame it won't w3c-validate though.
# Posted By Kim
| 4/11/09 6:27 PM
Just change the DOCTYPE TO HTML5. That should work, but some tags will be marked obsolete.
# Posted By Gerald Shields
| 8/16/10 9:17 PM
[Add Comment]
