|
Subject:
|
hiding link in statusbar by onmousover
|
|
Posted By:
|
Haroldd
|
Post Date:
|
11/13/2003 9:41:35 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
|
|
Reply By:
|
Greg Griffiths
|
Reply Date:
|
11/13/2003 2:33:52 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.
|
|
Reply By:
|
planoie
|
Reply Date:
|
11/13/2003 3:27:57 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.
|
|
Reply By:
|
Haroldd
|
Reply Date:
|
11/14/2003 5:03:33 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 
|
|
Reply By:
|
Imar
|
Reply Date:
|
11/21/2003 6:11:59 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:<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.
|
|
Reply By:
|
Haroldd
|
Reply Date:
|
11/26/2003 4:07:27 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 
|
|
Reply By:
|
Haroldd
|
Reply Date:
|
11/26/2003 5:34:06 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
|
|
Reply By:
|
joefawcett
|
Reply Date:
|
11/26/2003 6:00:53 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:
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
|
|
Reply By:
|
Haroldd
|
Reply Date:
|
11/26/2003 6:28:27 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:
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?
|
|
Reply By:
|
joefawcett
|
Reply Date:
|
11/26/2003 7:19:13 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:
<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/default.asp?url=/workshop/author/dhtml/reference/properties/alink.asp
--
Joe
|
|
Reply By:
|
Haroldd
|
Reply Date:
|
11/26/2003 8:41:47 AM
|
Well ok. your help so far is greatly appreciated. I now have a working onmouseover- and onmouseoutevent for each link on a page. But the part i don't get is why the "self.status=''"-command doesn't work anymore. I guess this comes due that "self" doesn't point to the the current window anymore. How do i reach the "status"-attribute from the current window so i can hide the link from the statusbar?
function OnMouseOver(tagname)
{
self.status = '';
tagname.style.color='red';
return true;
}
function OnMouseOut(tagname)
{
tagname.style.color='black';
return true;
}
this will be my last question 
|
|
Reply By:
|
joefawcett
|
Reply Date:
|
11/26/2003 11:00:24 AM
|
I don't know, no code I've seen ever hides the link on my browser anyway. If you don't want the link to show a diffrent way would be to create your own link using a span tag:
<span class="link" onclick="window.location ='/'">Home</span>
Then assign the style in a style block:
span.link
{
text-decoration: underline;
cursor:hand;
}
Then use your loop code to assign onmouseovers etc.:
var colSpans = document.getElementsByTagName("span");
for (var i = 0; i < colSpans.length; i++)
{
if (colSpans[i].className == "link")
{
//colSpans[i].onmouseover = etc.
}
}
Harking back, the ALINK attribute goes into the body tag, not the onmouseover code. See the link I posted.
<quote>
this will be my last question
</quote>
Can I bet on that
--
Joe
|
