Hover - change text [Archive]

kpsony

09-07-2007, 06:26 PM

quick question... looking have a scrollable menu inside the pop-up window should then list the downloadable files as linkable text. When you hover over the file, a brief description blurb should appear adjacent to the text field.

can you do that? if not, how can i have it so when i hove rover certain text, the text adjacent to it changes...

thanks for any help!

dtm32236

09-07-2007, 06:49 PM

you're looking to show/hide a div (making it display:none; by default and display:block; onmouseover.) and you can use javascript to do this.

i dont have time to start writing code, but this may be a good place to start. if this doesn't help, try googling 'showing and hiding divs' or something.
http://www.netlobo.com/div_hiding.html

if you can't figure it out, i'll be able to help you out with it on monday.

WebJoel

09-07-2007, 07:31 PM

Like this example? :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title></title>
<style type="text/css">
a:link {color:#212121;}
a:visited {color:#008080;}
a:hover {color:#FF0000;}
a:active {color:#000000;}
/* above: controls colors of links */

.buttons a {color:#000000; background-color:white; display:block;
font:13px arial, sans-serif; font-weight: bold; text-decoration:none;
margin-top:3px}
/* Above: controls how 'buttons' anchors behave */

.buttons a:hover {background-color:#ffffff; font:13px verdana;
font-weight: bold; text-decoration:none;}
/* Above: controls how 'buttons anchor on-hover' behave */

#menu {position:relative; width:160px; height:auto;
text-align: center; padding:10px 0 10px 0; border:1px double silver;}
/* Above: the actual "menu", a list of links */

#menu a span {display:none;}
/* Above: how the "<span>text la-la-la text</span>" is handled */

#menu a:hover span {
display:block; position:absolute;
top:145px; left:10px;
width: 125px;
z-index: 100;color:black;
background-color:#fff99d; padding:10px; font:1em Verdana, sans-serif;
border:1px solid black;
/* Above: how the <span>text la-la-la text</span> is handled when
hovering over the visible link-text (the 'pop-up') */
}
</style>

<link rel="shortcut icon" href="favicon.ico">
</head>
<body>

<div id="menu" class="buttons">
<div id="menu">
<a href="http://www.w3cschools.com">w3cschools<span>World Wide Web Consortium ("W3C") Schools Web Site</span></a>
<a href="http://www.webdeveloper.com">webdeveloper.com<span>WebDeveloper.com Forums, offering free help with your web pages.</span></a>
<a href="http://www.msn.com">MSN<span>The MSN Start page: A useful "HOME PAGE" as place to start your daily search.</span></a>
<a href="http://joelburdick.awardspace.com">My Site<span>Joel's online site of published web sites.</span></a>
<a href="http://joelburdick.awardspace.com/carved_wood">Ontario Carved Driftwood<span>A Wood-carved Elephant Head that
I made this past summer from driftwood that I found here in Toronto by Lake Ontario.</span></a>
</div>
</div>

</body>
</html>

kpsony

09-10-2007, 12:11 PM

exactly! Thank you so much!