What I'd like to have happen with the code below is that on mouse over, the text appears in white, within a green box with a red border. Why doesn't this work? Like it says above...I am just trying to understand this better.
function hidecursor()
{
test.style.visibility="hidden"
}
</script>
</head>
<body bgcolor="black">
<a href="#" onmousemove="cursor('Text is white. Background for the text should be green, with a red border.')" onmouseout="hidecursor()">Mouse Over This</a><br />
Instead of the JavaScript (which will not be available/enabled by all users), just let CSS do the work:
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang='en'>
<head>
<META HTTP-EQUIV='Content-Type' CONTENT='text/html; charset=ISO-8859-1'>
<title>Untitled</title>
<style type="text/css">
a {
color: #5892AD;
padding: 2px;
}
a:hover {
padding: 1px;
text-decoration: none;
background-color: green;
color: white;
border: solid 1px red;
}
</style>
</head>
<body>
<h1>This is a test.</h1>
<p>This is a test. <a href="somepage.html">It is only a test.</a></p>
<p>The end.</p>
</body>
</html>
"Please give us a simple answer, so that we don't have to think, because if we think, we might find answers that don't fit the way we want the world to be."
~ Terry Pratchett in Nation
It's okay if it's using JavaScript because this is for work (an IE only shop, unfortunately), and everyone's attributes are the same.
What I want to have happen is have that text block appear next to the cursor when a user mouses over the link. It's the text block that I would like to have a colored background, not the link itself. I guess I'd like it to be a like a little "tip" box with the text I have in the top post.
Another question...should I have posted this in DHTML? All of these different types of formatting and scripting seem to be pretty well intertwined...and I just wasn't sure where to post this. If it's in the wrong place, I apologize.
Thanks,
Tom
Last edited by TomWeinstock; 01-27-2005 at 09:42 AM.
"Please give us a simple answer, so that we don't have to think, because if we think, we might find answers that don't fit the way we want the world to be."
~ Terry Pratchett in Nation
Looks like the JS property is "backgroundColor". (Caveat, my JS book is a few years old now.)
"Please give us a simple answer, so that we don't have to think, because if we think, we might find answers that don't fit the way we want the world to be."
~ Terry Pratchett in Nation
You might also think about a couple of other options instead of javascript which I find to be much much easier.
Use CSS to draw the boxes and control the colors with the a:hover as recommended by NogDog
or
if you are looking to use images, make an image with the different looks you want for the button all stacked on top of each other then have CSS 'move' the image if they mouse over it. I can explain further if you need.
Reply With Quote
Bookmarks