hiding link in statusbar by onmousover

Haroldd · November 13th, 2003, 10:41 AM

Hi,

I need (an easy way) to hide the link which appears in the statusbar when u move over the link. I don't want to change this for each link manually. Is it possible to hide this for every link on my webpage with 1 script?

Thanks in advance,

Harold

Greg Griffiths · November 13th, 2003, 03:33 PM

You will need to add an onmouseover and an onmouseout event for each link you want covered in that way, I am not aware of a way of doing it globally.

planoie · November 13th, 2003, 04:27 PM

you could do it globally by causing the site to open in a new window that excludes the status bar. but you would also need to exclude anything in the browser that allows the user to turn the status bar back on.

Peter
------------------------------------------------------
Work smarter, not harder.

Haroldd · November 14th, 2003, 06:03 AM

thanks for your answers, although they didn't satisfy me ;)

i don't wanna hide the statusbar because that ain't looking 'cool' but i also don't wanna go add an onmouseover eventhandler to each hyperlink... well i'll see what to do about it, thanks anyway :)

Imar · November 21st, 2003, 07:11 AM

Hi Harold,

Well, if you don't feel like doing it manually, you can do it programmatically. The following code will loop through all <a> elements on the page, and dynamically assign the OnMouseOver event. You may need to repeat parts of this code for the click / mousedown events because otherwise the address still shows up:

Code:

<html>
<head>
  <title>Dynamic Event Handlers</title>
  <script language="JavaScript">
    function OnMouseOver()
    {
    self.status = '';
    return true;
    }

    function OnLoad()
    {
      var allLinks;
      // get a reference to all <a> tags in the page
      if (document.getElementsByTagName) 
      {
        allLinks = document.getElementsByTagName("a");
        // If there are links
        if (allLinks.length > 0)
        {
          for (i = 0; i < allLinks.length; i++)
          {
            // next line doesn't work. You'll need an 
            // explicit reference to the link
            // allLinks[i].onmouseover = OnMouseOver;
            // This works: Dynamically attach the OnMouseOver method
            document.getElementById(allLinks[i].id).onmouseover 
                   = OnMouseOver;
          }
        }
      }
      else 
      {
        document.write("Unrecognized Browser Detected");
      }
    }
  </script>
</head>
<body onLoad="OnLoad();"> 
  <a href="page1.aspx" id="a1">Page 1</a>
 
  <a href="page2.aspx" id="a2">Page 2</a>
 
  <a href="page3.aspx" id="a3">Page 3</a>
 
</body>
</html>

One disadvantage of this method is that you need to assign an ID attribute to every <a> tag. You may be able to do this programmatically, but I haven't tested that yet. Then again, adding an ID to each element can be useful anyway.

HtH,

Imar

---------------------------------------
Imar Spaanjaars
Everyone is unique, except for me.

Haroldd · November 26th, 2003, 05:07 AM

despite the discussion if id-tags in links are useful: here is the way to do it without the id tag (i just show the for-loop)

for (i = 0; i < allLinks.length; i++)
            {
                // next line doesn't work. You'll need an
                // explicit reference to the link
                // allLinks[i].onmouseover = OnMouseOver;
                // This works: Dynamically attach the OnMouseOver method
                //document.getElementById(allLinks[i].id).onmouseover = OnMouseOver;
                //my methode, so without the id tag
                allLinks.item(i).onmouseover = OnMouseOver;
            }

But thanks a lot for the great script. It was just what i was looking for :D

Haroldd · November 26th, 2003, 06:34 AM

i also want to change the linkcolor when a user moves over the link. So i thought up the following construction (see below):

function OnMouseOver(tagname)
    {
        self.status = '';
        tagname.style.color='red';
        return true;
    }

    function OnLoad()
    {
        var allLinks;
        var tagname;
        // get a reference to all <a> tags in the page
        if (document.getElementsByTagName)
        {
            allLinks = document.getElementsByTagName("a");
            // If there are links
            if (allLinks.length > 0)
            {
                for (i = 0; i < allLinks.length; i++)
                {
                    //my method, so without id
                    tagname=allLinks.item(i);
                    allLinks.item(i).onmouseover = OnMouseOver(tagname);
                }
            }
        }
    }
But this doesn't function, i get the following errormessage: "not inplemented" (the original errormessage was in dutch: "niet geÃ¯mplementeerd". it's my own translation ;)). Anybody knows how to fix/do this? (by the way: i hate debugging javascript :()

Harold

joefawcett · November 26th, 2003, 07:00 AM

You can't pass arguments to an assigned function in the way you tried, you need one of two different methods depending on if your arguments are interpreted at run-time or at assignment time. In your instance you need to pass the element that was hovered on so you need to pass the 'this' reference at run-time. Your code is overdoing things, a simpler implementation is:

Code:

function OnLoad()
{
  var allLinks;
  // get a reference to all <a> tags in the page
  if (document.getElementsByTagName) 
  {
    allLinks = document.getElementsByTagName("a");
    for (var i = 0; i < allLinks.length; i++)
    {
      allLinks[i].onmouseover = function(){OnMouseOver(this)};
    }
  }
}

Personally I'd just use LINK, ALINK and VLINK attributes on the body element for the colour styling.

--

Joe

Haroldd · November 26th, 2003, 07:28 AM

ehm

i changed this line:

allLinks[i].onmouseover = function(){OnMouseOver(this)};

into this:

allLinks.item(i).onmouseover = function(){OnMouseOver(this)};

but why did u put 'OnMouseOver(this)' in a new function??

nothing happens when using this function...

Quote:

quote:Personally I'd just use LINK, ALINK and VLINK attributes on the body element for the colour styling.

i can't use these attributes for changing link colors at the onmouseover-event, can i?

joefawcett · November 26th, 2003, 08:19 AM

If you want to change allLinks[i] to allLinks.item(i) that's your prerogative, both will work. You didn't have to change anything else. Here is my test page which works fine:

Code:

<html>
<head>
<title>Links</title>

<script type="text/javascript">
  function OnMouseOver(Link)
  {   
    Link.style.color = "#ff0000";    
  }

  function setLinks()
  {
    var arrLinks = document.getElementsByTagName("a");
    for (var i = 0; i < arrLinks.length; i++)
    {
      arrLinks[i].onmouseover = function(){OnMouseOver(this);};    
    }
  }  
</script>
</head>

<body bgcolor="#FFFFFF" onload="setLinks();">
<a href="/">Home</a><br>
<a href="somewhere">Somewhere</a>
</body>
</html>

http://msdn.microsoft.com/library/de...ties/alink.asp

--

Joe