PDA

View Full Version : more rollovers

acslater323
03-01-2006, 11:48 PM
Okay, I don't think you can do THIS with CSS, but we'll see..

I have a series of images that when rolled over display a block of text in a div located on another part of the page. So I have a function set up that gets the text passed through it to the innerHTML... i.e:

<script>
function rollover(text) {
getElementById('info').innerHTML=text;
}
</script>
<html>
img onMouseOver="rollover('this is image one')"
</html>

The problem is, this confines me to very limited text formatting. I'd like to do some styling with CSS but Javascript won't let you start throwing span tags in the parentheses, and even if it did, it's bloated code that no one wants to deal with.

So how do you pass text through a function without losing the formatting?

-Aaron
_Aerospace_Eng_
03-02-2006, 01:38 AM
Style the info div with CSS, you won't lose the formatting. innerHTML allows you whatever html you want. Yeah you are right CSS can't make text appear on another part of the page unless the text was actually inside of the anchor tag itself.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
#blah {
color:#F00;
}
</style>
<script type="text/javascript">
function rollover(what,text)
{
el = document.getElementById(what);
document.getElementById('info').innerHTML = '<span id="blah">'+text+'</span>';
el.onmouseout = function()
{
document.getElementById('info').innerHTML = '';
}
}
</script>
</head>

<body>
<a href="#" id="link1" onmouseover="rollover('link1','this is link1')">Link 1</a>
<div id="info"></div>
</body>
</html>