Foros del Web » Creando para Internet » Diseño web »

Pagina foto cambia al pasar raton...

Estas en el tema de Pagina foto cambia al pasar raton... en el foro de Diseño web en Foros del Web. Me gustaria crear una pagina que solo tuviese una foto, y que al pasar el raton por encima esta cambiase por otra. Mis conocimientos de ...
  #1 (permalink)  
Antiguo 01/12/2008, 12:12
Avatar de PUAROT  
Fecha de Ingreso: octubre-2004
Ubicación: Sevilla
Mensajes: 34
Antigüedad: 19 años, 5 meses
Puntos: 1
Pagina foto cambia al pasar raton...

Me gustaria crear una pagina que solo tuviese una foto, y que al pasar el raton por encima esta cambiase por otra.

Mis conocimientos de programacion son nulos, pero me gustaria colgar dos fotos superpuestas y poder alternar entre ellas con tan solo pasar el raton para poder ver las diferencias.

Me podeis echar una mano?

Gracias de antemano....
  #2 (permalink)  
Antiguo 01/12/2008, 12:26
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 17 años, 5 meses
Puntos: 280
Respuesta: Pagina foto cambia al pasar raton...

Mira a ver si este ejemplo te sirve de orientación. Es la mejor manera que no tarde nada en cargar al pasar el ratón por encima y el cambio sea instantáneo.
__________________
Visita mi nueva web idplus.org
  #3 (permalink)  
Antiguo 01/12/2008, 13:17
Avatar de PUAROT  
Fecha de Ingreso: octubre-2004
Ubicación: Sevilla
Mensajes: 34
Antigüedad: 19 años, 5 meses
Puntos: 1
Respuesta: Pagina foto cambia al pasar raton...

Gracias, eso es exactamente lo que quiero.

Pero como lo hago para que sean mis dos fotografias las que cambien?
  #4 (permalink)  
Antiguo 01/12/2008, 13:26
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 17 años, 5 meses
Puntos: 280
Respuesta: Pagina foto cambia al pasar raton...

Mira, esta es la imagen (las dos en una sola, ahí está el truco):




Haz eso mismo con tus dos imágenes, copia el código y sustituye la imagen que se carga por la tuya.
__________________
Visita mi nueva web idplus.org
  #5 (permalink)  
Antiguo 01/12/2008, 13:46
Avatar de PUAROT  
Fecha de Ingreso: octubre-2004
Ubicación: Sevilla
Mensajes: 34
Antigüedad: 19 años, 5 meses
Puntos: 1
Respuesta: Pagina foto cambia al pasar raton...

Osea que solo tengo que tener un archivo de imagen co las dos fotos.

y pueden ser de un tamaño cualquiera?

Voy a intentarlo, GRacias!!!
  #6 (permalink)  
Antiguo 01/12/2008, 14:00
Avatar de GitoTzp787  
Fecha de Ingreso: diciembre-2008
Mensajes: 73
Antigüedad: 15 años, 3 meses
Puntos: 2
Respuesta: Pagina foto cambia al pasar raton...

Este puede ser uno:

Código:
<style type="text/css">
.caja {margin: 0 auto;
position: relative;
width: 150px;
height: 99px;
}
a {display: block;
height: 100%;
width: 100%;
background: url(../img/color_BN.jpg) no-repeat center top;
}
a:hover {background: url(../img/color_BN.jpg) no-repeat center bottom;
}
  </style>
_________________________

Este lo uso en web general:

Entre Etiquetas <head>

Código:
<script type="text/javascript">
<!--
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
Para Insertar una imagen

Código:
<a href="principal.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image9','','imagenes/meu_1/foro_2.jpg',1)"><img src="imagenes/meu_1/foro_1.jpg" border="0" id="Image9" /></a></center>
Saludos & Espero Que Te Sirva ;)
  #7 (permalink)  
Antiguo 01/12/2008, 14:26
Avatar de PUAROT  
Fecha de Ingreso: octubre-2004
Ubicación: Sevilla
Mensajes: 34
Antigüedad: 19 años, 5 meses
Puntos: 1
Respuesta: Pagina foto cambia al pasar raton...

Gracias por responder tan rapido a los dos, pero no soy capaz...
Mis cocimientos sobre crear paginas son casi nulos, y no se muy bien como utilizar como utilizar el codigo.

(estoy desde cero)

Que editor uso?

Gracias otra vez...
  #8 (permalink)  
Antiguo 01/12/2008, 16:37
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 17 años, 5 meses
Puntos: 280
Respuesta: Pagina foto cambia al pasar raton...

Con un editor de texto te basta: copia el código, monta tu imagen (las dos en una) y cambia la ruta:

background: url(../img/color_BN.jpg)

por

background: url(tuimagen.jpg).

Guarda el archivo con cualquier nombre.html y listo.
__________________
Visita mi nueva web idplus.org
  #9 (permalink)  
Antiguo 01/12/2008, 16:38
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 17 años, 5 meses
Puntos: 280
Respuesta: Pagina foto cambia al pasar raton...

Cita:
Iniciado por GitoTzp787 Ver Mensaje
Este lo uso en web general:
No me parece muy práctico usar javascript cuando realmente no es necesario, pero bueno, cada uno es cada uno.
__________________
Visita mi nueva web idplus.org
  #10 (permalink)  
Antiguo 03/12/2008, 17:35
Avatar de PUAROT  
Fecha de Ingreso: octubre-2004
Ubicación: Sevilla
Mensajes: 34
Antigüedad: 19 años, 5 meses
Puntos: 1
De acuerdo Respuesta: Pagina foto cambia al pasar raton...

Gracias, por fin he podido lograr lo que pretendia, aunque me ha costado...
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 23:32.