Cambio de imagen segun resolucion

azimut · #1 (**permalink**) 17/01/2007, 16:31

Buenas, como podria cambiar la imagen de cabecera de mi pagina web, segun la resolucion de pantalla del usuario?

Nefertiter · #2 (**permalink**) 17/01/2007, 19:29

con Javascript :)

Código PHP:

  if (screen.width == 1024){ 
imagen = 'img/head_1024.jpg'; 
} 
 
document.write("<img src=\"" + imagen +"\">")

achago · #3 (**permalink**) 18/02/2007, 20:54

php no es capaz de detectar la resolución de pantalla esto se hace desde javascript por que asi se ejecuta desde el navegador del usuario, pero en lugar de utilizar varias resoluciones de imagenes, lo que puedes es utilizar un proceso intermedio que a traves de javascript pase la resolucion como parametro a otro:

por ejemplo:

obten_res.html -> principal.php?width=800;&height=600

en principal recoges los valores de las variables pasadas por la url

despues dentro de las etiquetas de imagen

<img src="laimagen.jpg" width="<?php echo $width/2+3-5; ?>" height="<?php
echo $height/3+4; ?>" >

Pd: los calculos son de ejemplo puedes calcularlos como mejor se adapten a tus necesidades en funcion de la relacion de aspecto de la imagen y de la resolucion...

wmzt · #4 (**permalink**) 17/04/2007, 08:04

Cita:

Iniciado por Nefertiter

con Javascript :)

Código PHP:

  if (screen.width == 1024){ 
imagen = 'img/head_1024.jpg'; 
} 
 
document.write("<img src=\"" + imagen +"\">")

Hola!
Tu solucion es justo lo que he estado buscando, pero como la adapto si lo que quiero cambiar es el ancho de un div segun la resolucion de pantalla, por ejemplo #contenedor con 600px a 900px y a 1000 ?

tedria que poner algo asi como: contenedor = 'width/900';???

como ves estoy perdida

gracias de antemano por la ayuda

GatorV · #5 (**permalink**) 17/04/2007, 08:13

Código:

if (screen.width == 1024){
document.getElementById( 'tu_div' ).style.width = '900px';
}

Salu2.

wmzt · #6 (**permalink**) 17/04/2007, 12:21

Gracias GatorV!

Ya lo adapte como me mostraste, pero no me pela!!!

ja! algo estare haciendo mal (vaya noticia!

) esto fue lo que hice:

Código:

<script language="javascript">
function ancho()
{
if(document.getElementsById('principal'))
{
if(screen.width==800)
{document.getElementsById('principal').style.width = '400px';}
if(screen.width==1024)
{document.getElementsById('principal').style.width = '700px';}
if(screen.width==1280)
{document.getElementsById('principal').style.width = '950px'}

}
}
</script>
	</head>

	<body onLoad="ancho()">

como habras notado, este es mi primer encuentro cercano con js (solo queria parchar mi css, pero despues de esto decididamente tendre que aprenderlo)

Gracias de nuevo!

PD. se que deberia abrir otro tema y sobretodo salir de la seccion de php, pero como ya empezamos por aqui...

GatorV · #7 (**permalink**) 17/04/2007, 12:54

Esto esta mal:

Código:

document.getElementsById

Debe de ser:

Código:

document.getElementById

wmzt · #8 (**permalink**) 17/04/2007, 13:21

FUNCIONA!!!

Gracias de nuevo por tu ayuda rapida y exata! Personas como tu son las que hacen este mundo mas facil y feliz!