Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Jan 2009
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    trying to get Anylink dropdown menu to work with image links

    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

    here is the css to my page that just contains the regular links dropdown.

    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;
    
    	 
    	 
    }
    here is the html/css for the page and the dropdown menu used for only text links.

    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">
               	  
               
    
                  
                  
                  
                <a  href="meet_the_staff.html"><img src="images/meet_dentists.jpg" border="0"/></a><a href="our_office.html"><img src="images/our_office.jpg" width="151" height="122" border="0" /></a><a href="service_procedures.html"><img src="images/service_pro.jpg" width="151" height="122" border="0" /></a><a href="cosmetic_dentistry.html"><img src="images/cosmetic.jpg" width="155" height="122" border="0" /></a><a href="tmj.html"><img src="images/tmj.jpg" width="150" height="122" border="0" /></a>            </div> 
       			<!-- END IMGNAVIGATION-->	
      
      				<div id="textbox">
      				  <p class="style3">Welcome			      </p>
      				  <p>We provide extraordinary care and resources that go the extra mile, with a multi-disciplinary approach that includes access to several different dental specialists right within our office.  Our practice incorporates the latest technologies (including digital radiography and photographic imaging), as well as an in-house laboratory technician who utilizes the most advanced aesthetic techniques to give our patients the best in functional and cosmetic dentistry.  				    </p>
      				  <p>Our strong reputation for the highest standard of excellence and the ability to provide that level of care in as short a time as possible has broadened our patient base throughout the United States and internationally as well.  Our location in the heart of New York City’s cultural and retail center allows us to provide concierge services for those patients who  travel in to see us. </p>
      </div>
    </div>
    <!-- END CONTAINTER-->
    </body>
    </html>

  • #2
    New to the CF scene
    Join Date
    Jan 2009
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    nevermind i found the answer., instead of putting text in there, i have to use img src. it was simple, i just didnt know what to do. here is the code to make Anylink dropdown menu work with images.

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


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •