PDA

View Full Version : Pls Help on drop down menu with image map



loveandhatred
06-26-2006, 04:07 AM
Hi, i used these codes to have a drop down menu on my image, but the menu did not go below the image. It always stay on the top, is there any way to position it?

here's my code:
[/Quote]
<script type="text/javascript">

/***********************************************
* AnyLink Drop Down Menu- Dynamic Drive (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/

//Contents for Site
var menu1=new Array()
menu1[0]='<a href="http://myurl1.htm" target="main">Me</a>'
menu1[1]='<a href="http://myurl2.htm" target="main">FAQs & Terms</a>'
menu1[2]='<a href="http://myurl3.htm" target="main">Archieves</a>'

var menuwidth='165px' //default menu width
var menubgcolor='lightyellow' //menu bgcolor
var disappeardelay=250 //menu disappear speed onMouseout (in miliseconds)
var hidemenu_onclick="yes" //hide menu when user clicks within menu?

/////No further editting needed

var ie4=document.all
var ns6=document.getElementById&&!document.all

if (ie4||ns6)
document.write('<div id="dropmenudiv" style="visibility:hidden;width:'+menuwidth+';background-color:'+menubgcolor+'" onMouseover="clearhidemenu()" onMouseout="dynamichide(event)"></div>')

function getposOffset(what, offsettype){
var totaloffset=(offsettype=="left")? what.offsetLeft : what.offsetTop;
var parentEl=what.offsetParent;
while (parentEl!=null){
totaloffset=(offsettype=="left")? totaloffset+parentEl.offsetLeft : totaloffset+parentEl.offsetTop;
parentEl=parentEl.offsetParent;
}
return totaloffset;
}


function showhide(obj, e, visible, hidden, menuwidth){
if (ie4||ns6)
dropmenuobj.style.left=dropmenuobj.style.top="-500px"
if (menuwidth!=""){
dropmenuobj.widthobj=dropmenuobj.style
dropmenuobj.widthobj.width=menuwidth
}
if (e.type=="click" && obj.visibility==hidden || e.type=="mouseover")
obj.visibility=visible
else if (e.type=="click")
obj.visibility=hidden
}

function iecompattest(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}

function clearbrowseredge(obj, whichedge){
var edgeoffset=0
if (whichedge=="rightedge"){
var windowedge=ie4 && !window.opera? iecompattest().scrollLeft+iecompattest().clientWidth-15 : window.pageXOffset+window.innerWidth-15
dropmenuobj.contentmeasure=dropmenuobj.offsetWidth
if (windowedge-dropmenuobj.x < dropmenuobj.contentmeasure)
edgeoffset=dropmenuobj.contentmeasure-obj.offsetWidth
}
else{
var topedge=ie4 && !window.opera? iecompattest().scrollTop : window.pageYOffset
var windowedge=ie4 && !window.opera? iecompattest().scrollTop+iecompattest().clientHeight-15 : window.pageYOffset+window.innerHeight-18
dropmenuobj.contentmeasure=dropmenuobj.offsetHeight
if (windowedge-dropmenuobj.y < dropmenuobj.contentmeasure){ //move up?
edgeoffset=dropmenuobj.contentmeasure+obj.offsetHeight
if ((dropmenuobj.y-topedge)<dropmenuobj.contentmeasure) //up no good either?
edgeoffset=dropmenuobj.y+obj.offsetHeight-topedge
}
}
return edgeoffset
}

function populatemenu(what){
if (ie4||ns6)
dropmenuobj.innerHTML=what.join("")
}


function dropdownmenu(obj, e, menucontents, menuwidth){
if (window.event) event.cancelBubble=true
else if (e.stopPropagation) e.stopPropagation()
clearhidemenu()
dropmenuobj=document.getElementById? document.getElementById("dropmenudiv") : dropmenudiv
populatemenu(menucontents)

if (ie4||ns6){
showhide(dropmenuobj.style, e, "visible", "hidden", menuwidth)
dropmenuobj.x=getposOffset(obj, "left")
dropmenuobj.y=getposOffset(obj, "top")
dropmenuobj.style.left=dropmenuobj.x-clearbrowseredge(obj, "rightedge")+"px"
dropmenuobj.style.top=dropmenuobj.y-clearbrowseredge(obj, "bottomedge")+obj.offsetHeight+"px"
}

return clickreturnvalue()
}

function clickreturnvalue(){
if (ie4||ns6) return false
else return true
}

function contains_ns6(a, b) {
while (b.parentNode)
if ((b = b.parentNode) == a)
return true;
return false;
}

function dynamichide(e){
if (ie4&&!dropmenuobj.contains(e.toElement))
delayhidemenu()
else if (ns6&&e.currentTarget!= e.relatedTarget&& !contains_ns6(e.currentTarget, e.relatedTarget))
delayhidemenu()
}

function hidemenu(e){
if (typeof dropmenuobj!="undefined"){
if (ie4||ns6)
dropmenuobj.style.visibility="hidden"
}
}

function delayhidemenu(){
if (ie4||ns6)
delayhide=setTimeout("hidemenu()",disappeardelay)
}

function clearhidemenu(){
if (typeof delayhide!="undefined")
clearTimeout(delayhide)
}

if (hidemenu_onclick=="yes")
document.onclick=hidemenu

</script>
[/QUOTE]

i target them to my inlineframe called "main"
here's the other code :

[/QUOTE]
<tr>
<td width="100%" height="10" colspan="2">
<img src="http://myurl/pink4.jpg" usemap="#pink4.jpg" style="border: 0;" width="818" height="54" />

<map name="pink4.jpg">

<area shape="rect" coords="29,18,74,36" "default.htm" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu1, '150px')" onMouseout="delayhidemenu()" target="main" alt="about" />

</map>

</td>
</tr>
[/QUOTE]

help pls....no matter how i changed it, whenever i put my cursor on the image, the drop down menu will always appear on top and not below the image. :confused:

jscheuer1
06-27-2006, 06:44 AM
This has come up before and is a little tricky. The modifications I came up with will only work with rect shapes and the image and the map it uses must be in the same element (I see your demo already fits all these requirements):


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">

#dropmenudiv{
position:absolute;
border:1px solid black;
border-bottom-width: 0;
font:normal 13px Times New Roman;
line-height:17px;
z-index:100;
}

#dropmenudiv a, span{
color: black;
width: 149;
display: block;
text-indent: 2px;
border-bottom: 1px solid black;
padding: 1px 0;
text-decoration: none;
font-weight: none;
width:100%
}

#dropmenudiv a:hover{ /*hover background color*/
background-color: #3399FF;
color: white;
}


