Forum Moderators: open
I'm pretty new to javascript but trying to figure something out. I'm hoping someone here can assist. Here's the scenario:
I have created a web page from HTML, with a CSS imported. At the base of my web pages I have a collection of links, acting as a site map. I have given the links a border to make them appear like buttons.
What I want to occur is for the border to change when the mouse is over the button and once the button is clicked.
In the .css file the 3 classes are called ".button", ".button_rollover" and ".button_clicked". Each of these only actually defines the border.
The code that I am trying to use is as follows:
<A HREF="#" TARGET="main" CLASS="BUTTON" onMouseOver="this.className='BUTTON_ROLLOVER';" onClick="this.className='BUTTON_CLICKED';">Home</A>
However as it stands, the link initially has the correct class (since it is stated in HTML) but the Javascript elements are faulty. onMouseOver and onClick the borders do disappear, making me think I'm close to the answer and the class is changing. However it is not changing to the class that I want it to.
Please can someone show me where I'm going wrong. I am sure there is a simple error in there but I can't find any appropriate literature on it.
thesmileyone
Either there's something you're not telling us, or you're trying too complex a solution for the problem. As far as I can tell from your post, CSS can do what you're trying to do without any need for javascript:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Link Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
a:link,
a:visited {
/* 'link' is the original style, 'visited' is the style _after_ the link has been clicked. */
border:2px solid red;
text-decoration:none;
color:green;
}a:hover {
/* 'hover' is the 'mouseover' state */
border:2px solid green;
color:red;
}
a:active {
/* 'active' is the state like 'onmousedown' */
border:2px solid #f90;
color:#f90;
}
</style>
</head><body>
<a href="#">Mouse over me!</a>
</body>
</html>
Try that, and see if it's approximately what you're after. If it is you may enjoy looking around in the css forum [webmasterworld.com]. On the other hand, if there is some reason that you must use javascript, just post back with a little more detail about what you need to do.
-B
Can someone please enlighten me to how this gets accomplshed:
<script>
function changecolor(nama) {
nama.style.backgroundColor = '#306EB4'
return true;
}
function returncolor(nama) {
nama.style.backgroundColor = 'red';
return true;
}
// -->
</script>
</head>
<body>
<table width=200 cellpadding="10px" border=1>
<tr>
<td onMouseOver="changecolor(this)" onMouseOut="returncolor(this)" style="background-color: red;">
<a href="#" style="background-color: #fff;">How can you make this bck color change on the td mouseover using dynamic CSS classes?</a>
</td>
</tr>
I'm not sure I understand the question; is it just that you want to know how to achieve the same effect with css alone? If so, take the code in my post above, and add this to the css:
a {display:block;}td {padding:0;}
Then add this to the markup:
<table>
<tr>
<td><a href="#">Mouse over me!</a></td>
</tr>
</table>
Things to note:
-B
How do you put the nice boxes around snippets of code in posts?
The Help Section style guide doesn't include that one
-Mike
P.S. I would like to know how to format my code snippets in a gray box like some of you do...any help?
Code:
----------------------------------------------------
<script>
//Custom JavaScript Functions by Shawn Olson
//Copyright 2004
//http://www.shawnolson.net
//If you copy any functions from this page into your scripts, you must provide credit to Shawn Olson & [shawnolson.net...]
//*******************************************
function changecss(theClass,element,value) {
//documentation for this script at [shawnolson.net...]
var cssRules;
if (document.all) {
cssRules = 'rules';
}
else if (document.getElementById) {
cssRules = 'cssRules';
}
for (var S = 0; S < document.styleSheets.length; S++){
for (var R = 0; R < document.styleSheets[S][cssRules].length; R++) {
if (document.styleSheets[S][cssRules][R].selectorText == theClass) {
document.styleSheets[S][cssRules][R].style[element] = value;
}
}
}
}
</script>
<style>
.exampleA {
background-color: green;
}
</style>
<table><tr><td class="exampleA">This is a test</td></tr></table>
<span class="exampleA">Example A</span>
<span class="exampleB">Example B</span>
<span class="exampleA">Example A</span>
<br />
<br />
<table border=1>
<tr>
<td onMouseOver="changecss('.exampleA','background','red')" >Change A Red</td>
<td onMouseOver="changecss('.exampleA','background','blue')" >Change A Blue</td>
</tr>
</table>
