changing text under picture

C

Casey Miller

I have a site, http://www.onemorewebsite.com, that has a menu on the left
side and a picture on the right side with a middle div for content in the
middle. When I mouse over the menu, the picture changes. I've got that part
to work. But I also want the text caption under the picture to change also.
I can't figure this one out. I've spent days learning about innerHTML,
textnodes, etc..but nothing works. Can anyone give me a clue? I'd sure
appreciate it. I got append.textnode to work. I can append the caption all
day long, but I'm trying to replace it.
Thanks!
(e-mail address removed)
 
E

Evertjan.

Casey Miller wrote on 07 feb 2006 in comp.lang.javascript:
I have a site, http://www.onemorewebsite.com, that has a menu on the
left side and a picture on the right side with a middle div for
content in the middle. When I mouse over the menu, the picture
changes. I've got that part to work. But I also want the text caption
under the picture to change also. I can't figure this one out. I've
spent days learning about innerHTML, textnodes, etc..but nothing
works. Can anyone give me a clue? I'd sure appreciate it. I got
append.textnode to work. I can append the caption all day long, but
I'm trying to replace it.

There are many ways, this is one:

<div id='nonHovering' style='display:;float:right;'>
<img src='img1.jpg'>
<br>
Text 1
</div>
<div id='Hovering' style='display:none;float:right;'>
<img src='img2.jpg'>
<br>
Text 2
</div>

.... menu ...
onmouseover="
var nonHovering = document.getElementById('nonHovering');
var Hovering = document.getElementById('Hovering');
nonHovering.style.display = 'none';
Hovering.style.display = '';"

onmouseout="
var nonHovering = document.getElementById('nonHovering');
var Hovering = document.getElementById('Hovering');
nonHovering.style.display = '';
Hovering.style.display = 'none';"

[a script function would make this more consize]
 
V

VK

Casey said:
I have a site, http://www.onemorewebsite.com, that has a menu on the left
side and a picture on the right side with a middle div for content in the
middle. When I mouse over the menu, the picture changes. I've got that part
to work. But I also want the text caption under the picture to change also.
I can't figure this one out. I've spent days learning about innerHTML,
textnodes, etc..but nothing works. Can anyone give me a clue? I'd sure
appreciate it. I got append.textnode to work. I can append the caption all
day long, but I'm trying to replace it.

Do not use document.write() on a loaded page: it clears its content and
breaks the script.

<html>
<head>
<title>DynText</title>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1">
<script type="text/javascript">
var myCaption = null;

function setCaption(txt) {
if (myCaption != null) {
myCaption.innerHTML = txt;
}
}

function init() {
if (document.getElementById) {
myCaption = document.getElementById('photoCaption');
}
else {
/*NOP*/
}
}

window.onload = init;
</script>
</head>

<body>

<p>
<a href="foobar.html"
onmouseover="setCaption('New caption 1')">Link 1</a>
<a href="foobar.html"
onmouseover="setCaption('New caption 2')">Link 2</a>
</p>

<p id="photoCaption">Photo caption</p>

</body>
</html>
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
474,432
Messages
2,571,682
Members
48,796
Latest member
Greg L.

Latest Threads

Top