I got an image map to work fairly easily. Let me share the code I used with you. It seems to work cross browser. If you find one that doesn't work, let me know. Here is the code I used: In the <body> I put this image and map:
<!--flicker show image--> <div id="apDiv1"><img src="images/flickershow.jpg" width="900" height="550" border="0" usemap="#Map" /> <map name="Map" id="Map"> <area shape="poly" coords="282,237,454,210,473,334,465,384,313,413" href="#TB_inline?height=344&width=425&inlineId=video1" class="thickbox"> <area shape="poly" coords="564,134,502,302,611,341,679,341,730,196" href="#TB_inline?height=344&width=425&inlineId=video2" class="thickbox"> </map></div> <!--end image and map--> Now you need some items to link to the coordinates. So I linked them to 2 videos like this: (Note how these objects are set to hidden!) <!--embedded video1 code hidden--> <div id="video1" style="display:none"> <object width="425" height="344"><param name="movie" value="http://www.youtube.com/v/7EbIJjZx13c&hl=en&fs=1&rel=0";></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><param name="wmode" value="transparent"></param><embed src="http://www.youtube.com/v/7EbIJjZx13c&hl=en&fs=1&rel=0"; type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="344" wmode="transparent"></embed></object> </div> <!--end embedd video object--> <!--embedded video2 code hidden--> <div id="video2" style="display:none"> <object width="425" height="344"><param name="movie" value="http://www.youtube.com/v/ZXARDdJyFBA&hl=en&fs=1&rel=0";></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><param name="wmode" value="transparent"></param><embed src="http://www.youtube.com/v/ZXARDdJyFBA&hl=en&fs=1&rel=0"; type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="344" wmode="transparent"></embed></object> </div> </body> The hidden objects are linked to the coordinates via their DivID. In this case "video1" and "video2". The image maps link to "inlineId" and that is the same name as the DivID of the file I set to hidden. So the browser now reads the image map and knows its content is Inline (on the same page and is labeled with "YourOwnID".) Those linked ID's are set to hidden and so they don't display until the image map is clicked. Then the content is displayed in the Greybox. Neat! -------------------------------------------------- From: "Logos" <[email protected]> Sent: Friday, April 17, 2009 9:25 AM To: "GreyBox" <[email protected]> Subject: Re: Image map and firefox not working > > Thanks for sharing that, man! And that is indeed bizarre...I wonder > why the wrapper function is required? > > -- > Tyler Style > http://malthusian-solutions.com > http://nirdvana.com > > exstock wrote: >> On Mar 11, 9:17 pm, Logos <[email protected]> wrote: >> > Open the error console in Firefox (CTRL-SHIFT-J) and correct the >> > errors that it is showing :) >> >> Good answer, except that I'm having the exact same problem in Firefox, >> and despite what the error console says, my coordinates are in the >> correct format. >> >> I've read the previous messages on the subject, and grew extremely >> frustrated that every thread seemed to end with something along the >> lines of, "Did anyone ever get this to work?" Maddening. So, now >> that I've figured out something that works, I will *gasp* share it >> here. >> >> Using the onclick methods on the advanced usage page didn't work for >> me, and neither did the error console. What did work, even though it >> has made my oldfart code just that much uglier, is this: >> >> <html> >> <head> >> <script type="text/javascript"> >> function greyBoxOverlay() { >> GB_showCenter("Caption", "site.html", 123, 456); >> } >> </script> >> >> </head> >> <body> >> >> <A HREF="#"> >> <IMG SRC="../images/test1.jpg" WIDTH="300" HEIGHT="500" BORDER="0" >> ALT="" USEMAP="#test1_Map" /></A> >> <MAP NAME="test1_Map"> >> <AREA SHAPE="rect" ALT="1" COORDS="100,100,200,200" >> HREF="javascript:greyBoxOverlay()" /> >> </MAP> >> >> </body> >> </html> >> >> I did not think this up. I saw it in the code at the bottom of >> someone else's post on a different topic (P+sGuy) and I am not SMRT, >> but by gosh and by golly the @(*#^(@&^ thing finally freakin' works. >> Hope this helps someone, and they don't waste tons of time trying to >> figure this out like I did. >> >> -E House >> Aphasiacs Mauve! > > > --~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "GreyBox" group. To post to this group, send email to [email protected] To unsubscribe from this group, send email to [email protected] For more options, visit this group at http://groups.google.com/group/greybox?hl=en -~----------~----~----~----~------~----~------~--~---
