tyring to get Anylink dropdown menu to work with image links

**silverglade** · 01-28-2009, 01:15 PM

hi, i downloaded Anylink drop down menu from dynamicdrive.com. i am able to get it to work with text links, but they dont show you how to set it up for image links. any help GREATLY appreciated. thank you. derek. here is the page im talking about.

http://derekvanderven.com/doctors_columbia/home.html

and here is the css to the page

Code:

@charset "utf-8";
/* CSS Document */

body {
	margin: 0;  /* clear for browsers */
	padding: 0;
	background-color: #517E86;
}
#container {
	position: relative;
	margin: 0 auto 0 auto;
	width: 800px;
	height: auto;
	border: solid 3px black;
	

	}
	
#header {
	background-image: url(header.gif);
	 background-repeat: no-repeat;
	 width: 800px;
	 height: 96px;
	 }
#navigation {
     
	  width: 800px;
	 height: 20px;
	
}	 

#imgnavigation {
	width: 800px;
	 height: 122px; /* images height*/
	 background-color: #ffffff;
	 
 }
 
 /* IMAGE GALLERY CODE CHANGED AROUND */
 
 #imgnavigation img {
 
 	display: inline: 
	 
	float: left;
	margin-left: 7px;
	}



#textbox {
	background-image: url(images/textbox.gif);
	background-repeat: no-repeat;
	width: auto;
	 height: auto;
	padding-left: 1em;
	padding-right: 1em;
	padding-top: 1em;
	padding-bottom: 5em;

	 
	 
}

and here is the html/css for the page and the menu

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link href="doctor_style.css" rel="stylesheet" type="text/css">
<!--[if lt IE 7]>
<link href="iefixes.css" rel="stylesheet" type="text/css" /> <![endif]--> 
<style type="text/css">
.style2 {
	font-size: 13px
}
</style>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 

<style type="text/css">

#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;
 background-color: #517e86;    /*makes background color of dropdown blue*/
}

#dropmenudiv a:hover{ /*hover background color*/
background-color: #000000;  /* makes hover color black*/
}
 
a:link {color: #ffffff;}
a:visited {color: #ffffff;}
a:hover {color: #ffffff;}
a:active {color: #ffffff;} /* make all links white */
 
  
 
   
 
.style3 {
	font-size: x-large
}
</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
***********************************************/

//Contents for menu 1
var menu1=new Array()
menu1[0]='<a href="meet_the_staff.html#specialists">Specialists</a>'
menu1[1]='<a href="meet_the_staff.html#endodontist">Endodontist</a>'
menu1[2]='<a href="meet_the_staff.html#periodontist">Periodontist</a>'
menu1[3]='<a href="meet_the_staff.html#ceramist">Ceramist/Dental Technician</a>'
menu1[4]='<a href="meet_the_staff.html#hygiene">Dental Hygiene/ Preventative Dentistry Staff</a>'
menu1[5]='<a href="meet_the_staff.html#assistants">Dental Assistants</a>'
menu1[6]='<a href="meet_the_staff.html#reception">Reception/Front Desk Staff</a>'

//Contents for menu 2, and so on
var menu2=new Array()
menu2[0]='<a href="forms_instructions.html#forms">Medical Hx/Registration Form</a>'
menu2[1]='<a href="meet_the_staff.html#">Post-Periodontal Surgery Instructions</a>'
menu2[2]='<a href="meet_the_staff.html#">Post-Extraction Instructions</a>'
menu2[3]='<a href="meet_the_staff.html#">Post Root Canal Instructions</a>'
 
var menu3=new Array()
menu3[0]='<a href="advanced_technologies.html">Cosmetic Dental Imaging</a>'
menu3[1]='<a href="advanced_technologies.html#laser_cavity">Laser Cavity Detection</a>'
menu3[2]='<a href="advanced_technologies.html#magnification">Advanced Magnification</a>'
menu3[3]='<a href="advanced_technologies.html#radiography">Digital Radiography</a>'
 
 var menu6=new Array()
menu6[0]='<a href="convenience_services.html">Consierge Services</a>'
menu6[1]='<a href="meet_the_staff.html#ceramist">Onsite Dental Ceramist</a>'
menu6[2]='<a href="meet_the_staff.html#specialists">Onsite Specialists</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>
<title>Dental Partners of Columbia Home</title>
</head>

<body>
<div id="container">
   <div id="header"> </div> 
   <div id="navigation"> 
   		 <div align="center" class="style2">
         <a href="default.htm" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu1, '150px')" 
         onMouseout="delayhidemenu()">Meet the Staff</a> |
		     <a href="default2.htm" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu2, '150px')" 
           onMouseout="delayhidemenu()">Forms and Instructions</a> |
			 <a href="default3.htm" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu3, '150px')" 
           onMouseout="delayhidemenu()">Advanced Technologies</a> |  
             <a href="smile_gallery.html">Smile Gallery</a> |  
             <a href="contact.html">Contact Us</a> |  
             <a href="default6.htm" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu6, '150px')" 
           onMouseout="delayhidemenu()">Convenience Services</a> |  
             <a href="links.html">Links</a> |  
             <a href="press_mentions.html">Press Mentions</a></div>
   </div>
   <!-- end NAVIGATION-->
   			<div id="imgnavigation">
           	  
           

              
  </div>
</div>
<!-- END CONTAINTER-->
</body>
</html>

**Schmoopy** · 01-28-2009, 02:14 PM

Pretty simple really, edit the code so instead of this:

Code:

   <a href="default.htm" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu1, '150px')" 
         onMouseout="delayhidemenu()">Meet the Staff</a>

You have this:

Code:

   <a href="default.htm" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu1, '150px')" 
         onMouseout="delayhidemenu()"><img src="myimage.jpg" alt="my image"></a>

and somewhere in the CSS add:

Code:

a img{
border:none;
}

To get rid of the blue border on images that are links.

Also this shouldn't be in the Java section.

If anything it should either be in the JavaScript or Dynamic Drive scripts help section.

But anyway, hope that helps you.

**silverglade** · 01-28-2009, 08:45 PM

awesome thank you schmoopy for taking the time to help me out. im sorry i thought i was in the javascript section. next time i will go there. but THANK YOU for helping me out. derek

**Schmoopy** · 01-28-2009, 09:29 PM

No problem, glad I could be of service.

**wildhorseracelover** · 01-30-2009, 04:38 PM

Originally Posted by Schmoopy

No problem, glad I could be of service.

Gonna try it myself. On the Java section does it mean javascript? I know the two are different. Should I be searching under html? Thanks for help and code.

**ddadmin** · 01-30-2009, 09:35 PM

JavaScript is very different from Java. Simply do a Google search for more info. On top of that, DD related scripts should be posted in the DD Scripts Help section, with Anylink Menu being one of them.

Moving thread.

Thread: tyring to get Anylink dropdown menu to work with image links

Thread Tools

Search Thread

tyring to get Anylink dropdown menu to work with image links

Bookmarks

Bookmarks

Posting Permissions