Display text using mouseover

britbrat5uk · Oct 27, 2004

Hi all,

Hope you can help! I am trying to code something that when the mouse cursor moves over the text (that I turned into a link) it displays some text to explain it further. Expands on the header if you like. I have tried using span tags but I want all the text to appear in the same spot on the page, so when one desc is read, the next header is rolled over and a new desc it displayed in the same spot.

How do I do this? I hope that makes sense!

Thanks

H

TheConeHead · Oct 27, 2004

use divs positioned absolute and chage the visibility based on what is rolloed over...

[conehead]

cLFlaVA · Oct 27, 2004

positioning does not need to be absolute:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "[URL unfurl="true"]http://www.w3.org/TR/html4/strict.dtd">[/URL]

<html>
<head>
<title>new document</title>

<script language="javascript" type="text/javascript">
<!--

function changeDesc(d) {
    document.getElementById('desc').innerHTML = d;
}

-->
</script>

<style type="text/css">

#desc {
	float: right;
	width: 200px;
	border: 1px solid black;
	height: 300px;
	}

#main {
    margin: 0 auto;
    width: 400px;
    }

</style>

</head>

<body>

<div id="main">

	<div id="desc"></div>

	<a href="#" onmouseover="changeDesc('this is the description for link 1');" onmouseout="changeDesc('');">Link 1</a><br />
	<a href="#" onmouseover="changeDesc('this is the description for link 2');" onmouseout="changeDesc('');">Link 2</a><br />
	<a href="#" onmouseover="changeDesc('this is the description for link 3');" onmouseout="changeDesc('');">Link 3</a><br />
</div>

</body>

</html>

*cLFlaVA
----------------------------
Lois: "Peter, you're drunk!"
Peter: "I'm not drunk, I'm just exhausted from stayin' up all night drinking!

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Display text using mouseover

britbrat5uk

Programmer

TheConeHead

Programmer

cLFlaVA

Programmer

Similar threads

Part and Inventory Search

Sponsor