</style>
<script type="text/javascript">

/***********************************************
* AnyLink Drop Down Menu- Dynamic Drive (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for full source code
* Modified in http://www.dynamicdrive.com/forums by jscheuer1
* To work with image maps (rect shapes only)
***********************************************/

var menu1=new Array()
menu1[0]='<a href="http://myurl1.htm" target="main">Me</a>'
menu1[1]='<a href="http://myurl2.htm" target="main">FAQs & Terms</a>'
menu1[2]='<a href="http://myurl3.htm" target="main">Archieves</a>'

var menuwidth='165px' //default menu width
var menubgcolor='lightyellow' //menu bgcolor
var disappeardelay=250 //menu disappear speed onMouseout (in miliseconds)
var hidemenu_onclick="yes" //hide menu when user clicks within menu?

/////No further editing needed

var ie4=document.all
var ns6=document.getElementById&&!document.all
var mapflag=0

if (ie4||ns6)
document.write('<div id="dropmenudiv" style="visibility:hidden;width:'+menuwidth+';background-color:'+menubgcolor+'" onMouseover="clearhidemenu()" onMouseout="dynamichide(event)"></div>')

function getposOffset(what, offsettype){
if (what.parentNode&&typeof what.parentNode.tagName!=='undefined'&&what.parentNode.tagName.toLowerCase()=='map'){
mapflag=1;
var ocoords=what.coords.split(',')
var totaloffset=(offsettype=="left")? ocoords[0]*1 : ocoords[3]*1;
var mapIm=what.parentNode.parentNode.getElementsByTagName('img')
for (var i_tem = 0; i_tem < mapIm.length; i_tem++)
if (mapIm[i_tem].getAttribute('usemap', 0)&&mapIm[i_tem].getAttribute('usemap', 0).replace(/^.*(#.*)/g,'$1')=='#'+what.parentNode.name)
var parentEl=mapIm[i_tem];
}
else {
mapflag=0;
var totaloffset=(offsettype=="left")? what.offsetLeft : what.offsetTop;
var parentEl=what.offsetParent;
}
while (parentEl!=null){
totaloffset=(offsettype=="left")? totaloffset+parentEl.offsetLeft : totaloffset+parentEl.offsetTop;
parentEl=parentEl.offsetParent;
}
return totaloffset;
}


function showhide(obj, e, visible, hidden, menuwidth){
if (ie4||ns6)
dropmenuobj.style.left=dropmenuobj.style.top=-500
if (menuwidth!=""){
dropmenuobj.widthobj=dropmenuobj.style
dropmenuobj.widthobj.width=menuwidth
}
if (e.type=="click" && obj.visibility==hidden || e.type=="mouseover")
obj.visibility=visible
else if (e.type=="click")
obj.visibility=hidden
}

function iecompattest(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}

function clearbrowseredge(obj, whichedge){
var edgeoffset=0
if (whichedge=="rightedge"){
var windowedge=ie4 && !window.opera? iecompattest().scrollLeft+iecompattest().clientWidth-15 : window.pageXOffset+window.innerWidth-15
dropmenuobj.contentmeasure=dropmenuobj.offsetWidth
if (windowedge-dropmenuobj.x < dropmenuobj.contentmeasure)
edgeoffset=dropmenuobj.contentmeasure-obj.offsetWidth
}
else{
var topedge=ie4 && !window.opera? iecompattest().scrollTop : window.pageYOffset
var windowedge=ie4 && !window.opera? iecompattest().scrollTop+iecompattest().clientHeight-15 : window.pageYOffset+window.innerHeight-18
dropmenuobj.contentmeasure=dropmenuobj.offsetHeight
if (windowedge-dropmenuobj.y < dropmenuobj.contentmeasure){ //move up?
edgeoffset=dropmenuobj.contentmeasure+obj.offsetHeight
if ((dropmenuobj.y-topedge)<dropmenuobj.contentmeasure) //up no good either?
edgeoffset=dropmenuobj.y+obj.offsetHeight-topedge
}
}
return edgeoffset
}

function populatemenu(what){
if (ie4||ns6)
dropmenuobj.innerHTML=what.join("")
}


function dropdownmenu(obj, e, menucontents, menuwidth){
if (window.event) event.cancelBubble=true
else if (e.stopPropagation) e.stopPropagation()
clearhidemenu()
dropmenuobj=document.getElementById? document.getElementById("dropmenudiv") : dropmenudiv
populatemenu(menucontents)

if (ie4||ns6){
showhide(dropmenuobj.style, e, "visible", "hidden", menuwidth)
dropmenuobj.x=getposOffset(obj, "left")
dropmenuobj.y=getposOffset(obj, "top")
dropmenuobj.style.left=dropmenuobj.x-clearbrowseredge(obj, "rightedge")-1+"px"
var oHeight=mapflag? 0 : obj.offsetHeight+46
dropmenuobj.style.top=dropmenuobj.y-clearbrowseredge(obj, "bottomedge")+oHeight+"px"
}

return clickreturnvalue()
}

function clickreturnvalue(){
if (ie4||ns6) return false
else return true
}

function contains_ns6(a, b) {
while (b.parentNode)
if ((b = b.parentNode) == a)
return true;
return false;
}

function dynamichide(e){
if (ie4&&!dropmenuobj.contains(e.toElement))
delayhidemenu()
else if (ns6&&e.currentTarget!= e.relatedTarget&& !contains_ns6(e.currentTarget, e.relatedTarget))
delayhidemenu()
}

function hidemenu(e){
if (typeof dropmenuobj!="undefined"){
if (ie4||ns6)
dropmenuobj.style.visibility="hidden"
}
}

function delayhidemenu(){
if (ie4||ns6)
delayhide=setTimeout("hidemenu()",disappeardelay)
}

function clearhidemenu(){
if (typeof delayhide!="undefined")
clearTimeout(delayhide)
}

if (hidemenu_onclick=="yes")
document.onclick=hidemenu

</script>
</head>
<body>
<img src="http://myurl/pink4.jpg" usemap="#pink4.jpg" style="border: 0;" width="818" height="54" />

<map name="pink4.jpg">

<area shape="rect" coords="29,18,74,36" "default.htm" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu1, '150px')" onMouseout="delayhidemenu()" target="main" alt="about" />

</map>
</body>
</html>

sjl18gb
05-01-2007, 03:19 PM
not to reopen this....but this is what i've been trying to do. The only change that i need is for the menu to appear on the right of the mapped spot, as opposed to below to mapped spot.

Thanks!

paranoidandroid
02-19-2009, 08:14 AM
Hello.. I copied the code in the text box verbatim but the drop down menu STILL does not show below the area map but rather at the top left corner of the page. Below is the code for the entire page:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>


<style text="text/css">
<!--
body,tr,td {font-size: 10px; font-family:verdana; color:#333333;
direction:;
background-color:#FFFFFF;
background-attachment:fixed;
scrollbar-arrow-color: #212025;
scrollbar-track-color: #212025;
scrollbar-face-color: #212025;
scrollbar-highlight-color: #212025;
scrollbar-3dlight-color: #212025;
scrollbar-darkshadow-color: #212025;
scrollbar-shadow-color: #212025;
}
#pict { text-align:center;height:0% }
}
b{font-family: georgia, tahoma, arial, century gothic, couries new;

font-size: 10px; color:# 663333;}
A:link { text-decoration: none; cursor: crosshair; color:"996666"; }
A:visited { text-decoration: none; cursor: crosshair; color:"#996666"; }
A:hover { text-decoration: none; cursor: crosshair; color:"#663333";

filter:blur(Strength=15,Direction=90); height:0; }

-->input,textarea{color:#663333;font-siizee:10px;font-family:verdana;backgro

und:;border:1PT SOLID #663333}
--->

#dropmenudiv{
position:absolute;z-index:999;
border:1px solid black;
border-bottom-width: 0;
font:normal 13px Times New Roman;
line-height:17px;
z-index:100;
}

#dropmenudiv a, span{
color: white;
width: 149;
display: block;
text-indent: 2px;
border-bottom: 1px solid white;
padding: 1px 0;
text-decoration: none;
font-weight: none;
width:100%
}

#dropmenudiv a:hover{ /*hover background color*/
background-color: #3399FF;
color: white;
}


