Este códigos muy sencillo si sabes de programación y lo se, pero lo dejo por si algunos de nuestr@s visitantes estan aprendiendo a programar.

Le será de utilidad si quiere darle un poco de vida a su página Web.

De paso les decimos que en la Web  http://www.mundojavascript.com/ encontraras muchos mas de estos si estas interesado, será hasta la próxima.

El Codigo:

Este es el script que puedes seleccionar, copiar y pegar directamente.
Esta parte del script hay que pegarlo entre las etiquetas HEAD y /HEAD:

<style>

<!–

.menuskin{
position:absolute;
width:165px;
background-color:menu;
border:2px solid black;
font:normal 12px Verdana;
line-height:18px;
z-index:100;
visibility:hidden;
}

.menuskin a{
text-decoration:none;
color:black;
padding-left:10px;
padding-right:10px;
}

#mouseoverstyle{
background-color:highlight;
}

#mouseoverstyle a{
color:white;
}
–>
</style>

<script language=”JavaScript1.2″>

//Pop-it menu- By Dynamic Drive
//For full source code and more DHTML scripts, visit http://www.dynamicdrive.com
//This credit MUST stay intact for use

var linkset=new Array()
//SPECIFY MENU SETS AND THEIR LINKS. FOLLOW SYNTAX LAID OUT

linkset[0]=’<div><a href=”http://www.precios10.com”>Ordenadores</a></div>’
linkset[0]+=’<div><a href=”http://www.cambiabanners.com”>Intercambio de banners</a></div>’
linkset[0]+=’<div><a href=”http://www.iaupa.com”>Recursos web</a></div>’

linkset[1]=’<div><a href=”http://msnbc.com”>MSNBC</a></div>’
linkset[1]+=’<div><a href=”http://cnn.com”>CNN</a></div>’
linkset[1]+=’<div><a href=”http://abcnews.com”>ABC News</a></div>’
linkset[1]+=’<div><a href=”http://www.washingtonpost.com”>Washington Post</a></div>’

////No need to edit beyond here

var ie4=document.all&&navigator.userAgent.indexOf(“Opera”)==-1
var ns6=document.getElementById&&!document.all
var ns4=document.layers

