PDA

View Full Version : hide focus/ active links



stovepipe
Feb 14th, 2005, 01:12 PM
hi,
i'm using a javascript to hide the dotted border around my links. the script i use works the only problem is that i'm using css to us a hover effect as well.
i'm using
a:link
a:hover
a:active

this script makes it to where the active part of my link goes away.
i think this has something to do with the hidefocus.
can you help me edit this script so this doesn't happen or show me a script that will do all of the following. here is my script

function hideFocus(evt) {
evt = (evt) ? evt : ((event) ? event : null);
if (evt) {
var elem = (evt.target) ? evt.target : ((evt.srcElement) ?
evt.srcElement : null);
if (elem) {
elem = (elem.tagName != 'A') ? elem.parentNode : elem;
if (elem.tagName == 'A'){elem.blur();}
}
}
}
document.onclick = hideFocus;

waolly
Feb 14th, 2005, 01:23 PM
I'm not 100% clear on what you need to accomplish, could you post the CSS definitions here as well so I can take a look at the full working code sample.

stovepipe
Feb 14th, 2005, 01:40 PM
ok well... see how i have an image for each link, hover, and active effects.
when i put that script in my source the active image doesn't stay. the link doesn't stay active. here is the site i am working on it is still under construction. www.fourcheers.com what i want is when a page is brought up for that link to have the red background.

td a{
background-image: url(hover.png);
background-repeat: no-repeat;
font-size: 15px;
color: #c0c0c0;
font-family: georgia;
border: 2px solid #000000;
border-width: 2px 2px 2px 2px;
padding: 8px;
text-decoration:none;}


td a:hover{
font-family: georgia;
font-size: 15px;
color: #c0c0c0;
background-image: url(hover2.png);
background-repeat: no-repeat;
text-decoration:none;}

td a:active{
font-family: georgia;
font-size: 15px;
color: #c0c0c0;
background-image: url(hover2.png);
background-repeat: no-repeat;
text-decoration:none;}

waolly
Feb 14th, 2005, 03:05 PM
You can't just rely on CSS declarations to keep the button active as far as I'm aware:

I made some changes and I've pasted the code below (I tested in FireFox and IE). Also note that the code to make the border disappear does not work in FireFox.

The key changes are
- 3 new functions, doover, doout, and doactive
- Create 3 new CSS entities .over, .out. and .normal
- add onmouseover,onmouseout and onclick events to the <a> menu tags



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<meta name="Description" content=" mohave valleys very own four cheers. Show listings, demo, pics, and show reviews">

<meta name="Keywords" content=" four cheers, fourcheers, Four Cheers, FOUR CHEERS, FourCheers, FOURCHEERS, punk, band, four cheers,">



<title>four cheers official website</title><script language="JavaScript">

function hideFocus(evt) {
evt = (evt) ? evt : ((event) ? event : null);
if (evt) {
var elem = (evt.target) ? evt.target : ((evt.srcElement) ?
evt.srcElement : null);
if (elem) {
elem = (elem.tagName != 'A') ? elem.parentNode : elem;
if (elem.tagName == 'A'){elem.blur();}
}
}
}
document.onclick = hideFocus;
activeID="";

function doover(obj) {
obj.className='over';
}

function doout(obj) {
if (obj.id!=activeID)
obj.className='normal';
}

function doactive(obj) {
if (document.getElementById(activeID))
document.getElementById(activeID).className='normal';
obj.className='over';
activeID=obj.id;
}
</script>



<style type="text/css">





<!-- body{
scrollbar-arrow-color: #767676;
scrollbar-3dlight-color: #000000;
scrollbar-highlight-color: #767676;
scrollbar-face-color: #430808;
scrollbar-shadow-color: #777777;
scrollbar-darkshadow-color: #797979;
scrollbar-track-color:#767676;} -->


a{
color:#c0c0c0;}

td a{
background-image: url(hover.png);
background-repeat: no-repeat;
font-size: 15px;
color: #c0c0c0;
font-family: georgia;
border: 2px solid #000000;
border-width: 2px 2px 2px 2px;
padding: 8px;
text-decoration:none;}

.normal{
background-image: url(hover.png);
background-repeat: no-repeat;
font-size: 15px;
color: #c0c0c0;
font-family: georgia;
border: 2px solid #000000;
border-width: 2px 2px 2px 2px;
padding: 8px;
text-decoration:none;}

.over{
font-family: georgia;
font-size: 15px;
color: #c0c0c0;
background-image: url(hover2.png);
background-repeat: no-repeat;
text-decoration:none;}

.active{
font-family: georgia;
font-size: 15px;
color: #c0c0c0;
background-image: url(hover2.png);
background-repeat: no-repeat;
text-decoration:none;}

</style></head>



<body onload="blurLinks()" bgcolor="#767676">

<center>
<table height="400" width="755">
<tbody><tr><td bgcolor="#c0c0c0">

<table>

<tbody><tr>
<th bgcolor="#c0c0c0" height="180" width="180">
<img src="four%20cheers%20official%20website_files/alogo1.png">
</th>
<th bgcolor="#c0c0c0">
<img src="four%20cheers%20official%20website_files/header1.png">
</th>
</tr>

<tr>
<td align="left">
<a href="http://www.fourcheers.com/news.html" target="left" id="newslink">
news
</a>
<a href="http://www.fourcheers.com/guest.html" target="left" id="guestlink">
Guestbook
</a>
</td>

<td align="right">

<a onclick="doactive(this);" onmouseover="doover(this)" onmouseout="doout(this)" href="http://www.fourcheers.com/front.html" target="main" id="main">
Home
</a>
<a onclick="doactive(this);" onmouseover="doover(this)" onmouseout="doout(this)" href="http://www.fourcheers.com/photos.html" target="main" id="photoslink">
Photos
</a>
<a onclick="doactive(this);" onmouseover="doover(this)" onmouseout="doout(this)" href="http://www.fourcheers.com/shows.html" target="main" id="showslink">
Shows
</a>
<a onclick="doactive(this);" onmouseover="doover(this)" onmouseout="doout(this)" href="http://www.fourcheers.com/contact.html" target="main" id="contactlink">
Contact
</a>
<a onclick="doactive(this);" onmouseover="doover(this)" onmouseout="doout(this)" href="http://www.fourcheers.com/showj.html" target="main" id="showjlink">
show journal
</a>
<a onclick="doactive(this);" onmouseover="doover(this)" onmouseout="doout(this)" href="http://www.fourcheers.com/bio.html" target="main" id="biolink">
Bio
</a>
<a onclick="doactive(this);" onmouseover="doover(this)" onmouseout="doout(this)" href="http://www.fourcheers.com/lyrics.html" target="main" id="lyricsilnk">
Lyrics
</a>
<a onclick="doactive(this);" onmouseover="doover(this)" onmouseout="doout(this)" href="http://www.fourcheers.com/merch.html" target="main" id="merchlink">
Merch
</a>
</td>
</tr>

<tr>
<td>
<iframe src="four%20cheers%20official%20website_files/news.htm" name="left" frameborder="0" height="500" width="180">
</iframe>
</td>
<td colspan="2" bgcolor="#c0c0c0" height="500"> <div align="right"><iframe src="four%20cheers%20official%20website_files/front.htm" name="main" frameborder="0" height="500" scrolling="auto" width="675"></iframe></div>
</td>
</tr>
</tbody></table>
</td>
</tr></tbody></table>
</center>

<center>
|-<a href="http://havasuunderground.com/" target="newwindow 2">havasu underground</a>-|-
<a href="http://www.thesmashists.net/" target="newwindow 3">the smashists</a>-|-
<a href="http://abortyou.cjb.net/" target="newwindow">back alley abortions</a>-|-<a href="http://www.skeptictank.org/" target="newwindow">skeptic tank</a>-|-<a href="http://www.breakthefixation.blogspot.com/" target="newwindow4">break the fixation</a>-|<br>|-<a href="http://www.rockthis.net/" target="newwindow">rock this.net</a>-|
</center>

<!-- Start Bravenet.com Service Code -->
<script language="JavaScript" type="text/javascript" src="four%20cheers%20official%20website_files/code.htm">
</script><script language="javascript" src="four%20cheers%20official%20website_files/show.htm"></script><table align="center" border="0" cellpadding="0" cellspacing="0"><tbody><tr><td align="center"><img src="four%20cheers%20official%20website_files/counter.png" alt="Bravenet Hit Counter" title="Bravenet Counter" border="0"><br><a target="_new" href="http://www.bravenet.com/"><img src="four%20cheers%20official%20website_files/1_preview.gif" alt="Powered by Bravenet" border="0"></a><a target="_new" href="http://counter20.bravenet.com/index.php?id=382988&amp;usernum=1679818435"><img src="four%20cheers%20official%20website_files/1_stat.gif" target="_blank" alt="View Statistics" border="0"></a></td></tr></tbody></table>
<!-- END DO NOT MODIFY -->
<br>
<center>as of tuseday january 11th, 2005</center>
<!-- html--></body></html>