</STYLE>

<script type="text/javascript">

/***********************************************
* AnyLink Drop Down Menu- Dynamic Drive (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for full source code
* Modified in http://www.dynamicdrive.com/forums by jscheuer1
* To work with image maps (rect shapes only)
***********************************************/

var menu1=new Array()
menu1[0]='<a href="http://myurl1.htm" target="main">Me</a><br>'
menu1[1]='<a href="http://myurl2.htm" target="main">FAQs & Terms</a><br>'
menu1[2]='<a href="http://myurl3.htm" target="main">Archieves</a><br>'

var menuwidth='165px' //default menu width
var menubgcolor='#000066' //menu bgcolor
var disappeardelay=250 //menu disappear speed onMouseout (in miliseconds)
var hidemenu_onclick="yes" //hide menu when user clicks within menu?

/////No further editing needed

var ie4=document.all
var ns6=document.getElementById&&!document.all
var mapflag=0

if (ie4||ns6)
document.write('<div id="dropmenudiv"

style="visibility:hidden;width:'+menuwidth+';background-color:'+menubgcolor+

'" onMouseover="clearhidemenu()" onMouseout="dynamichide(event)"></div>')

function getposOffset(what, offsettype){
if (what.parentNode&&typeof

what.parentNode.tagName!=='undefined'&&what.parentNode.tagName.toLowerCase()

=='map'){
mapflag=1;
var ocoords=what.coords.split(',')
var totaloffset=(offsettype=="left")? ocoords[0]*1 : ocoords[3]*1;
var mapIm=what.parentNode.parentNode.getElementsByTagName('img')
for (var i_tem = 0; i_tem < mapIm.length; i_tem++)
if (mapIm[i_tem].getAttribute('usemap',

0)&&mapIm[i_tem].getAttribute('usemap',

0).replace(/^.*(#.*)/g,'$1')=='#'+what.parentNode.name)
var parentEl=mapIm[i_tem];
}
else {
mapflag=0;
var totaloffset=(offsettype=="left")? what.offsetLeft : what.offsetTop;
var parentEl=what.offsetParent;
}
while (parentEl!=null){
totaloffset=(offsettype=="left")? totaloffset+parentEl.offsetLeft :

totaloffset+parentEl.offsetTop;
parentEl=parentEl.offsetParent;
}
return totaloffset;
}


function showhide(obj, e, visible, hidden, menuwidth){
if (ie4||ns6)
dropmenuobj.style.left=dropmenuobj.style.top=-500
if (menuwidth!=""){
dropmenuobj.widthobj=dropmenuobj.style
dropmenuobj.widthobj.width=menuwidth
}
if (e.type=="click" && obj.visibility==hidden || e.type=="mouseover")
obj.visibility=visible
else if (e.type=="click")
obj.visibility=hidden
}

function iecompattest(){
return (document.compatMode && document.compatMode!="BackCompat")?

document.documentElement : document.body
}

function clearbrowseredge(obj, whichedge){
var edgeoffset=0
if (whichedge=="rightedge"){
var windowedge=ie4 && !window.opera?

iecompattest().scrollLeft+iecompattest().clientWidth-15 :

window.pageXOffset+window.innerWidth-15
dropmenuobj.contentmeasure=dropmenuobj.offsetWidth
if (windowedge-dropmenuobj.x < dropmenuobj.contentmeasure)
edgeoffset=dropmenuobj.contentmeasure-obj.offsetWidth
}
else{
var topedge=ie4 && !window.opera? iecompattest().scrollTop :

window.pageYOffset
var windowedge=ie4 && !window.opera?

iecompattest().scrollTop+iecompattest().clientHeight-15 :

window.pageYOffset+window.innerHeight-18
dropmenuobj.contentmeasure=dropmenuobj.offsetHeight
if (windowedge-dropmenuobj.y < dropmenuobj.contentmeasure){ //move up?
edgeoffset=dropmenuobj.contentmeasure+obj.offsetHeight
if ((dropmenuobj.y-topedge)<dropmenuobj.contentmeasure) //up no good either?
edgeoffset=dropmenuobj.y+obj.offsetHeight-topedge
}
}
return edgeoffset
}

function populatemenu(what){
if (ie4||ns6)
dropmenuobj.innerHTML=what.join("")
}


function dropdownmenu(obj, e, menucontents, menuwidth){
if (window.event) event.cancelBubble=true
else if (e.stopPropagation) e.stopPropagation()
clearhidemenu()
dropmenuobj=document.getElementById? document.getElementById("dropmenudiv")

: dropmenudiv
populatemenu(menucontents)

if (ie4||ns6){
showhide(dropmenuobj.style, e, "visible", "hidden", menuwidth)
dropmenuobj.x=getposOffset(obj, "left")
dropmenuobj.y=getposOffset(obj, "top")
dropmenuobj.style.left=dropmenuobj.x-clearbrowseredge(obj,

"rightedge")-1+"px"
var oHeight=mapflag? 0 : obj.offsetHeight+46
dropmenuobj.style.top=dropmenuobj.y-clearbrowseredge(obj,

"bottomedge")+oHeight+"px"
}

return clickreturnvalue()
}

function clickreturnvalue(){
if (ie4||ns6) return false
else return true
}

function contains_ns6(a, b) {
while (b.parentNode)
if ((b = b.parentNode) == a)
return true;
return false;
}

function dynamichide(e){
if (ie4&&!dropmenuobj.contains(e.toElement))
delayhidemenu()
else if (ns6&&e.currentTarget!= e.relatedTarget&&

!contains_ns6(e.currentTarget, e.relatedTarget))
delayhidemenu()
}

function hidemenu(e){
if (typeof dropmenuobj!="undefined"){
if (ie4||ns6)
dropmenuobj.style.visibility="hidden"
}
}

function delayhidemenu(){
if (ie4||ns6)
delayhide=setTimeout("hidemenu()",disappeardelay)
}

function clearhidemenu(){
if (typeof delayhide!="undefined")
clearTimeout(delayhide)
}

if (hidemenu_onclick=="yes")
document.onclick=hidemenu

</script>


</head>

<BODY onLoad="self.focus()">
<div id="pict" style="top:0px;bottom:0px;left:200px;position:absolute;">
<img name="STETWebMainBG1.jpg" src="STET Web Main BG.jpg" width="1000"

height="889" border="0" id="STETWebMainBG"" alt="" /></div>
<div id="pict" style="top:0px;left:200px;position:absolute;">
<img name="STETWebMainBG.jpg" src="header.jpg" width="1000" height="271"

border="0" id="STETWebMainBG.jpg" usemap="#m_STET20Web20Main20BG.jpg" alt="" />

<map name="#m_STET20Web20Main20BG.jpg" id="m_STET20Web20Main20BG.jpg">
<area shape="rect" coords="928,816,977,839" href="sitemap.php" title="Site

Map" alt="Site Map" />
<area shape="circle" coords="71,827, 19" href="intranet.php" title="Log In

To Intranet" alt="Log In To Intranet" />
<area shape="rect" coords="96,814,169,840" href="intranet.php" title="Log In

To Intranet" alt="Log In To Intranet" />
<area shape="rect" coords="775,234,855,263" href="contact.php"

title="Contact Us" alt="Contact Us" />
<area shape="rect" coords="651,234,715,263" href="joinus.php" title="Join

Us!" alt="Join Us!" />
<area shape="rect" coords="426,231,589,262" href="intlstudents.php"

title="International Students Enrolment" alt="International Students

Enrolment" />
<area shape="rect" coords="245,232,361,264" href="trainingfac.php"

title="Training Facilities" alt="Training Facilities" />
<area shape="rect" coords="112,232,186,265" title="About Us" alt="About Us"

onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event,

menu1, '150px')" onMouseout="delayhidemenu()" target="main" />

</map>
</div>


<div id="pict" style="position:absolute;top:270px;left:200px;">
<iframe name="mainframe" src="mainframe.php" FRAMEBORDER=no name="frame"

allowTransparency scrolling=AUTO style="filter:chroma
(color=#FFFFFF)" width="1000" height="532"></iframe>
</div>



</body>
</html>

URGENTLY need help by tomorrow, thanks! =)

jscheuer1
02-19-2009, 04:02 PM
Please start a new thread for a new question. I know your question seems similar, but this is an old thread. I believe that the script in use back then has since been updated in the main script library. The modifications here will likely not (in their present form) work with it.