PDA

View Full Version : on mouse off event



rich1234
06-11-2007, 09:08 AM
Textual tooltip Script

http://www.dynamicdrive.com/dynamicindex5/linkinfo.htm

Hi, firstly, thanks for help with a previous quiery.


About this script.

After any mouseover event the text associated with that link remains visible.

I am using this script on two pages

1. On one page I need to have it so that on ever mouseoff, the text returns to the default text, ie "Welcome to our new look!"

2. On the second page, on mouseoff, no text is shown.

Thanks in advance
Richard

jscheuer1
06-11-2007, 03:09 PM
Note: In this response I am only working with the code 'as is' from the demo page in an effort to accommodate the request. No attempt at improving the basic script or its markup has been made.

There is no 'mouseoff'. What I think you want is onmouseout. This version returns to the default text onmouseout:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<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>Menus and navigation systems</b></big><br>Click here for DHTML scripts that help enhance your site\'s navigability, such as collapsible menus, sliding menu bars etc.'
content[1]='<br><big><b>Special document effects</b></big><br>With the advent of DHTML, webpages are one step closer to its cousin, TV, in terms of special effects...'
content[2]='<br><big><b>Scrollers</b></big><br>Up until now, adding a scroller or tickertape to your website usually meant using a slow Java applet. Not anymore. Click here for DHTML scrollers that accomplish the same task with minimal download time.'
content[3]='<br><big><b>Image effects</b></big><br>Add lightweight effects to your existing images using these scripts. Make them fly, light up, turn static, all without paying the cost of slow downloading time.'
content[4]='<br><big><b>Links and buttons</b></big><br>Add tooltips to your text links, rollover effects to your form buttons, keyboard features to your document, and more.'
content[5]='<br><big><b>Dynamic clocks and dates</b></big><br>Time is never static, so why should your time script be? Enter for DHTML scripts that actually understand this simple truth.'
content[6]='<br><big><b>Text animations</b></big><br>Text have been silent for too long- DHTML promises to free them, with flying text, typing text, dragable text, and more.'
content[7]='<br><big><b>Browser window</b></big><br>Click here scripts related to the browser window and frames.'
content[8]='<br><big><b>Other</b></big><br>All scripts that don\'t comfortably fit in any of the above categories go here...'
content[9]='<big><strong><font face="Verdana" color="#000000"><p>Welcome to our new look!<br></font></strong></big><font face="Verdana">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!<br> </font>'
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>
</head>
<body>
<table border="1" width="85%">
<tr>
<td><div id="scriptmenu" style="line-height:20px"><p><strong><font
face="Verdana"><a href="../dynamicindex1/index.html" onmouseout="changetext(content[9]);" onmouseover="changetext(content[0])"><small>Menus
and Navigation Systems</small></a><br>
<a href="../dynamicindex3/index.html" onmouseout="changetext(content[9]);" onmouseover="changetext(content[1])"><small>Special&nbsp;document
effects</small></a><br>
<a href="../dynamicindex2/index.html" onmouseout="changetext(content[9]);" onmouseover="changetext(content[2])"><small>Scrollers</small></a><br>
<a href="../dynamicindex4/index.html" onmouseout="changetext(content[9]);" onmouseover="changetext(content[3])"><small>Image
effects</small></a><br>
<a href="index.html" onmouseout="changetext(content[9]);" onmouseover="changetext(content[4])"><small>Links and buttons</small></a><br>
<a href="../dynamicindex6/index.html" onmouseout="changetext(content[9]);" onmouseover="changetext(content[5])"><small>Dynamic
Clocks and dates</small></a><br>
<a href="../dynamicindex10/index.html" onmouseout="changetext(content[9]);" onmouseover="changetext(content[6])"><small>Text
animations</small></a><br>
<a href="../dynamicindex8/index.html" onmouseout="changetext(content[9]);" onmouseover="changetext(content[7])"><small>Browser
Window</small></a><br>
<a href="../dynamicindex11/index.html" onmouseout="changetext(content[9]);" onmouseover="changetext(content[8])"><small>Other</small></a></font></strong></p>
</div></td>
<td width="75%"><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></td>
</tr>
</table>

</body>
</html>

In it, if you change:


content[9]='<big><strong><font face="Verdana" color="#000000"><p>Welcome to our new look!<br></font></strong></big><font face="Verdana">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!<br> </font>'

to:


content[9]=''

The onmouseout behavior will be to change to a blank 'tip'.

jscheuer1
06-11-2007, 03:17 PM
It occurred to me that you might be looking for something slightly different, as this has come up before. See also:

http://home.comcast.net/~jscheuer1/side/textual_tooltip_h.htm

and the post that it was made for:

http://www.dynamicdrive.com/forums/showthread.php?t=15725