PDA

View Full Version : Pop-it Menu - with image map



nancye
05-10-2006, 01:06 AM
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>

tornpaperbag
05-10-2006, 01:49 AM
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>

Your image map area should look like this:


<area shape="circle" coords="345,295,8" href="#" onMouseOver="showmenu(event,linkset[1])" onMouseOut="delayhidemenu()" class="subnavbold">

nancye
05-10-2006, 04:32 PM
I wondered about that ... Thank you so much for your help - works great. :)