Javascript - Divertida galeria de imagenes

Códigos Javascript

El codigo muestra una galeria de imagenes de una forma divertida

Tutores.org

Inicio > Javascript

Visitas: 52,157 - 04-05-2007 01:27:58

CODIGO

Este codigo aun no ha sido probado por Tutores.org en Opera

Este codigo aun no ha sido probado por Tutores.org en Safari

# Codigo ofrecido por Tutores.org

<head>
<script language="javascript">
// Si no hay capa creada
var trigger=0
// Si no hay capa activada
var vis=0
function initthumb()
{
document.onmousemove = sniff
document.onmouseup = sniff
document.onmousedown = sniff
// Comprobacion para netscape
if (document.layers){document.captureEvents(Event.MOUSEDOWN | Event.MOUSEMOVE | Event.MOUSEUP)}
// Ayuda para explorer a obtener la altura
if (document.all)dopic('dummy','',1,1,1,1)
}
function sniff(e){
// Coje posicion del raton
if (document.layers) {var mousex=e.pageX; var mousey=e.pageY;fx=mousex;fy=mousey;}
else if (document.all) {var mousex=event.x; var mousey=event.y+document.body.scrollTop;fx=mousex;fy=mousey}
}
function dopic(name,auto,picx,picy)
{
if (vis == 0)
{
// Coordenadas predefinidas
var oldpicx=100;
var oldpicy=100;
//border-color
var rahmen='silver'
// Texto Alt
var alttext="Click to close the picture"
// Si no se encuentra una capa
if (trigger!=1)
{
trigger=1 // Se ha detectado una capa
// Crea una capa oculta
if(document.layers){
//Piclayer
document.layers['picarea'] = new Layer(1);
document.layers['picarea'].left = oldpicx;
document.layers['picarea'].top = oldpicy;
document.layers['picarea'].height = 20;
document.layers['picarea'].visibility = "hidden";
}
// Capa oculta para explorer
else if (document.all){
document.body.insertAdjacentHTML("BeforeEnd",'<DIV ID="picarea" STYLE="z-index:200;position:absolute;left:"+picx+";top:"+picy></DIV>');
}
}
// Si hay capa visible, la esconde
if (trigger != 0){
if (document.layers){document.layers['picarea'].visibility="hide"} //Netscape
if (document.all){picarea.style.visibility="hidden"}
}
// Define el contenido de la capa
content="<a href="javascript:clearpic()" style="color:"+rahmen+""><img src="";
content=content+name+"" name="pic" alt=""+alttext+"" border=1";
content=content+"></A>";
// Escribe el contenido de la capa para Netscape
if (document.layers) {
sprite=document.layers['picarea'].document;
sprite.open();
sprite.write(content);
sprite.close();
if (picx != null && auto == ''){
document.layers['picarea'].left = picx;
document.layers['picarea'].top = picy;
}
if (auto != "")
{
// Consigue el ancho y alto de la imagen
xw=document.layers['picarea'].document.images['pic'].width
yw=document.layers['picarea'].document.images['pic'].height
// Centra la posicion
newpicx = fx - (xw/2)
newpicy = fy - (yw/2)
if (picx) {newpicx=newpicx + picx}
if (picy) {newpicy=newpicy + picy}
// posiciona la capa
document.layers['picarea'].left = newpicx;
document.layers['picarea'].top = newpicy;
}
// muestra la capa
document.layers['picarea'].visibility="show";
vis=1
}
// Escribe el conenido de la capa para explorer
if (document.all) {
document.all['picarea'].innerHTML = content;
if (picx != null && auto == ''){
picarea.style.top=picy
picarea.style.left=picx;
}
if (auto != "") {
// consigue dimensiones de la imagen
xw=document.all['pic'].width
yw=document.all['pic'].height
// Centra la imagen
newpicx = fx - (xw/2)
newpicy = fy - (yw/2)
if (picx) {newpicx=newpicx + picx}
if (picy) {newpicy=newpicy + picy}
// posiciona la capa
picarea.style.top=newpicy;
picarea.style.left=newpicx;
}
// Muestra la capa
if (name != "dummy") {
picarea.style.visibility="visible";r
vis=1
}
}
// Muestra la imagen para navegadores antiguos
else if (document.layers == null && document.all == null) {self.location=name};
}
}
// Oculta la capa al hacer click
function clearpic() {
vis=0
if (document.layers){document.layers['picarea'].visibility="hide"};
if (document.all){picarea.style.visibility="hidden"};
}
//-->
</SCRIPT>
</head>
<body bgcolor="#FFFFFF" text="#000000" link="#000000" onload="initthumb()" alink="#000000" vlink="#000000" >
<CENTER>
<font face="arial" size=2>
<BR><BR><B>Mi galeria</B><BR><BR>
dopic('/tutores/images/mundo.gif',1,0,200)<br>
<a href="javascript:dopic('/tutores/images/mundo.gif',0, 0,300)"><IMG SRC="/tutores/images/mundo.gif" WIDTH=96 HEIGHT=72 ALT="" BORDER="0"></A><BR><BR>
dopic('/tutores/images/mundo2.gif',1,200,100)<br>
<a href="javascript:dopic('/tutores/images/mundo2.gif',0, 400, 100)"><IMG SRC="/tutores/images/mundo2.gif" WIDTH=96 HEIGHT=72 ALT="" BORDER="0"></A><BR><BR>
dopic('/tutores/images/mundo3.gif',0,20,10)<br>
<a href="javascript:dopic('/tutores/images/mundo3.gif',0,20,10)"><IMG SRC="/tutores/images/mundo3.gif" WIDTH=96 HEIGHT=72 ALT="" BORDER="0"></A>
</FONT>
</CENTER>
</body>

ENLACE AL CODIGO

Si quieres enlazar desde tu pagina a este codigo

<a title="Tutores.org - Divertida galeria de imagenes" href="http://www.tutores.org/codigo/1664/" target="_blank">Divertida galeria de imagenes</a>

COMENTARIOS

Comentario usuario

Sin definirSin definir

5 5

impresionante codigo

INSERTAR COMENTARIO

Usuario:
Email:
Comentario:
	Codigo Seguridad
	Antes de enviar un comentario... Todos los comentarios son revisados personalmente Todo comentario que no haga relacion al codigo mostrado en esta pagina sera eliminado Usuarios registrados tienen preferencia en recibir respuestas de ayuda!! Ademas de poder insertar Imagenes,Enlaces y otras propiedades del editor. Por favor, insertar los comentarios descriptivos.