Este
es un Script muy hermoso al cual puedes instalar
fácilmente en tu sitio.
Para
lograr este efecto pegas este Script en cualquier sector de tu sitio, pero
siempre debajo de donde dice
<Head> en el HTML de tu página:
<script>
<!--
/*
Textual Tooltip Script II-
© 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...'
function regenerate(){
window.location.reload()
}
function regenerate2(){
if (document.layers)
setTimeout("window.onresize=regenerate",450)
}
function changetext(whichcontent){
if (document.all)
descriptions.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()
}
}
//-->
</script>
|
Lo
que pinté con rojo es el título de los mensajes que sale en
la parte de abajo para explicar las opciones que
has dado a los visitantes de tu página para
ingresar, y lo que pinté con azul, son las
explicaciones que van debajo del título. Cambias
todos los textos como te agrade.
Y
este es el código a pegar debajo de donde dice
<Body> en el HTML de tu página:
<div id="scriptmenu" style="line-height:20px"><p><strong><font
face="Verdana"><a href="../dynamicindex1/index.html" onMouseover="changetext(content[0])"><small>Menus
and Navigation Systems</small></a><br>
<a href="../dynamicindex3/index.html" onMouseover="changetext(content[1])"><small>Special document
effects</small></a><br>
<a href="../dynamicindex2/index.html" onMouseover="changetext(content[2])"><small>Scrollers</small></a><br>
<a href="../dynamicindex4/index.html" onMouseover="changetext(content[3])"><small>Image
effects</small></a><br>
<a href="index.html"
onMouseover="changetext(content[4])"><small>Links and buttons</small></a><br>
<a href="../dynamicindex6/index.html" onMouseover="changetext(content[5])"><small>Dynamic
Clocks and dates</small></a><br>
<a href="../dynamicindex10/index.html" onMouseover="changetext(content[6])"><small>Text
animations</small></a><br>
<a href="../dynamicindex8/index.html" onMouseover="changetext(content[7])"><small>Browser
Window</small></a><br>
<a href="../dynamicindex11/index.html" onMouseover="changetext(content[8])"><small>Other</small></a></font></strong></p>
</div>
<ilayer id="d1" width="155" height="155">
<layer id="d2" width="155" height="155">
<div id="descriptions" align="left">
</div>
</ilayer>
</layer>
|
Lo
que he pintado con Azul son los títulos que
colocas en los enlaces (cuando el visitante pasa
el ratón por sobre ellos, se habilitan las
instrucciones que declaramos arriba), y lo que
pinté con verde, son las direcciones de esos
enlaces, a donde conducirán al visitante si hace
click en ellas.
Aquí copio nuevamente el código con
opción para seleccionarlo, cortar y pegar en tu
sitio.
Para
ello haces click en cualquier palabra que se halla
dentro de la caja, Te diriges a "Edición"
en el menú superior de la barra de herramientas, e
indicas "Seleccinar todo", luego tomas lo
seleccionado dirigiéndote nuevamente a "Edición",
pero esta vez indicas "Cortar", y
posteriormente te posicionas en tu página, donde
quieres colocar este código, entonces te diriges a
Edición, y le indicas "Pegar".
Si
deseas hacer las cosas más rápido, puedes verificar
en "Edición" (está escrito al lado de las
palabras que indican cada orden) que pulsando
"Control" + una letra determinada, puedes
"seleccionar todo", "cortar" o
"pegar" en forma instantánea y con eso
evitas tener que ingresar constantemente al menú de
"Edición".
Esto
es lo que debes pegar debajo de donde dice <Head>
en el HTML de tu página:
Esto
es lo que debes pegar debajo de donde dice <Body>
en el HTML de tu página:
Si
de todos modos, no funciona este efecto, corta
el código HTML que debes colocar en tu página,
pero antes de hacerlo, pégalo en tu Block de
notas, y luego si córtalo de allí y pégalo en
tu sitio. Ahora si no creo que haya ningún
inconveniente que te impida disfrutar de este
bonito efecto.
Recordemos
que este Script también puede ser hallado en el
programa AAScripter v2, el cual puedes bajar de aquí:
http://www.cyberiapc.com
Buena
suerte.
