Diferentes imágenes, diferentes resoluciones de pantalla

Bienvenido, Invitado

Diferentes imágenes, diferentes resoluciones de pantalla

(1 viendo) (1) Invitado

Responder Tema

Nuevo Tema

Página:
1

TEMA: Diferentes imágenes, diferentes resoluciones de pantalla

Diferentes imágenes, diferentes resoluciones de pantalla hace 2 años, 9 meses #11651

Saludos.
En mi nueva plantilla he añadido a través del módulo "mod_frahtml" el siguiente código:

<a href="http://localhost/Joomla-1.5.3-spanish/index.php"><img title="ACCU Málaga Web" alt="Web ACCU Málaga" src="images/stories/accu-malaga-inicio.png" width="700" height="60" /></a>

Esto agrega una imagen personalizada a la plantilla, queda to chula. El problema que encuentro es el siguiente:
La imagen la he diseñado para una resolución de pantalla alta, si se reduce mediante botones de la misma plantilla o se visualiza en un monitor a menor resolución esta imagen desaparece, no se distorciona nada pere deja de verse la imagen.

Si bajo el tamaño de la imagen bastante, se ven en todas las resoluciones pero claro la imagen en alta se ve más pequeña de lo que seria deseable.

Mi pregunta es si es muy complicado añadir a ese código del módulo la indicación para que meta una imagen u otra dependiendo de la resolución, y así haría tres imagenes para tres resoluciones.

Supongo que se podrá ¿ Alguien pude facilitarme el código? Os lo agradeceria.

thalcave
DESCONECTADO
Experto
Temas: 224
Karma: 4

Responder Citar

Re: Diferentes imágenes, diferentes resoluciones de pantalla hace 2 años, 9 meses #11653

Hola,

En javascript, las constantes screen.width y screen.height dan el ancho y alto de la pantalla respectivamente. Sabes de javascript? Quieres hacer 3 imágenes o cambiar el ancho y alto de una?

Te dejo un pequeño código, a ver si te ayuda:

<img id="imagenR" style="" title="ACCU Málaga Web" alt="Web ACCU Málaga" src="Escribe aqui la ruta si vas a usar el 2º metodo" />
 
<script type="text/javascript">
	//Si quieres hacer 3 imagenes
 
	var w1 = 1024; //anchura de la resolución 1 (del usuario)
	var h1 = 768;  //altura de la resolución 1 (del usuario)
	var w2 = 1280;
	var h2 = 1024;
	var path = "images/stories/"; //donde están las 3 imagenes
	var img1 = "imagen1.jpg";
	var img2 = "imagen2.jpg";
	var img3 = "imagen3.jpg";
 
	//entonces, por ejemplo, puedes poner que si la resolución es menor o igual que la 1º, se muestre la imagen 1:
	if (screen.width <= w1 && screen.height <= h1) {
		document.getElementById('imagenR').src = path + imagen1;
	}
	//si es menor o igual que la 2, que se muestre la 2
	else if (screen.width <= w2 && screen.height <= h2) {
		document.getElementById('imagenR').src = path + imagen2;
	}
	//si no, es que es grande, así que se muestra la 3
	else {
		document.getElementById('imagenR').src = path + imagen3;
	}
 
 
 
	//Si quieres cambiar el tamaño de la imagen
	//lo mismo que arriba, para cambiar el ancho y alto de la imagen, así:
	document.getElementById('imagenR').style.width = xxx; //xxx son los pixeles de anchura
	document.getElementById('imagenR').style.height = yyy; //xxx son los pixeles de altura
</script>