pro-Gramas tu biblioteca de programacion
Tutoriales de Javascript
Introducción
Solo tienes que copear el código que esta abajo y descargar las imagenes minus131.gif y plus131.gif para que funcione correctamente el script.
Puedes descargar el ejemplo funcionando al final del documento.
<html>
<head>
<title>Menú lateral con submenús</title>
</head>
<p align="center"><b>Menú lateral con submenús</b></p>
<style>
A { font-family : Verdana; color:white; background-color:white;
text-decoration: none;}
A:Visited {color :#000000;}
A:Hover {background-color:lightgreen; font-style:normal;}
A:Active {color : lightgreen;}
</style>
<script>
var menublock=new Array() // no need to change this
var plus_i=0 // no need to change this
menublock[0]="Verdana;"+ // font mainlink
"1;"+ // fontsize mainlink
"#000000;"+ // fontcolor mainlink
"1;"+ // fontweight mainlink, 1 means bold, 0 means normal
"Verdana;"+ // font sublinks
"1;"+ // fontsize sublinks
"#000000;"+ // fontcolor sublinks
"0;"+ // fontweight sublinks, 1 means bold, 0 means normal
"Actualidad informática|#|;"+ // text|URL|target of mainlink
"Portales de informática|submenu11.html|main;"+ // text|URL|target of first sublink
"Revistas de informática|submenu12.html|main;" // text|URL|target of second sublink
menublock[1]="Verdana;"+ // font mainlink
"1;"+ // fontsize mainlink
"#000000;"+ // fontcolor mainlink
"1;"+ // fontweight mainlink, 1 means bold, 0 means normal
"Verdana;"+ // font sublinks
"1;"+ // fontsize sublinks
"#000000;"+ // fontcolor sublinks
"0;"+ // fontweight sublinks, 1 means bold, 0 means normal
"Diseño|#|;"+ // text and URL of first mainlink
"Recursos generales|submenu21.html|main;"+ // text|URL|target of mainlink
"Gráficos|submenu22.html|main;"+ // text|URL|target of first sublink
"Iconos|submenu23.html|main;"+ // text|URL|target of second sublink
"Imágenes|submenu24.html|main;"+ // text|URL|target of thirth sublink
"Salvapantallas|submenu25.html|main;" // text|URL|target of fourth sublink
// The following block is different. It contains a mainlink without submenus.
// Take care to set the ";;;;" exactly as seen below.
menublock[2]="Arial;"+ // font mainlink
"1;"+ // fontsize mainlink
"#000000;"+ // fontcolor mainlink
"1;"+ // fontweight mainlink, 1 means bold, 0 means normal
";;;;"+ // leave it empty
"no submenu|main.html|main;" // text and URL of mainlink
menublock[3]="Verdana;"+ // font mainlink
"1;"+ // fontsize mainlink
"#000000;"+ // fontcolor mainlink
"1;"+ // fontweight mainlink, 1 means bold, 0 means normal
"Verdana;"+ // font sublinks
"1;"+ // fontsize sublinks
"#000000;"+ // fontcolor sublinks
"0;"+ // fontweight sublinks, 1 means bold, 0 means normal
"Hardware|#|;"+ // text and URL of mainlink
"Hardware recursos|submenu31.html|main;"+ // text and URL of first sublink
"Pc Consultas|submenu32.html|main;"+ // text and URL of second sublink
"Drivers|submenu33.html|main;"+ // text and URL of thirth sublink
"Dlls|submenu34.html|main;"+ // text and URL of thirth sublink
"Empresas|submenu35.html|main;" // text and URL of thirth sublink
menublock[4]="Verdana;"+ // font mainlink
"1;"+ // fontsize mainlink
"#000000;"+ // fontcolor mainlink
"1;"+ // fontweight mainlink, 1 means bold, 0 means normal
"Verdana;"+ // font sublinks
"1;"+ // fontsize sublinks
"#000000;"+ // fontcolor sublinks
"0;"+ // fontweight sublinks, 1 means bold, 0 means normal
"Office - Windows - Unix|#|;"+ // text and URL of mainlink
"Trucos Office|submenu41.html|main;"+ // text and URL of first sublink
"Trucos Windows|submenu42.html|main;"+ // text and URL of second sublink
"Access|submenu43.html|main;"+ // text and URL of thirth sublink
"Excel|submenu44.html|main;"+ // text and URL of thirth sublink
"Unix - Linux|submenu45.html|main;" // text and URL of thirth sublink
menublock[5]="Verdana;"+ // font mainlink
"1;"+ // fontsize mainlink
"#000000;"+ // fontcolor mainlink
"1;"+ // fontweight mainlink, 1 means bold, 0 means normal
"Verdana;"+ // font sublinks
"1;"+ // fontsize sublinks
"#000000;"+ // fontcolor sublinks
"0;"+ // fontweight sublinks, 1 means bold, 0 means normal
"Lenguajes programación|#|;"+ // text and URL of mainlink
"Recursos Generales|submenu51.html|main;"+ // text and URL of first sublink
"Visual Basic|submenu52.html|main;"+ // text and URL of second sublink
"C++|submenu53.html|main;"+ // text and URL of thirth sublink
"Delphi|submenu54.html|main;"+ // text and URL of thirth sublink
"Javascript|submenu55.html|main;"+ // text and URL of thirth sublink
"ASP|submenu56.html|main;" // text and URL of thirth sublink
menublock[6]="Verdana;"+ // font mainlink
"1;"+ // fontsize mainlink
"#000000;"+ // fontcolor mainlink
"1;"+ // fontweight mainlink, 1 means bold, 0 means normal
"Verdana;"+ // font sublinks
"1;"+ // fontsize sublinks
"#000000;"+ // fontcolor sublinks
"0;"+ // fontweight sublinks, 1 means bold, 0 means normal
"Underground|#|;"+ // text and URL of mainlink
"Recursos Generales|submenu61.html|main;"+ // text and URL of first sublink
"Portales Hacker|submenu62.html|main;"+ // text and URL of second sublink
"Cracks|submenu63.html|main;"+ // text and URL of thirth sublink
"Descargas|submenu64.html|main;"+ // text and URL of thirth sublink
"Juegos|submenu66.html|main;"+ // text and URL of thirth sublink
"DVD-CDR|submenu66.html|main;" // text and URL of thirth sublink
// No need to change anything below
//********************************************************
var menusplit
var urlsplit
var font_weight_main
var font_weight_sub
var font_weight_sub
var minusimg=new Image()
minusimg.src="minus131.gif"
var plusimg=new Image()
plusimg.src="plus131.gif"
var showsubmenus=new Array()
for (i=0;i<=menublock.length-1;i++) {
showsubmenus[i]=-1
}
var plusminusimg=new Array()
for (i=0;i<=menublock.length-1;i++) {
plusminusimg[i]=plusimg.src
}
function openandclose(visi) {
showsubmenus[visi]=(-1)*showsubmenus[visi]
var menucontent=""
if (showsubmenus[visi]==1) {plusminusimg[visi]=minusimg.src}
if (showsubmenus[visi]==-1) {plusminusimg[visi]=plusimg.src}
menucontent+="<table border=0>"
for (i=0;i<=menublock.length-1;i++) {
menusplit=menublock[i].split(";")
urlsplit=menusplit[8].split("|")
if (menusplit[3]==1) {font_weight_main="<b>"}
if (menusplit[3]==0) {font_weight_main=""}
if (menusplit[7]==1) {font_weight_sub="<b>"}
if (menusplit[7]==0) {font_weight_sub=""}
menucontent+="<tr><td>"
if (menusplit[9].length==0) {
menucontent+="</td>"
menucontent+="<td>"
menucontent+=font_weight_main
menucontent+="<a href="+urlsplit[1]+" target="+urlsplit[2]+">"
menucontent+="<font face="+menusplit[0]+" color="+menusplit[2]+"
size="+menusplit[1]+">"
menucontent+=urlsplit[0]
menucontent+="</font></a></td></tr>"
plus_i++
}
if (menusplit[9].length!=0) {
var thismainmenu=i+plus_i
menucontent+="<a href=javascript:openandclose("+i+")>"
menucontent+="<img src="+plusminusimg[i]+" border=0></a></td>"
menucontent+="<td>"
menucontent+=font_weight_main
menucontent+="<a href=javascript:openandclose("+i+")>"
menucontent+="<font face="+menusplit[0]+" color="+menusplit[2]+"
size="+menusplit[1]+">"
menucontent+=urlsplit[0]
menucontent+="</font></a></td></tr>"
if (showsubmenus[i]==1) {
for (ii=9;ii<=menusplit.length-1;ii++) {
urlsplit=menusplit[ii].split("|")
menucontent+="<tr><td></td><td>"
menucontent+=font_weight_sub
menucontent+="<a href="+urlsplit[1]+" target="+urlsplit[2]+">"
menucontent+="<font face="+menusplit[4]+" color="+menusplit[6]+"
size="+menusplit[5]+">"
menucontent+=urlsplit[0]
menucontent+="</font></a></td></tr>"
}
}
}
}
menucontent+="</table>"
if (document.all) {
menu.innerHTML=menucontent
}
if (document.layers) {
document.menu.document.write(menucontent)
document.menu.document.close()
}
}
// - end of Javascript - -->
</script>
</head>
</b></font></p>
<body onLoad="openandclose(1000)" bgcolor="#FFFFFF">
<div id="menu" style="position:absolute;top:60px;left:0px"></div>
<base target="principal">
<p align="center">Imágenes:<br>
<a href="minus131.gif"><font color="#0000FF">minus131.gif</font></a>
<a href="plus131.gif"><font color="#0000FF">plus131.gif</font></a></p>
</body>
</html>
</head>Autor: S/A
Introducción
Solo tienes que copear el código que esta abajo y si quieres puedes descargar el ejemplo funcionando al final.
<html>
<head>
<title>Menú con efecto de transición</title>
</head>
<p align="center"><b>Menú con efecto de transición
<script>
hex = new Array(8)
set = new Array(4)
set1 = new Array(0,0,0,0,0)
hex[0] = "CCCCCC"
hex[1] = "BBBBBB"
hex[2] = "AAAAAA"
hex[3] = "999999"
hex[4] = "888888"
hex[5] = "777777"
hex[6] = "666666"
hex[7] = "555555"
hex[8] = "444444"
function rollon(n){
if (n==1){set[1]=1}
if (n==2){set[2]=1}
if (n==3){set[3]=1}
if (n==4){set[4]=1}
}
function rolloff(n){
if (n==1){set[1]=0}
if (n==2){set[2]=0}
if (n==3){set[3]=0}
if (n==4){set[4]=0}
}
function color(){
if (set[1]==1){
if (set1[1]==8){} else{set1[1]++ ;item1.style.background = hex[set1[1]] }
} else {
if (set1[1]==0){} else{set1[1]=set1[1]-1 ;item1.style.background = hex[set1[1]] }
}
if (set[2]==1){
if (set1[2]==8){} else{set1[2]++ ;item2.style.background = hex[set1[2]] }
} else {
if (set1[2]==0){} else{set1[2]=set1[2]-1 ;item2.style.background = hex[set1[2]] }
}
if (set[3]==1){
if (set1[3]==8){} else{set1[3]++ ;item3.style.background = hex[set1[3]] }
} else {
if (set1[3]==0){} else{set1[3]=set1[3]-1 ;item3.style.background = hex[set1[3]] }
}
if (set[4]==1){
if (set1[4]==8){} else{set1[4]++ ;item4.style.background = hex[set1[4]] }
} else {
if (set1[4]==0){} else{set1[4]=set1[4]-1 ;item4.style.background = hex[set1[4]] }
}
setTimeout("color()",100)
}
</script>
</b>
<body onLoad="color()">
</p>
<table border="1" cellpadding="0" cellspacing="0" bgcolor="cccccc"
bordercolor="#000000">
<tr>
<td width="100" id="item1" onMouseOver="rollon(1)" onMouseOut="rolloff(1)">
<p align="center"><font color="cc0000">Menú</font></td>
</tr>
<tr>
<td id="item2" onMouseOver="rollon(2)" onMouseOut="rolloff(2)">
<p align="center"><font color="cc0000">Intro</font></td>
</tr>
<tr>
<td id="item3" onMouseOver="rollon(3)" onMouseOut="rolloff(3)">
<p align="center"><font color="#CC0000">Vínculo </font><font color="cc0000">
1</font></td>
</tr>
<tr>
<td id="item4" onMouseOver="rollon(4)" onMouseOut="rolloff(4)">
<p align="center"><font color="cc0000">Vínculo 2</font></td>
</tr>
</table>
</body>
</html>Autor: S/A
Introducción
Solo tienes que copear el código que esta abajo y si quieres puedes descargar el ejemplo funcionando al final.
<html>
<head>
<title>Menú con descripción de opciones</title>
<style>
DIV{font-family:arial,helvetica; font-size:10pt}
</style>
</head>
<p align="center"><b>-Menú con descripción de opciones
<script>
/*
Created by A1 Javascripts - http://www.a1javascripts.com/
This may be used freely as long as this msg is intact!
*/
//You have to set some variables here:
//Set the font for the msg
msgFont=Arial,helvetiva
//Set the fontSize in px
msgFontSize="12"
//Set the fontColor
msgFontColor="black"
/*
Heres the array that holds the text to change the divmessage to
when you mouseover. Change the text here
*/
messages=new Array(6)
messages[0]="<b>A1 Javascripts</b><br>Un montón de javascripts <i><u>
<font color=ff0000>gratis</font></u></i> mejorar tu web"
messages[1]="<b>123Webmaster</b><br>El mayor directorio de <i><u>
<font color=ff0000>recursos gratis</font></u></i> para webmasters"
messages[2]="<b>HttpCITY</b><br>25 megs of <i><u><font color=ff0000>
espacio web</font></u></i>
gratis;<br> httpcity.com/you!"
messages[3]="<b>Free Clip Images</b><br>Una enorme colección de <i><u>
<font color=ff0000> gráficos</font>
</u></i> gratis"
messages[4]="<b>1-Click-Clipart</b><br>La mayor <i><u>
<font color=ff0000>colección</font></u></i>
de gráficos en internet"
messages[5]="<b>FreeWare Files</b><br>Descarga <i><u>
<font color=ff0000>programas</font></u></i>
gratis"
messages[6]="<b>Perl Site</b><br>Descarga <i><u>
<font color=ff0000>gratis</font></u></i>
perl scripts" messages[7]=""
//nothing needs to be changed below here
ie=document.all?1:0
n=document.layers?1:0
//Constructing the ChangeText object
function makeChangeTextObj(obj){
this.writeref=(n) ? eval(document.+obj+.document):eval(obj);
this.writeIt=b_writeIt;
}
function b_writeIt(text){
if(n){
this.writeref.write(text)
this.writeref.close()
}
if(ie)this.writeref.innerHTML=text
}
function changeText(num){
if(ie || n) oMessage.writeIt(<span style="font-size: +msgFontSize+px;
font-family:+msgFont+; color:+msgFontColor+">+messages[num]+</span>)
}
function changeTextInit(){
if(ie || n) oMessage=new makeChangeTextObj(divMessage)
}
//Calls the init function on pageload
onload=changeTextInit
</script>
</b>
<body>
</p>
<div id="divlinks" style="position:absolute; left:296; top:64">
<a href="http://www.a1javascripts.com" onMouseOver="changeText(0);
window.status=A1 Javascripts;return true;"
onMouseout="changeText(7,0);
window.status=;return true;" onClick="window.focus()">
A1 Javascripts</a><br>
<a href="http://www.123webmaster.com" onMouseOver="changeText(1);
window.status=123Webmaster;return true;"
onMouseout="changeText(7,0);
window.status=;return true;" onClick="window.focus()">
123Webmaster</a><br>
<a href="http://www.httpcity.com" onMouseOver="changeText(2);
window.status=Http City;return true;"
onMouseout="changeText(7,0);
window.status=;return true;" onClick="window.focus()">
Http City</a><br>
<a href="http://www.free-clip-images.com" onMouseOver="changeText(3);
window.status=Free Clip Images;return true;" onMouseout="changeText(7,0);
window.status=;return true;"
onClick="window.focus()">
Free Clip Images</a><br>
<a href="http://www.1-click-clipart.com" onMouseOver="changeText(4);
window.status=1-Click-Clipart;return true;" onMouseout="changeText(7,0)" ;
window.status ;return true;" onclick="window.focus()">
1-Click-Clipart</a><br>
<a href="http://www.freewarefiles.com" onMouseOver="changeText(5);
window.status=FreeWare Files;return true;" onMouseout="changeText(7,0);
window.status=;return true;" onClick="window.focus()">
FreeWare Files</a><br>
<a href="http://www.perlsite.com" onMouseOver="changeText(6);
window.status=Perl Site;return true;" onMouseOut="changeText(7,0);
window.status=;return true;"
onClick="window.focus()">
Perl Site</a>
</div>
<table Border="0" cellpadding="0" cellspacing="0" width="400" hight="200">
<tr>
<td align="center" width="100%" height="100%">
<div id="divMessage" style="position:absolute; left:258; top:200; width:167;
height:80">
Este es el texto por defecto que se muestra<br>
navegadores, versiones 3.x. <br>
</td></table></table></div>
</td>
</tr>
</table>
<!-- -->
</body>
</html>Autor: S/A
Introducción
Solo tienes que copear el código que esta abajo y si quieres puedes descargar el ejemplo funcionando al final.
<head>
<title>Menú colorido</title>
<STYLE TYPE="text/css">
<!--
.menuh {
BORDER-COLOR : #FFFF99 ;
cursor : hand ;
Border-Left : #FFFF99 ;
Border-Top : #FFFF99 ;
Padding-Left : 1px ;
Padding-Top : 1px ;
Background-Color : #FFFF99 ;
}
.menu {
Background-Color : white ;
}
.home {
cursor : hand ;
}
.menulinks{
text-decoration:none;
}
//-->
</STYLE>
</head>
<body>
<script Language="Javascript1.2">
<!--
//configure below variable for menu width, position on page
var menuwidth=110
var offsetleft=10
var offsettop=90
var ns4=document.layers?1:0
var ie4=document.all?1:0
var ns6=document.getElementById&&!document.all?1:0
function makeStatic() {
if (ie4) {object1.style.pixelTop=document.body.scrollTop+offsettop}
else if (ns6) {document.getElementById("object1").style.top=
window.pageYOffset+offsettop}
else if (ns4) {eval(document.object1.top=eval(window.pageYOffset+offsettop));}
setTimeout("makeStatic()",0);
}
if (ie4||ns6) {document.write(<span ALIGN="CENTER" ID="object1"
STYLE="Position:absolute; Top:20; Left:+offsetleft+; Z-Index:5;cursor:hand;
background-color:black;">
<TABLE BORDER="1" width="+menuwidth+" CELLPADDING="0" CELLSPACING="0"
BORDERCOLOR="black" bgcolor="white">)}
else if (ns4){ document.write(<LAYER top="20" name="object1"
left="+offsetleft+" BGCOLOR=black>
<TABLE BORDER="0" CELLPADDING="0" CELLSPACING="1"><TR><TD>
<TABLE BORDER="0" CELLPADDING="0" CELLSPACING="0" width="+menuwidth+">)}
if (ie4||ns6||ns4)
document.write(<TR><TD BGCOLOR="#3399FF" BORDERCOLORDARK="#99CCFF"
BORDERCOLORLIGHT="#003399"><P ALIGN=CENTER><FONT SIZE="4"
FACE=ARIAL>Menu</FONT></TD></TR>)
var menui = new Array();
var menul = new Array();
//configure below for menu items. Extend list as desired
menui[0]=" Más Javascripts";
menui[1]="?Qué hay de nuevo?";
menui[2]="Lo más visto";
menui[3]="Foro de mensajes";
menui[4]="FAQs";
menui[5]="Envíanos un mensaje";
menui[6]="Enlázanos";
menui[7]="Envíanos un correo";
menul[0]="http://www.javascriptsource.com";
menul[1]="http://www.javascripts.com";
menul[2]="http://www.javascripts.com";
menul[3]="http://www.javascripts.com";
menul[4]="http://www.javascripts.com";
menul[5]="http://www.javascripts.com";
menul[6]="http://www.javascripts.com";
menul[7]="http://www.javascripts.com";
for (i=0;i<=menui.length-1;i++)
if (ie4||ns6) {document.write(<TR><TD BORDERCOLOR="white"
ONCLICK="location=+menul[i]+"
onmouseover="className=menuh" onMouseout="className=menu">
<CENTER><FONT>+menui[i]+</FONT></TD></TR>)}
else if (ns4){document.write(<TR><TD BGCOLOR="white"><ILAYER><LAYER
width="+menuwidth+"
onmouseover="bgColor=yellow" onmouseout="bgColor=white"><CENTER>
<A HREF="+menul[i]+" class=menulinks>+menui[i]+</A></CENTER></LAYER>
</ILAYER></TD></TR>)}
if (ie4||ns6) {document.write(</TABLE></span>)}
else if (ns4){document.write(</TABLE></TD></TR></TABLE></LAYER>)}
function menu3(){
if (ns6||ie4||ns4)
makeStatic()
}
window.onload=menu3
//-->
</script>
<CENTER><style>A{text-decoration:none; font-family:ms sans serif; font-size:8;
color: black}A:hover
{text-decoration:none; color: red;}</style>
<b><a href="#"><font face="Arial" size="3">Menú colorido</font></a></b></CENTER>
</body>Autor: S/A
Introducción
El siguiente código muestra un menú que despliega un submenu al darle clic, solo tienes que copear el código que esta abajo y si quieres puedes descargar el ejemplo funcionando al final.
<html>
<head>
<title>Cabecera contraíble</title>
<p align="center"><b>Cabecera contraíble
<style>
TD.list
{
Font-family: verdana;
COLOR: #333333;
TEXT-DECORATION: none
}
TD.list A:link
{
Font-family: verdana;
COLOR: #333333;
TEXT-DECORATION: none
}
TD.list A:active
{
Font-family: verdana;
COLOR: #ff3300;
TEXT-DECORATION: none
}
TD.list A:visited
{
Font-family: verdana;
COLOR: #333333;
TEXT-DECORATION: none
}
TD.list A:hover
{
Font-family: verdana;
COLOR: #ff3300;
TEXT-DECORATION: none
}
</style>
<script LANGUAGE=javascript>
<!--
constMaxItem=3
function fnDispThis(active)
{
for (i=1; i < constMaxItem+1; i++)
{
if (i!=active)
{
document.all("sub"+i).style.display="NONE"
}
else
{
document.all("sub"+active).style.display="BLOCK"
}
}
}
//-->
</script>
</head>
</b>
<body>
</p>
<table BORDER="0" CELLSPACING="0" CELLPADDING="0">
<tr>
<td class="list" onClick="fnDispThis(1)" style="Cursor:HAND;"><B>Menú Item No.
1</B><br>
<DIV id="sub1" style="Display:NONE;">
<A href="http://www.viewsource.dk">Free Java Applets</a><br>
<A href="http://www.viewsource.dk">Free Java scripts</a><br>
<A href="http://www.viewsource.dk">Free DHTML scripts</a>
<br></td>
</DIV>
</tr>
<tr>
<td class="list" onClick="fnDispThis(2)" style="Cursor:HAND;"><B>Menú Item No.
2</B><br>
<DIV id="sub2" style="Display:NONE;">
<A href="http://www.viewsource.dk">http://www.viewsource.dk</a>
<br>
<A href="http://www.viewsource.dk">http://www.viewsource.dk</a>
<br>
<A href="http://www.viewsource.dk">http://www.viewsource.dk</a>
<br></td>
</DIV>
</tr>
<tr>
<td class="list" onClick="fnDispThis(3)" style="Cursor:HAND;"><B>Menú Item No.
3</B><br>
<DIV id="sub3" style="Display:NONE;">
<A href="http://www.viewsource.dk">Free Java Applets</a><br>
<A href="http://www.viewsource.dk">Free Java scripts</a><br>
<A href="http://www.viewsource.dk">Free DHTML scripts</a>
<br></td>
</DIV>
</tr>
</table>
</body>
</html>Autor: S/A
Introducción
Veamos una manera de abrir un popup al frente de nuestra pagin.
Solo tienes que copear el código que esta abajo y si quieres puedes descargar el ejemplo funcionando al final.
<html>
<title> Centered popup window</title>
<script language="Javascript">
//Free Javascripts on http://www.scriptBreaker.com
function newWindow(mypage,myname,w,h,features) {
if(screen.width){
var winl = (screen.width-w)/2;
var wint = (screen.height-h)/2;
}else{winl = 0;wint =0;}
if (winl < 0) winl = 0;
if (wint < 0) wint = 0;
var settings = height= + h + ,;
settings += width= + w + ,;
settings += top= + wint + ,;
settings += left= + winl + ,;
settings += features;
win = window.open(mypage,myname,settings);
win.window.focus();
}
</script>
<body>
<a href="Javascript:newWindow(centered.htm,popup,300,200,)">
click to open the popup
window</a>
</body>
</html>Autor: S/A
Introducción
Solo tienes que copear el código que esta abajo y descargar el archivo efecto.js para que funcione el script. Puedes descargar el ejemplo funcionando al final del documento.
No mostramos el contenido del archivo efecto.js por que es bastante extenso.
<HTML> <HEAD> <TITLE>Efecto de Fundido en los Hipervínculos</TITLE> <!--se declara el archovo del efecto--> <script language="Javascript" src="efecto.js"></script> </HEAD> <BODY> <H1>Efecto de Fundido en los Hipervínculos</H1> <A HREF="www.pro-gramas.com">Ejemplo de hipervínculo con el efecto Fade</A> </BODY> </HTML>
Autor: S/A
Introducción
Efecto de oscurecimiento en una imagen.
Comenzaremos con las etiquetas principales de la pagina, posteriormente con la función en js que hace el efecto a la imagen, pon cuidado en el código no es tan sencillo, y para terminar la llamada de la función y terminamos.
<HTML>
<HEAD>
<TITLE>efecto de imagen </TITLE>
<script>
desap = new Object();//creamos los objetos de efecto y tiempo
tiempo = new Object();
function efecto(object, transparencia, transicion, velocidad){ //se declara la
funcion y los parametro
if (!document.all) return
if (object != "[object]") {
setTimeout("efecto("+object+","+transparencia+","+
transicion+","+velocidad+")",0);
return;
}
clearTimeout(tiempo[object.sourceIndex]);
diff = transparencia-object.filters.alpha.opacity;
direction = 1;
if (object.filters.alpha.opacity > transparencia) {
direction = -1;
}
velocidad=Math.min(direction*diff,velocidad);
object.filters.alpha.opacity+=direction*velocidad;
if (object.filters.alpha.opacity != transparencia) {
desap[object.sourceIndex]=object;
tiempo[object.sourceIndex]=setTimeout("efecto(desap["+object.sourceIndex+"],"+
transparencia+","+transicion+","+velocidad+")",transicion);
}
}
</script>
</HEAD>
<BODY BGCOLOR="#000000">
<!--se manda llamar la funcion-->
<img src="img.jpg" onmouseover=efecto(this,100,50,15) style=FILTER:
alpha(opacity=20)
onmouseout=efecto(this,20,10,25) class=image_out><BR>
</BODY>
</HMTL>En <img src="img.jpg" ....> tienes que escribir el nombre de la imagen que le quieres dar el efecto.
Autor: S/A
© CopyRight pro-Gramas.cOm 2007 - ® Law reserved 
