changing text under picture

Casey Miller · Feb 7, 2006

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)

Evertjan. · Feb 7, 2006

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]

VK · Feb 7, 2006

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>

Put picture on the right side of the page?	1	Feb 3, 2023
Can't wrap text around image and one more	1	Jul 25, 2025
Iframe link overlapping text	4	Jan 18, 2021
IE doesn't show picture in the middle	21	Oct 25, 2013
Changing text with picture	10	Feb 16, 2007
My "telegram_polling()" and "@message_handler" does not work on "herokuapp.com" under gunicorn	0	Dec 12, 2021
Only one table shows up with the information	2	Mar 29, 2023
How to have two html audio players on one page?	0	May 3, 2022

changing text under picture

Casey Miller

Evertjan.

VK

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads