HOW I CREATE POPUP MENU ON MOUSE OVER

ok this examples runs great on image component, in button or hyperlynk dont work finee or i can find how, paste this code in the head of the jsp code:

<script type="text/javascript"><![CDATA[

var opt=0;

/***********************************************

* 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 menu 1

var menu1=new Array()

menu1[0]='<a href="./faces/info.jsp">Information<\/a>'

menu1[1]='<a href="./faces/edit.jsp">Edit<\/a>'

menu1[2]='<a href="./faces/del.jsp">Delete<\/a>'

//Contents for menu 2, and so on

var menu2=new Array()

menu2[0]='<a href="">Infor<\/a>'

menu2[1]='<a href="">Edit<\/a>'

menu2[2]='<a href="">Del<\/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>

Next, paste this in css stylesheet:

#dropmenudiv{

position:absolute;

border:1px solid black;

border-bottom-width: 0;

font:normal 12px Verdana;

line-height:18px;

z-index:100;

}

#dropmenudiv a{

width: 100%;

display: block;

text-indent: 3px;

border-bottom: 1px solid black;

padding: 1px 0;

text-decoration: none;

font-weight: bold;

}

#dropmenudiv a:hover{

/*hover background color*/

background-color: #faebeb

}

and in the image componen in event onClick paste this

dropdownmenu(this, event, menu1, '150px')

onMouseOut event paste this:

delayhidemenu()

this should works, and as u can see, u can get more examples like this in the DHTML page. I hope it helps

Plz tell me if this is what ur looking for, oor if u need help, post again

Beltazor

Beltazor at 2007-7-6 20:07:48 >

Can u tell me what kind of error u find in IE, because i've used in mozilla from solaris, safari from mac, and IE and firefox from windows and it works great, maybe its a mistake when i copy & paste it here u can see the full code in the next link:

http://www.dynamicdrive.com/dynamicindex1/dropmenuindex.htm

Beltazor

Beltazor at 2007-7-6 20:07:48 >

ok, now it works... it was my fault!(stupid error)

one last thing: I've created a .js file with javascript code, put in a page fragment (tabs) and it works, unfortunately the popup menu is shown under the others elements in the rendered page... is there any way to say it "bring to front"?

(z-index seems not to work using page fragments and jscript)

gio_mori at 2007-7-6 20:07:48 >