Here is another way to change text in situ using one of the following properties.
Both innerText and innerHTML represent what's contained inside the element, though the later includes its HTML makeup as well, outerText and outerHTML include the element(s) itself.
To see these in action press a button. You need at least IE 4+ to view this example
<div id="test"><b>This is some sample HTML stuff</b></div>
alert("InnerText shows: "+test.innerText)
alert("OuterText shows: "+test.outerText)
alert("InnerHTML shows: "+test.innerHTML)
alert("OuterHTML shows: "+test.outerHTML)
<DIV id=description><b>This default line of text is going to change when you pass your mouse over the link below</b></DIV>
<P><A href="#null" onmouseover="document.getElementById('description').innerHTML='And is replaced with something completely different.'" onmouseout="document.getElementById('description').innerHTML='This line of text is going to change when you pass your mouse over the link below'">The Link</A>
You can use other tags beside the A HREF tag and you can isolate the effect to a word or a section of text.
The following example uses the SPAN tag.
This default line of text is going to change when your mouse is passed over the white text
<span onmouseover="document.getElementById('description2').innerHTML='<b>has now changed</b>.'" onmouseout="document.getElementById('description2').innerHTML='<b>can be changed with any onmouse event</b>.'">This default line of text</span>
<span id=description2><b> is going to change when your mouse is passed over the white text</b></span>
<P><DIV id=example style="height:50; font-weight:bold" align=center></DIV>
<script type="text/javascript">
<!--
// Realised by apachejeff
var contents=new Array() // Your message list
contents[1]='Scroll through an assortment of messages'
contents[2]='You can include HTML tags and style attributes'
contents[3]='Just be wary of the quotes'
contents[4]='<img src="../../style/chicken.gif" width=50 height=50>'
contents[5]='Yes you can even have images in here and links'
contents[0]='This link works....try it out <a href="yourpage.htm" target=yourframe>The Link</a>'
i=0; // Initialises i to zero
pause=5000
function change(){
if(i>contents.length-1){// if i equals the length of the array contents reset i to zero
i=0
}
document.getElementById("example").innerHTML=contents[i]; // Show results at div id example
i++
timer=setTimeout("change()",pause) // repeat after set time
}
window.onload=change // run script when page has loaded
//-->
</script>
BODY onload=Display(Message1)
<script type="text/javascript">
<!--
var Message1 = 'A message shown when the page first loads'
var Message2 = "A message to display onmouseout."
function Display(txt) {
document.getElementById("place").innerHTML = txt
}
// add onload="Display(Message1)" to the opening BODY tag
//-->
</script>
<BODY>
<DIV id=place style="position:absolute; top:100px; left:200px; width: 280px; height:150px; background-color:#FF5555; border:4 ridge blue"></DIV>
<P><A href="#null" onclick="Display('content to display when link is clicked')">Click Link 1</A> <P><A href="#null" onclick="Display('your content for this link')" onmouseout="Display(Message2)">Click Link 2</A> <P><A href="#null" onclick="Display('your content for link 3 here')" onmouseover="Display('You can display <b>OnMouseOver</b>')" onmouseout="Display('<b>OnMouseOut</b> can be another message')">Click Link 3</A>
|
Link 1 Link 2 Link 3 |
This is the first to be seen |
<script type="text/javascript">
function List1(){
document.getElementById("Change").innerHTML ="You can change the text within a cell onmouseover ";
document.getElementById("Change2").innerHTML ="Text does not have to be in a table ";
}
function List2(){
document.getElementById("Change").innerHTML = "Just like this";
document.getElementById("Change2").innerHTML = "You can put it anywhere";
}
function List3(){
document.getElementById("Change").innerHTML = "Useful for lists or link information"
document.getElementById("Change2").innerHTML = "Just like this"
}
</script>
<A href="#" onmouseover="List1()">Link 1</A>
<A href="#" onmouseover="List2()">Link 2</A> <A id=Change> This is the first to be seen</A>
<A href="#" onmouseover="List3()">Link 3</A>
<A id=Change2></A>