PDA

View Full Version : Trifecta onClick



Black Drazon
06-12-2006, 12:03 AM
I worked up some code to give Trifecta buttons (http://www.search-this.com/website_design/css_rollover_buttons.aspx) an "onClick"-esque third form. I don't really think I did a good job, as it's probably not that efficient and the onClick form stays there forever. I tried fiddling with setTimeout but I messed up or something.

There's not much too it:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<title>Button Test</title>
<link rel="stylesheet" type="text/css" href="trifecta.css" />
<script type="text/javascript">
function imgChange() {
document.getElementById('cssnav').src="clickbtn.jpg";
document.getElementById('cssnav').style.visibility="visible";
return true;
}
</script>
</head>

<body bgcolor="red">
<div class="cssnav"> <a onclick="return imgChange();" href="http://path.com" title="your_keyword">
<img id="cssnav" name="cssnav" src="downbtn.jpg" alt="your_keyword" />
<span>Link to Page</span> </a> </div>
</body>
</html>

And Trifecta.css:



/* "Trifecta" Rollover Buttons, for those too lazy to click the link I provided. */

.cssnav {
position: relative;
font-family: arial, helvetica, sans-serif;
background-image: url(overbtn.jpg);
background-repeat: no-repeat;
white-space: nowrap;
display: block;
width: 190px;
height: 60px;
margin: 0;
padding: 0;
}

.cssnav a {
display: block;
color: #000000;
font-size: 11px;
width: 190px;
height: 60px;
display: block;
float: left;
color: black;
text-decoration: none;
}

.cssnav img {width: 190px; height: 60px; border: 0; }
* html a:hover {visibility:visible}
.cssnav a:hover img{visibility:hidden}

.cssnav span {
position: absolute;
left: 30px;
top: 21px;
margin: 0px;
padding: 0px;
cursor: pointer;
color: #00f909;
font-size: 150%;
font-style: bold;
font-family: serif;
font-weight: bolder;
}


This is the code I've been using, except I use PNGs. Same difference. As you can see, I cause the image to reappear (the Trifecta code makes it vanish when hovered over, revealing the "overbtn" background), then change the image to clickbtn. I'd rather have added clickbtn to the bottom of overbtn.jpg and then scrolled down, but I'm not good enough with this.

If there's any way to optimise this code or make the "clickbtn" go away, I'd appreciate. Meanwhile, I'll live without the click effect, I'd prefer the search engine compatability and reusability (I just type a new thing in the link instead of re-editing! It's great!) of the Trifecta compared to an image with onMouseOver and onClick for now.

Thanks in advance!

Minor edits.