PDA

Click to See Complete Forum and Search --> : changing text onClick()

leighhalliday
11-11-2003, 10:27 PM
I have some text at the bottom of my page that I want to change when different images are clicked. I am not sure how to just change the text. When I use the document.write it writes the text to a new screen. Like to do a rollover with an image you can change the src of the image by using javascript, but how would you change just some text?

Any help would be appreciated.
Charles
11-12-2003, 05:24 AM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="Content-Script-Type" content="text/javascript">
<title>Example</title>

<ul>
<li><img alt="Bettie in a bikini." onclick="document.getElementById('text').firstChild.data = this.alt" src="http://www.bettiepage.com/images/photos/bikini/bikini1.jpg"></li>
<li><img alt="Bettie and her under-garments." onclick="document.getElementById('text').firstChild.data = this.alt" src="http://www.bettiepage.com/images/photos/leggy/leggy1.jpg"></li>
<li><img alt="Bettie with a whip." onclick="document.getElementById('text').firstChild.data = this.alt" src="http://www.bettiepage.com/images/photos/whip/whip7.jpg"></li>
</ul>

<p id="text">&amp;nbsp;</p>
clairec666
11-12-2003, 05:28 AM
<div id="text">
<img src="" onmouseover="changetext('Hello')">
<script type="text/javascript">
function changetext(msg) {
document.all.text.innerHTML = msg;
}
</script>
Charles
11-12-2003, 05:35 AM
Originally posted by clairec666
<div id="text">
<img src="" onmouseover="changetext('Hello')">
<script type="text/javascript">
function changetext(msg) {
document.all.text.innerHTML = msg;
}
</script> That's a non-sstandard, MSIE only version.
Javium
11-13-2003, 05:28 PM
Leigh,
Thank you very much for your great help on my slideshow with array (see under <How do I a 'GoTo'> section). It works perfectly (I wrote the code accordingly to my needs).
The images are changing after some seconds but the text that is below the image (such a descriptive line) is not updated. As you, I have the same problem, so I am unable to help you at this time. I'm sorry...

What I have done, is created a table, with two cells, one for the image, and the other for the description.
My question is: How can I change the content of a table cell (text only) ?

Javium
Javium
11-15-2003, 09:42 AM
Leigh,
I have the solution!
You have to create a table where the text will be put inside. You can of course create a borderless table with border=0.
Then you can use the function change() to change te content of the cell.
The below demo will change the value of the cell after 2 seconds.
Hope it helps you! ;)

<html>
<head>
<title>New Page 1</title>
</head>
<body>
<table width=500 border=1>
<tr><td id="boxmain" align="right">First text to be read</td></tr>
<tr><td bordercolor="black" bgcolor="ivory" height="18"><font id="boxdescription" face="Verdana" size="2"></font></td></tr>
</table>
<script language="javascript">
setTimeout("change()",2000);
function change() {
var tx = "The new value is now displayed"
document.getElementById("boxmain").innerHTML = tx // either "boxdescription" or "boxmain" are okay
}
</script>
</body>
</html>