dcsimg
www.webdeveloper.com
Page 2 of 2 FirstFirst 12
Results 16 to 17 of 17

Thread: [RESOLVED] Link Hover Addition

  1. #16
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,686
    i have just modified my last version of the script which had bugs in Opera and now it seems to be working w/o any bug (tested in FF, IE, Opera, Avant /this one is an IE clone/ and Netscape browser):

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
      "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
    <html lang="en" xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Link Hover Addition</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css">
    <!--
    body{
    color: #000;
    background-color: #f8f8ff;
    font-family: Verdana, Helvetica;
    font-size: 12px;
    padding: 10px 10px 10px 10px;
    margin: 0px 0px 0px 0px;
    }
    a:link,a:active,a:visited{
    color: #000;
    background-color: transparent;
    font-weight: bold;
    font-size: 14px;
    text-decoration: none;
    }
    a:hover{
    color: #338a1b;
    background-color: transparent;
    font-weight: bold;
    font-size: 14px;
    text-decoration: none;
    }
    #mainDiv{
    position: absolute;
    top: 100px;
    left: 150px;
    width: 200px;
    padding: 20px 20px 20px 20px;
    text-align: center;
    border: 1px dashed #cdc;
    }
    #anotherDiv{
    position: absolute;
    top: 100px;
    right: 150px;
    width: 200px;
    padding: 20px 20px 20px 20px;
    text-align: center;
    border: 1px dashed #cdc;
    }
    .bracket_hid{
    color: #f8f8ff;
    background-color: transparent;
    font-weight: bold;
    font-size: 14px;
    margin-left: 3px;
    margin-right: 3px;
    }
    .bracket_vis{
    color: #a63944;
    background-color: transparent;
    font-weight: bold;
    font-size: 14px;
    margin-left: 3px;
    margin-right: 3px;
    }
    -->
    </style>
    </head>
    <body>
    <div id="mainDiv">
    <h2>Menu</h2><br />
    <a href="#null">Link 1</a><br /><br />
    <a href="#null">Link 2</a><br /><br />
    <a href="#null">Link 3</a><br /><br />
    <a href="#null">Link 4</a><br /><br />
    <a href="#null">Link 5</a>
    </div>
    <div id="anotherDiv">
    <h2>Another content</h2><br />
    <a href="#null">Link 1</a><br /><br />
    <a href="#null">Link 2</a><br /><br />
    <a href="#null">Link 3</a><br /><br />
    <a href="#null">Link 4</a><br /><br />
    <a href="#null">Link 5</a>
    </div>
    <script language="JavaScript" type="text/javascript">
    <!--
    var dlinks = document.getElementById("mainDiv").getElementsByTagName("A");
    var dl = document.links;
    var timer;
    
    for(var x = 0; x < dlinks.length; x++){
    var temp = dlinks[x].innerHTML;
    dlinks[x].innerHTML = "<span class='bracket_hid'>[<\/span>" + temp + "<span class='bracket_hid'>]<\/span>";
    dlinks[x].setAttribute("id", "dlink_" + x);
    dlinks[x].onmouseover = function(){doTarget(this.id,15);}
    dlinks[x].onmouseout = function(){
    if(timer != ""){clearTimeout(timer);}
    this.childNodes[0].className = "bracket_hid";
    this.childNodes[2].className = "bracket_hid";
    }
    }
    
    for(var k = 0; k < dl.length; k++){dl[k].onfocus = function(){this.blur();}}
    
    function doTarget(objID,n){
    var lb = document.getElementById(objID).childNodes[0];
    var rb = document.getElementById(objID).childNodes[2];
    if(n > 3){
    lb.className = "bracket_vis";
    rb.className = "bracket_vis";
    lb.style.marginRight = n + "px";
    rb.style.marginLeft = n + "px";
    n--;
    }
    else{timer = ""; return;}
    timer = setTimeout("doTarget(\"" + objID + "\"," + n + ")",50);
    }
    //-->
    </script>
    </body>
    </html>

  2. #17
    Join Date
    Mar 2007
    Location
    U.K.
    Posts
    1,127
    Quote Originally Posted by Padonak
    in Opera (v.9.21) doesnt work properly :-( (on my comp)
    Opera 9 breaks so many things that I'm still using 8.54.
    The only way I could get it to work was to clone the link and restore its event handlers. It's not quite as good, but then it's not something I would ever use.
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <head>
    <title>Append Brackets to Hovered Link Text</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <style type='text/css'>
    a{text-decoration:none}
    a:hover{background-color:#338a1b;color:#fff}
    </style>
    </head>
    <body>
    <p>
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a><br><br>
    <a href="#">Link 4</a><br><br>
    <a href="#">Link 5</a><br><br>
    </p>
    
    <script type="text/javascript">
    
    (BracketLink=
    {
     hardSpace:"X\xA0", /*73637269707465726C61746976652E636F6D*/
     
     add:function(lnk)
     {
      var newLink=lnk.cloneNode(true);
      newLink.replaceChild(document.createTextNode(lnk.firstChild.data.replace(/^./,'{').replace(/\xA0$/,'}')),newLink.firstChild);
      newLink.hoverMouse=lnk.onmouseover;
      newLink.onmouseout=lnk.onmouseout;
      lnk.parentNode.replaceChild(newLink, lnk);
     },
     
     restore:function(lnk)
     {
      if(lnk.hoverMouse)
       lnk.onmouseover=lnk.hoverMouse;
         
      lnk.replaceChild(document.createTextNode(lnk.firstChild.data.replace(/^./,BracketLink.hardSpace.substring(1)).replace(/.$/,'\xA0')),lnk.firstChild);
     },
     
     init:function()
     {
      if(document.links && document.links.length && document.links[0].childNodes)  
       for(var i=0, lnk, dl=document.links; i<dl.length; i++)
       {
        lnk=dl[i];
     
        lnk.style.fontFamily='monospace,courier new';
        if(lnk.firstChild && lnk.firstChild.nodeType==3)
        {
         lnk.firstChild.data = lnk.firstChild.nodeValue.replace(/^/,this.hardSpace.substring(1)).replace(/$/g,'\xa0');
         lnk.onmouseover=function(){BracketLink.add(this)}
         lnk.onmouseout=function(){BracketLink.restore(this)}
        }
       }
     }
    }).init();
    
    </script>
    </body>
    </html>

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles