Welcome to WebmasterWorld Guest from 3.80.38.5

Forum Moderators: mack

Message Too Old, No Replies

Drop down menu should appear on mouse over of a text link

each of the links have to be linked to their pages

     
12:23 pm on Jun 7, 2004 (gmt 0)

Preferred Member

10+ Year Member

joined:May 29, 2003
posts:366
votes: 1


Hi
I need to create a drop down menu which appears along with the mouse once you point the mouse at a text link...can this be done.for eg

there is a text link "products" and when i get the cursor on it..there is something like a tool tip..or more like a menu of 5 more links which appear only when i get the mouse on the link "products"....each of these sub links should appear in a box..each in a different row..so that it looks like a drop down and each of the links need to be linked to their specific pages.....i am making a page in dreamweaver and i need to put this sort of a link among other static image links.....

need this asap..please help!

6:38 pm on June 13, 2004 (gmt 0)

Junior Member

10+ Year Member

joined:Mar 20, 2004
posts:117
votes: 0


Or you could try this script:
Put the following in the <head> section of your page

______________________________________________________
<STYLE>
.ttip {border:1px solid black;font-size:12px;layer-background-color:lightyellow;background-color:lightyellow}
</STYLE>

<script>

//Set the tool tip message you want for each link here.
var tip=new Array
tip[0]='Visit Dynamic Drive<br> for DHTML Scripts!'
tip[1]='Visit JavaScript Kit for Great<br> Scripts, Tutorials and Forums!'
tip[2]='Visit Request Code for FREE JavaScripts!'
tip[3]='Click here for some excellent<br>Java applets and tutorials'

function showtip(current,e,num)
{
if (document.layers) // Netscape 4.0+
{
theString="<DIV CLASS='ttip'>"+tip[num]+"</DIV>"
document.tooltip.document.write(theString)
document.tooltip.document.close()
document.tooltip.left=e.pageX+14
document.tooltip.top=e.pageY+2
document.tooltip.visibility="show"
}
else
{
if(document.getElementById) // Netscape 6.0+ and Internet Explorer 5.0+
{
elm=document.getElementById("tooltip")
elml=current
elm.innerHTML=tip[num]
elm.style.height=elml.style.height
elm.style.top=parseInt(elml.offsetTop+elml.offsetHeight)
elm.style.left=parseInt(elml.offsetLeft+elml.offsetWidth+10)
elm.style.visibility = "visible"
}
}
}
function hidetip(){
if (document.layers) // Netscape 4.0+
{
document.tooltip.visibility="hidden"
}
else
{
if(document.getElementById) // Netscape 6.0+ and Internet Explorer 5.0+
{
elm.style.visibility="hidden"
}
}
}
</script>

______________________________________________________
Put the following in the <body>:
______________________________________________________
<div id="tooltip" style="position:absolute;visibility:hidden;border:1px solid black;font-size:12px;layer-background-color:lightyellow;background-color:lightyellow;padding:1px"></div>

<a href="http://www.mysite.com" onMouseover="showtip(this,event,'0')" onMouseOut="hidetip()">Dynamic Drive</a>
<br>
<a href="http://www.mysite.com" onMouseover="showtip(this,event,'1')" onMouseOut="hidetip()">JavaScript Kit</a>
<br>
<a href="http://www.mysite.com" onMouseover="showtip(this,event,'2')" onMouseOut="hidetip()">Request Code</a>
<br>
<a href="http://www.mysite.com" onMouseover="showtip(this,event,'3')" onMouseOut="hidetip()">Freewarejava</a>
______________________________________________________
I hope this helps!

 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members