Pop-it Menu - with image map
srcript: Pop-it Menu
http://www.dynamicdrive.com/dynamicindex1/popit.htm
Hi - I'm using Pop-it with an image map. Everything looks good in IE6 but not so in Firefox (FF). The menu doesn't display nor are the links in the image map even recognized by the browser. (BTW, the original Pop-it script, not using it with an image map, works great in FF for my other scripts).
I can't link to the page I'm working with because it's on an internal server, but I'll paste my code below. I'm wondering - is Firefox buggy with image maps? If so, is there a workaround anyone's figured out? As I said, in IE, it works great. Doesn't work in Macs either, but I'm more interested in getting FF to work. Many thanks in advance.
First, the pop-it code that goes between the <head></head> tags. I'm only listing one linkset[] array element to save space (there are 10):
<style type="text/css">
#popitmenu{
position: absolute;
background-color: #ffffff;
border:1px solid #dbbf68;
padding: 6px;
font: normal 10px Verdana;
color: #333333;
line-height: 13px;
z-index: 100;
visibility: hidden;
}
#popitmenu a{
text-decoration: none;
color: #993300;
font-size:10px;
font-weight:bold;
}
#popitmenu a:hover { TEXT-DECORATION: underline;}
/* #popitmenu a:hover{ */ /*hover background color*/
/*background-color: #CCFF9D;
} */
</style>
<script type="text/javascript">
/***********************************************
* Pop-it menu- © Dynamic Drive (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/
var defaultMenuWidth="200px" //set default menu width.
var linkset=new Array()
//SPECIFY MENU SETS AND THEIR LINKS. FOLLOW SYNTAX LAID OUT
linkset[1]='<b>Produce</b><br>'
linkset[1]+='Discover a true taste of the season with our market-fresh fruits and vegetables, organically grown for good taste by family farmers.'
////No need to edit beyond here
var ie5=document.all && !window.opera
var ns6=document.getElementById
if (ie5||ns6)
document.write('<div id="popitmenu" onMouseover="clearhidemenu();" onMouseout="dynamichide(event)"></div>')
function iecompattest(){
return (document.compatMode && document.compatMode.indexOf("CSS")!=-1)? document.documentElement : document.body
}
function showmenu(e, which, optWidth){
if (!document.all&&!document.getElementById)
return
clearhidemenu()
menuobj=ie5? document.all.popitmenu : document.getElementById("popitmenu")
menuobj.innerHTML=which
menuobj.style.width=(typeof optWidth!="undefined")? optWidth : defaultMenuWidth
menuobj.contentwidth=menuobj.offsetWidth
menuobj.contentheight=menuobj.offsetHeight
eventX=ie5? event.clientX : e.clientX
eventY=ie5? event.clientY : e.clientY
//Find out how close the mouse is to the corner of the window
var rightedge=ie5? iecompattest().clientWidth-eventX : window.innerWidth-eventX
var bottomedge=ie5? iecompattest().clientHeight-eventY : window.innerHeight-eventY
//if the horizontal distance isn't enough to accomodate the width of the context menu
if (rightedge<menuobj.contentwidth)
//move the horizontal position of the menu to the left by it's width
menuobj.style.left=ie5? iecompattest().scrollLeft+eventX-menuobj.contentwidth+"px" : window.pageXOffset+eventX-menuobj.contentwidth+"px"
else
//position the horizontal position of the menu where the mouse was clicked
menuobj.style.left=ie5? iecompattest().scrollLeft+eventX+"px" : window.pageXOffset+eventX+"px"
//same concept with the vertical position
if (bottomedge<menuobj.contentheight)
menuobj.style.top=ie5? iecompattest().scrollTop+eventY-menuobj.contentheight+"px" : window.pageYOffset+eventY-menuobj.contentheight+"px"
else
menuobj.style.top=ie5? iecompattest().scrollTop+event.clientY+"px" : window.pageYOffset+eventY+"px"
menuobj.style.visibility="visible"
return false
}
function contains_ns6(a, b) {
//Determines if 1 element in contained in another- by Brainjar.com
while (b.parentNode)
if ((b = b.parentNode) == a)
return true;
return false;
}
function hidemenu(){
if (window.menuobj)
menuobj.style.visibility="hidden"
}
function dynamichide(e){
if (ie5&&!menuobj.contains(e.toElement))
hidemenu()
else if (ns6&&e.currentTarget!= e.relatedTarget&& !contains_ns6(e.currentTarget, e.relatedTarget))
hidemenu()
}
function delayhidemenu(){
delayhide=setTimeout("hidemenu()",500)
}
function clearhidemenu(){
if (window.delayhide)
clearTimeout(delayhide)
}
if (ie5||ns6)
document.onclick=hidemenu
</script>
------------------------------------
Now the image and code I'm using for the image map:
<img align="right" src="/images/locations/rd/rd_floorplan_400.gif" width="400" height="416" border="0" usemap="#Map">
<map name="Map">
<a href="#" onMouseOver="showmenu(event,linkset[1])" onMouseOut="delayhidemenu()" class="subnavbold"><area shape="circle" coords="345,295,8"></a>
</map>
CSS Codes
Reply With Quote
Bookmarks