Results 1 to 10 of 10

Thread: Any link drop down menu

  1. #1
    Join Date
    Aug 2005
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Any link drop down menu

    Does anybody know how i would apply a drop down menu from an image flip.
    Thanks,
    Unsigned.

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    The same way you would for a regular image. There are many ways to do image rollovers (if that is what you are talking about). If the code for the flip or rollover is something like:
    Code:
    <img src="some1.jpg" onmouseover="flip(this.src, 'some2.jpg')" onmouseout="flip(this.src, 'some1.jpg')">
    You can just add the code for the drop down:
    Code:
    <img src="some1.jpg" onmouseover="flip(this.src, 'some2.jpg');dropdownmenu(this, event, menu1, '150px')" onmouseout="flip(this.src, 'some1.jpg');delayhidemenu()">
    As long as the two scripts do not conflict, it will be fine.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Aug 2005
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Thanks very much for replying, but i'm being a bit thick. I'm using this script for the image flip:

    <HEAD>
    <script language="JavaScript">
    {
    ar=new Image();
    ar.src="ar.gif";
    aron=new Image();
    aron.src="aron.gif";

    jo=new Image();
    jo.src="jo.gif";
    joon=new Image();
    joon.src="joon.gif";

    }

    function imageChange(imageID,imageName)
    {
    document.images[imageID].src=eval(imageName+".src");
    }
    </script>
    </HEAD>


    <BODY>
    <a href="artists.html" onMouseOver="imageChange('ar','aron')" onMouseOut="imageChange('ar','ar')"><img src="ar.gif" border="0" name="ar"></a>
    <a href="join.html" onMouseOver="imageChange('jo','joon')" onMouseOut="imageChange('jo','jo')"><img src="jo.gif" border="0" name="jo"></a>
    </BODY>

    and this script for the drop menu:

    <HEAD>
    <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;
    }

    #dropmenudiv a:hover{ /*hover background color*/
    background-color: yellow;
    }

    </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="http://www.javascriptkit.com">JavaScript Kit</a>'
    menu1[1]='<a href="http://www.freewarejava.com">Freewarejava.com</a>'
    menu1[2]='<a href="http://codingforums.com">Coding Forums</a>'
    menu1[3]='<a href="http://www.cssdrive.com">CSS Drive</a>'

    //Contents for menu 2, and so on
    var menu2=new Array()
    menu2[0]='<a href="http://cnn.com">CNN</a>'
    menu2[1]='<a href="http://msnbc.com">MSNBC</a>'
    menu2[2]='<a href="http://news.bbc.co.uk">BBC News</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=-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")+"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>
    <HEAD>

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

    Can i get them to work together?
    Thanks.

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Either add in the drop down code to the mouse events as shown in my example or create new ones for the image tag:
    HTML Code:
    <a href="artists.html" onMouseOver="imageChange('ar','aron');dropdownmenu(this, event, menu1, '150px')" onMouseOut="imageChange('ar','ar');delayhidemenu()"><img src="ar.gif" border="0" name="ar"></a>
    or:
    HTML Code:
    <a href="artists.html" onMouseOver="imageChange('ar','aron')" onMouseOut="imageChange('ar','ar')"><img src="ar.gif" onmouseover="dropdownmenu(this, event, menu1, '150px')" onmouseout="delayhidemenu()" border="0" name="ar"></a>
    Whichever works best for you.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  5. #5
    Join Date
    Aug 2005
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Brilliant! Thanks very much, that's working fine now.

  6. #6
    Join Date
    Aug 2005
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Sorry, it's me again. The script works fine but i have got a page with alot of tables and ever since i installed the script if i use the back button to that page one of the tables gets larger each time. I can't give you a link to the page as i'm workning offline, but just wondered if you know why this could be.
    Thanks again.

  7. #7
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Very hard to tell without seeing it in action. There is a good chance that it is not the script. Take the script off and double check.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  8. #8
    Join Date
    Aug 2005
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Do you know how to change the text colours seperate from the rest of the page as it automatically goes to the text colour i have set in the body.
    Thanks again.

  9. #9
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Here is where that is controlled:
    Code:
    <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;
    }
    
    #dropmenudiv a:hover{ /*hover background color*/
    background-color: yellow;
    }
    
    </style>
    Using valid css style you can add colors to the drop down division. See Blooberry for details or use your favorite css style resource.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  10. #10
    Join Date
    Aug 2005
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    I want to let the menu appear to the left and to the right, a bit like this

    image (mouseover: menu appears at the left side of the image)
    image2 (mouseover: menu appears at the right side of the image)
    and so on

    does this work, and if its possible, can you help me?^^

Bookmarks

Posting Permissions

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