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.
Thanks guys.
<html>
<head>
<style>
a{color:#5892AD;}
</style>
<script type="text/javascript">
function cursor(txt)
{
test.innerHTML=txt
test.style.visibility="visible"
test.style.position="absolute"
test.style.color="white"
test.style.border-width=1
test.style.border-color="red"
test.style.left=event.clientX+10
test.style.top=event.clientY
}
function hidecursor()
{
test.style.visibility="hidden"
}
</script>
</head>
<body bgcolor="black">
<a href=http://www.webdeveloper.com/forum/archive/index.php/"#" onmousemove="cursor('Text is white. Background for the text should be green, with a red border.')" onmouseout="hidecursor()">Mouse Over This</a><br />
<span id="test" style="visibility:hidden">ignore me</span>
</body>
</html>Instead of the JavaScript (which will not be available/enabled by all users), just let CSS do the work:
<!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=http://www.webdeveloper.com/forum/archive/index.php/"somepage.html">It is only a test.</a></p>
<p>The end.</p>
</body>
</html>Thanks for the reply NogDog, I appreciate it.
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,
TomOkay, I've got it working, except for the background color.
Inside the red box, I would like it to be green. Do I have the syntax correct?
<html>
<head>
<style>
a{color:#5892AD;}
</style>
<script type="text/javascript">
function cursor(txt)
{
test.innerHTML=txt;
test.style.visibility="visible";
test.style.position="absolute";
test.style.border = "1px solid red";
test.style.color="white";
test.style.bgcolor="green";
test.style.left=event.clientX+10;
test.style.top=event.clientY;
}
function hidecursor()
{
test.style.visibility="hidden"
}
</script>
</head>
<body bgcolor="black">
<a href=http://www.webdeveloper.com/forum/archive/index.php/"#" onmousemove="cursor('Text is white. Background should be green.')" onmouseout="hidecursor()">Mouse Over This</a><br />
<span id="test" style="visibility:hidden">ignore me</span>
</body>
</html>Try "background-color".Originally posted by NogDog
Try "background-color".
I get an error. "Line 29 - object expected"Looks like the JS property is "backgroundColor". (Caveat, my JS book is a few years old now.)Originally posted by NogDog
Looks like the JS property is "backgroundColor". (Caveat, my JS book is a few years old now.)
excellent! It's working now. Thanks NogDog!!Is there somewhere online that I can see the different style attributes associated with JavaScript?Originally posted by TomWeinstock
Is there somewhere online that I can see the different style attributes associated with JavaScript?
Amazing what Google can do. LOL
never mind the above request.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.
Just some suggestions for you to think about
Thanks guys.
<html>
<head>
<style>
a{color:#5892AD;}
</style>
<script type="text/javascript">
function cursor(txt)
{
test.innerHTML=txt
test.style.visibility="visible"
test.style.position="absolute"
test.style.color="white"
test.style.border-width=1
test.style.border-color="red"
test.style.left=event.clientX+10
test.style.top=event.clientY
}
function hidecursor()
{
test.style.visibility="hidden"
}
</script>
</head>
<body bgcolor="black">
<a href=http://www.webdeveloper.com/forum/archive/index.php/"#" onmousemove="cursor('Text is white. Background for the text should be green, with a red border.')" onmouseout="hidecursor()">Mouse Over This</a><br />
<span id="test" style="visibility:hidden">ignore me</span>
</body>
</html>Instead of the JavaScript (which will not be available/enabled by all users), just let CSS do the work:
<!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=http://www.webdeveloper.com/forum/archive/index.php/"somepage.html">It is only a test.</a></p>
<p>The end.</p>
</body>
</html>Thanks for the reply NogDog, I appreciate it.
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,
TomOkay, I've got it working, except for the background color.
Inside the red box, I would like it to be green. Do I have the syntax correct?
<html>
<head>
<style>
a{color:#5892AD;}
</style>
<script type="text/javascript">
function cursor(txt)
{
test.innerHTML=txt;
test.style.visibility="visible";
test.style.position="absolute";
test.style.border = "1px solid red";
test.style.color="white";
test.style.bgcolor="green";
test.style.left=event.clientX+10;
test.style.top=event.clientY;
}
function hidecursor()
{
test.style.visibility="hidden"
}
</script>
</head>
<body bgcolor="black">
<a href=http://www.webdeveloper.com/forum/archive/index.php/"#" onmousemove="cursor('Text is white. Background should be green.')" onmouseout="hidecursor()">Mouse Over This</a><br />
<span id="test" style="visibility:hidden">ignore me</span>
</body>
</html>Try "background-color".Originally posted by NogDog
Try "background-color".
I get an error. "Line 29 - object expected"Looks like the JS property is "backgroundColor". (Caveat, my JS book is a few years old now.)Originally posted by NogDog
Looks like the JS property is "backgroundColor". (Caveat, my JS book is a few years old now.)
excellent! It's working now. Thanks NogDog!!Is there somewhere online that I can see the different style attributes associated with JavaScript?Originally posted by TomWeinstock
Is there somewhere online that I can see the different style attributes associated with JavaScript?
Amazing what Google can do. LOL
never mind the above request.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.
Just some suggestions for you to think about