PDA

View Full Version : change content on hover [was 'Probably a newb question..']

crunchymilk
06-29-2007, 07:34 PM
Okay, so I'm very new to HTML but I am making an attempt to learn. I'm attempting to design a page right now and I had something in mind. Problem is, I'm not sure how to do it. That's why I came to you!

What I want to do is pretty simple. It would appear to be just plain text on a page except when you roll over the text, it changes. On the site, I want the text to simply say 'Enter.' But when they roll over it, it should change to 'Site Under Construction.' Pretty nifty, eh?

Thank you to anyone that can help me! I appreciate it, believe me.

-crunchymilk
Horus_Kol
06-29-2007, 08:19 PM
for that you would need JavaScript onmouseover and onmouseout events... and look into innerHTML...
http://www.w3schools.com/jsref/default.asp is a good reference to start from

I'll move your thread over to the Client Side section, too...
zola70
06-29-2007, 10:07 PM
There are a ton of javascript snippets here.
http://javascript.internet.com/

I'll bet you can find one to do what you want.

Working in FrontPage2003, it is relatively easy to do with "behaviours".

Good luck.
coothead
06-29-2007, 11:52 PM
Hi there crunchymilk,

and a warm welcome to these forums. :agree:

This is a basic example that shows the correct document structure to use...

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>splash page</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">
body {
background-color:#ffc;
}
#entry {
font-family:verdana,arial,helvetica,sans-serif;
font-size:2em;
color:#000;
text-align:center;
margin-top:10em;
}
</style>

<script type="text/javascript">
window.onload=function() {
obj=document.getElementById('entry');
obj.onmouseover=function() {
this.firstChild.nodeValue='Site Under Construction';
}
obj.onmouseout=function() {
this.firstChild.nodeValue='Enter';
}
}
</script>

</head>
<body>

<h1 id="entry">Enter</h1>

</body>
</html>