Here's neat little script that displays additional text when you mouse over a text link (or graphic). You can place the text display DIV(s) anywhere you like, or seperate them to suit your page layout
Place the following in the <head> tags.
<script language="Javascript">
<!--
function toggleDiv(id,flagit) {
if (flagit=="1"){
if (document.layers) document.layers[''+id+''].visibility = "show"
else if (document.all) document.all[''+id+''].style.visibility = "visible"
else if (document.getElementById) document.getElementById(''+id+'').style.visibility = "visible"
}
else
if (flagit=="0"){
if (document.layers) document.layers[''+id+''].visibility = "hide"
else if (document.all) document.all[''+id+''].style.visibility = "hidden"
else if (document.getElementById) document.getElementById(''+id+'').style.visibility = "hidden"
}
}
//-->
</script>
Now set the display DIV style and positioning by placing the following in the <head> tags. Modify it to suit yourself.
<style type="text/css">#div1, #div2, #div3 {position:absolute; top: 100; left: 200; width:200; visibility:hidden}</style>
Now use the following to create the links. If you want to use them as proper links, replace # with your URLs.
<a href="#" onMouseOver="toggleDiv('div1',1)" onMouseOut="toggleDiv('div1',0)">Link 1!</a> |
<a href="#" onMouseOver="toggleDiv('div2',1)" onMouseOut="toggleDiv('div2',0)">Link 2</a> |
<a href="#" onMouseOver="toggleDiv('div3',1)" onMouseOut="toggleDiv('div3',0)">Link 3</a>
And finally add the associated text divs. You can relegate these to the bottom of the page (out of the way) if they get in the way.
<div id="div1">Link 1 text! I've restrained the div size to 200px wide in the style declaration. Modify this to suit yourself.</div>
<div id="div2">Link 2 text! You can add all the usual style options, and position it to suit yourself!</div>
<div id="div3">Link 3 text! Use it to explain terms or further describe your linked pages, whatever!</div>
No comments:
Post a Comment