Demo 7: Fancy Pop Up Text     |     home
Step 1   |   Step 2   |   Step 3   |   Step 4
Another example!
Step 4
OK, what we've just have been looking at was an example straight from Dynamic Drive.
I copied and pasted each of those three scripts "as is" and they worked just fine.

On this page, I will show you a customized example, with only three selections!

Welcome to our new look!
Hope you like the new look for Dynamic Drive. This is the first in a series of steps we're taking to improve our site. In the very near future, you can expect many cool features such as a new forum, newsletter, feedback form, and more, to be introduced. Enjoy!


And here are the contents of the three web gems ...

Head Web Gem:
<script>
<!--

/*
Textual Tooltip Script-
© Dynamic Drive (www.dynamicdrive.com)
For full source code, installation instructions,
100's more DHTML scripts, and Terms Of
Use, visit dynamicdrive.com
*/

var content=new Array()
//change the array below to the text associated with your links Expand or contract the array, depending on how many links you have
content[0]='<br><big><b>Cafe Trellix</b></big><br>Click here to enter the wonderful world of Cafe Trellix, with discussion forums, live chat area, and downloads.'
content[1]='<br><big><b>KW Trellix Support</b></big><br>The Unofficial Trellix Support site with demos, tutorials, and sample code...'
content[2]='<br><big><b>SW Galleries</b></big><br>Find out about art in the style of the old Renaissance masters, like Raphael.  You will also find notecards, bookmarks and prints available for purchase, here at SW Galleries.'

function regenerate(){
window.location.reload()
}
function regenerate2(){
if (document.layers){
appear()
setTimeout("window.onresize=regenerate",450)
}
}

function changetext(whichcontent){

if (document.all||document.getElementById){
cross_el=document.getElementById? document.getElementById("descriptions"):document.all.descriptions
cross_el.innerHTML='<font face="Verdana"><small>'+whichcontent+'<font></small>'
}
else if (document.layers){
document.d1.document.d2.document.write('<font face="Verdana"><small>'+whichcontent+'</small></font>')
document.d1.document.d2.document.close()
}

}

function appear(){
document.d1.visibility='show'
}

window.onload=regenerate2
//-->
</script>

Left side web gem:
<div id="scriptmenu" style="line-height:20px"><p><strong><font
            face="Verdana"><a href="cafe.trellix.com" onMouseover="changetext(content[0])"><small>Cafe Trellix home page
            </small></a><br>
            <a href="www.kwsupport.com/csb/index.htm" onMouseover="changetext(content[1])"><small>The Unofficial CuteSITE Builder/Trellix Support site
            </small></a><br>
            <a href="www.swgalleries.com/index.htm" onMouseover="changetext(content[2])"><small>Art  Gallery</small></a></font></strong></p>
</div>

Right side web gem:
<ilayer id="d1" width="200" height="200" visibility="hide">
<layer id="d2" width="200" height="200">
<div id="descriptions" align="left">

<!--Change below to default content of your own-->
<strong><font face="Verdana" color="#000000"><p>Welcome to our new look!<br>
        </font></strong><font face="Verdana"><small>Hope you like the new look for Dynamic Drive.
        This is the first in a series of steps we're taking to improve our site. In the very near
        future, you can expect many cool features such as a new forum, newsletter, feedback form,
        and more, to be introduced. Enjoy!</small><br>
        </font>
<!--Stop editting-->

</div>
</layer>
</ilayer>