function showmenu(e,which){

if (!document.all&&!document.getElementById&&!document.layers)
return

clearhidemenu()

menuobj=ie4? document.all.popmenu : ns6? document.getElementById(“popmenu”) : ns4? document.popmenu : “”
menuobj.thestyle=(ie4||ns6)? menuobj.style : menuobj

if (ie4||ns6)
menuobj.innerHTML=which
else{
menuobj.document.write(‘<layer name=gui bgColor=#E6E6E6 width=165 onmouseover=”clearhidemenu()” onmouseout=”hidemenu()”>’+which+’</layer>’)
menuobj.document.close()
}

menuobj.contentwidth=(ie4||ns6)? menuobj.offsetWidth : menuobj.document.gui.document.width
menuobj.contentheight=(ie4||ns6)? menuobj.offsetHeight : menuobj.document.gui.document.height
eventX=ie4? event.clientX : ns6? e.clientX : e.x
eventY=ie4? event.clientY : ns6? e.clientY : e.y

//Find out how close the mouse is to the corner of the window
var rightedge=ie4? document.body.clientWidth-eventX : window.innerWidth-eventX
var bottomedge=ie4? document.body.clientHeight-eventY : window.innerHeight-eventY

//if the horizontal distance isn’t enough to accomodate the width of the context menu
if (rightedge<menuobj.contentwidth)
//move the horizontal position of the menu to the left by it’s width
menuobj.thestyle.left=ie4? document.body.scrollLeft+eventX-menuobj.contentwidth : ns6? window.pageXOffset+eventX-menuobj.contentwidth : eventX-menuobj.contentwidth
else
//position the horizontal position of the menu where the mouse was clicked
menuobj.thestyle.left=ie4? document.body.scrollLeft+eventX : ns6? window.pageXOffset+eventX : eventX

//same concept with the vertical position
if (bottomedge<menuobj.contentheight)
menuobj.thestyle.top=ie4? document.body.scrollTop+eventY-menuobj.contentheight : ns6? window.pageYOffset+eventY-menuobj.contentheight : eventY-menuobj.contentheight
else
menuobj.thestyle.top=ie4? document.body.scrollTop+event.clientY : ns6? window.pageYOffset+eventY : eventY
menuobj.thestyle.visibility=”visible”
return false
}

function contains_ns6(a, b) {
//Determines if 1 element in contained in another- by Brainjar.com
while (b.parentNode)
if ((b = b.parentNode) == a)
return true;
return false;
}

function hidemenu(){
if (window.menuobj)
menuobj.thestyle.visibility=(ie4||ns6)? “hidden” : “hide”
}

function dynamichide(e){
if (ie4&&!menuobj.contains(e.toElement))
hidemenu()
else if (ns6&&e.currentTarget!= e.relatedTarget&& !contains_ns6(e.currentTarget, e.relatedTarget))
hidemenu()
}

function delayhidemenu(){
if (ie4||ns6||ns4)
delayhide=setTimeout(“hidemenu()”,500)
}

function clearhidemenu(){
if (window.delayhide)
clearTimeout(delayhide)
}

function highlightmenu(e,state){
if (document.all)
source_el=event.srcElement
else if (document.getElementById)
source_el=e.target
if (source_el.className==”menuitems”){
source_el.id=(state==”on”)? “mouseoverstyle” : “”
}
else{
while(source_el.id!=”popmenu”){
source_el=document.getElementById? source_el.parentNode : source_el.parentElement
if (source_el.className==”menuitems”){
source_el.id=(state==”on”)? “mouseoverstyle” : “”
}
}
}
}

if (ie4||ns6)
document.onclick=hidemenu

</script>

Esta parte del script hay que pegarlo entre las etiquetas BODY y /BODY, donde se quiera que aparezca el efecto:

<div id=”popmenu” onMouseover=”clearhidemenu();highlightmenu(event,’on’)” onMouseout=”highlightmenu(event,’off’);dynamichide(event)”>

</div>

<a href=”#” onMouseover=”showmenu(event,linkset[0])” onMouseout=”delayhidemenu()”>Enlaces 1</a><br>
<a href=”#” onMouseover=”showmenu(event,linkset[1])” onMouseout=”delayhidemenu()”>Enlaces 2</a>

Hay que añadir el siguiente evento onload dentro de la etiqueta BODY:

onload=songticker()

Enjoy it

que añadir el siguiente evento onload dentro de la etiqueta BODY:

uiente evento onload dentro de la etiqueta BOD

Cómo comprimir tus archivos JS (código Javascript) desde PHP con JSMin. Explicamos el funcionamiento de la librería JSMin, en su versión para PHP.

Cuando se trata de optimizar una página web, cada Kilobyte cuenta. Como sabemos, cuanto menos pesada en bytes sea una página web, más rápido se transfiere por Internet y antes la puede visualizar el usuario. En este artículo vamos a ver una librería que nos puede ayudar a comprimir un archivo con código Javascript, para que ocupe menos espacio y se pueda transferir más rápidamente por la Red.

¿Cómo se puede comprimir un código Javascript?

El concepto que tenemos de compresión de archivos seguramente tenga relación con los conocidos .zip u otros formatos de compresión como el .rar. Pues la compresión que vamos a ver para códigos Javascript no tiene nada que ver. No os vamos a explicar que comprimáis el archivo con zip y lo publiquéis.

En realidad, en este caso, la compresión se basa en una optimización del código para que ocupe menos espacio. Como podemos saber, a la hora de programar, colocamos muchos caracteres de más en el código, que no son del todo necesarios. Esto ocurre con, por ejemplo, espacios de más, saltos de línea, tabulaciones, pero sobre todo con los comentarios al código.

JSMin lo que hace es revisar el código Javascript, analizarlo y devolver una nueva versión de ese código, al que se le ha suprimido toda la información superflua. El resultado consiste en un código Javascript que sigue ejecutándose perfectamente en el navegador, con las mismas sentencias y funcionalidades, pero que ocupa mucho menos.

¿Dónde puedo obtener JSMIN para PHP?

El script que estamos comentando, JSMin para PHP, podemos descargarlo gratuitamente desde una página de Google Code, donde está publicado para descarga:http://code.google.com/p/jsmin-php/

Además, para el que le interese, dejamos el link a la página web oficial del producto, donde se ofrecen unas explicaciones básicas sobre qué hace JSMin para comprimir el código Javascript.

http://www.crockford.com/javascript/jsmin.html

¿Cómo comprimir el código con JSMin para PHP?

JSMin tiene una función, que debemos ejecutar para comprimir un código Javascript. Dicha función recibe un parámetro, que es una cadena con el código Javascript que queremos comprimir. Devuelve una cadena con el código, después de eliminar la información innecesaria y compactar las sentencias.

Lo primero de todo sería incluir la librería con el JSMin para PHP, que hemos debido descargar desde la propia página web del producto, para obtener la versión más actualizada.

include (“jsmin-1.1.1.php”);

Luego podemos utilizar la función minify de la clase JSMin, que realiza el trabajo de comprimir el código JS.

$codigo_comprimido = JSMin::minify(“//codigo javascript”);

Debemos pararnos para explicar esta línea de código, que puede sorprender por el operador :: de PHP (se ven los “::”?)

El operador :: de PHP sirve para invocar métodos de clases, lo que en algunos lenguajes se llaman métodos estáticos, con la particularidad que no hace falta tener ningún objeto instanciado de esa clase para poder ejecutar el método. Es decir, llamamos al método sin pasar por ningún objeto, simplemente con el nombre de la clase.

En ese caso, el include jsmin-1.1.1.php había definido una clase llamada JSMin. Esa clase tiene un método llamado minify(). Con JSMin::minify() estamos llamando a la función minify() declarada en la clase JSMin, sin necesidad de haber creado ningún objeto de esa clase.

Script PHP para leer código Javascript de un archivo de texto y generar otro archivo de texto con el código comprimido

Para finalizar, voy a mostrar un código PHP que he creado para comprimir un archivo Javascript, basándome en JSMin.

Este script define un nombre de archivo que se quiere comprimir y genera otro archivo en el mismo directorio que se llama igual, pero comenzando con “comprimido_”. Ese archivo comprimido contiene el mismo código Javascript, una vez pasada la función minify() de JSMin.

<?
$archivo_script_js = ‘navegador.js’;

include (“jsmin-1.1.1.php”);
$codigo_comprimido = JSMin::minify(file_get_contents($archivo_script_js));

$archivo = fopen(“comprimido_” . $archivo_script_js, “w+”);
fwrite($archivo, $codigo_comprimido);
fclose($archivo);
?>

Como se puede ver, se define arriba del todo el nombre del archivo que tiene el código PHP a comprimir.

Luego se realiza la compresión y se escribe los resultados en un archivo nuevo. El archivo antiguo se llama en este script “navegador.js” y el fichero nuevo con el script comprimido, que se creará en el mismo directorio, se llama “comprimido_navegador.js”.

Conclusión sobre comprimir los códigos JS

Ten en cuenta que la compresión no es un proceso reversible. Guarda siempre una copia de seguridad de los archivos con el código original, que la necesitarás si deseas editar el código.

Eso es todo. Espero que sea de utilidad esta clase para comprimir archivos Javascript desde PHP.

Vía: DesarrolloWeb.com

<layer NAME=”a0″ LEFT=”10″ TOP=”10″ VISIBILITY=”SHOW”

BGCOLOR=”#008888″ CLIP=”0,0,3,3″>
</layer>
<layer NAME=”a1″ LEFT=”10″ TOP=”10″ VISIBILITY=”SHOW”

BGCOLOR=”#888800″ CLIP=”0,0,3,3″>
</layer>
<layer NAME=”a2″ LEFT=”10″ TOP=”10″ VISIBILITY=”SHOW”

BGCOLOR=”#880088″ CLIP=”0,0,3,3″>
</layer>
<layer NAME=”a3″ LEFT=”10″ TOP=”10″ VISIBILITY=”SHOW”

BGCOLOR=”#880000″ CLIP=”0,0,3,3″>
</layer>
<layer NAME=”a4″ LEFT=”10″ TOP=”10″ VISIBILITY=”SHOW”

BGCOLOR=”#008800″ CLIP=”0,0,3,3″>
</layer>
<layer NAME=”a5″ LEFT=”10″ TOP=”10″ VISIBILITY=”SHOW”

BGCOLOR=”#000088″ CLIP=”0,0,3,3″>
</layer>
<layer NAME=”a6″ LEFT=”10″ TOP=”10″ VISIBILITY=”SHOW”

BGCOLOR=”#000000″ CLIP=”0,0,3,3″>
</layer>
<script>

var clr=new Array(“880000″,”008800″,”000088″,”888800″,
“880088″,”008888″,”000000″)
if (document.all){
document.write(‘<div id=”starsDiv” style=”position:absolute;top:0px;left:0px”>’)
for (xy=0;xy<7;xy++)
document.write(‘<div style=

“position:relative;width:3px;height:
3px;background:#’+clr[xy]+’
;font-size:2px;visibility:visible”></div>’)
document.write(‘</div>’)
}

if (document.layers)
{window.captureEvents(Event.MOUSEMOVE);}
var yBase = 200;
var xBase = 200;
var yAmpl = 10;
var yMax = 40;
var step = .2;
var ystep = .5;
var currStep = 0;
var tAmpl=1;
var Xpos = 1;
var Ypos = 1;
var i = 0;
var j = 0;

if (document.all)
{
function MoveHandler(){
Xpos = document.body.scrollLeft+event.x;
Ypos = document.body.scrollTop+event.y;
}
document.onmousemove = MoveHandler;
}

else if (document.layers)
{
function xMoveHandler(evnt){
Xpos = evnt.pageX;
Ypos = evnt.pageY;
}
window.onMouseMove = xMoveHandler;
}

function animateLogo() {
if (document.all)
{
yBase = window.document.body.offsetHeight/4;
xBase = window.document.body.offsetWidth/4;
}
else if (document.layers)
{
yBase = window.innerHeight/4 ;
xBase = window.innerWidth/4;
}

if (document.all)
{
var totaldivs=document.all.starsDiv.all.length
for ( i = 0 ; i < totaldivs ; i++ )
{
var tempdiv=document.all.starsDiv.all[i].style
tempdiv.top = Ypos + Math.cos
((20*Math.sin(currStep/20))+i*70

)*yBase*(Math.sin(10+currStep/10)+0.2)*Math.cos
((currStep + i*25)/10);
tempdiv.left = Xpos + Math.sin((20*Math.
sin(currStep/20))+i*70)

*xBase*(Math.sin(10+currStep/10)+0.2)*Math.cos
((currStep + i*25)/10);
}
}

else if (document.layers)
{
for ( j = 0 ; j < 7 ; j++ )
{
var templayer=”a”+j
document.layers[templayer].top = Ypos + Math.cos((20*Math.sin(currStep/20))+j*70)

*yBase*(Math.sin(10+currStep/10)+0.2)*Math.cos
((currStep + j*25)/10);
document.layers[templayer].left =Xpos + Math.sin((20*Math.sin(currStep/20))+j*70)

*xBase*(Math.sin(10+currStep/10)+0.2)*Math.cos
((currStep + j*25)/10);
}
}
currStep += step;
setTimeout(“animateLogo()”, 15);
}
animateLogo();

</script>