ayuda porfa

babilonia · #1 (**permalink**) 03/02/2003, 05:28

Hola, a ver cómo me explico...
estoy haciendo unas páginas con photoshop, de 800x600( 785x435 mejor dicho), y, al ser imágenes de mapa de bits, no se puede ampliar la resolución y verse bien, así que tengo que hacer las mismas en 1024x lo que sea. Lo que me gustaría saber es qué le inserto en código para que, según la resolución del usuario, descargue una u otra..supongo que con javascript se puede no? si es así me a ver si alguien sabe decirme qué poner y dónde porque no tengo ni idea de java ni de programación y tb si sólo con guardar los archivos de las dos resoluciones en la misma carpeta(en la misma estructura) vale o tengo que hacer algo más... gracias

caricatos · #2 (**permalink**) 03/02/2003, 05:43

Hola babilonia:

Perdona que no te conteste, ya que unos mapas de bits de esas dimensiones, ralentizarían muchísimo la descarga...
Te recomiendo que incluso hagas las imágenes más pequeñas, o estudiar la relación de descarga/calidad
En las opciones de photoshop de guardar para la web, fijate que no tarden mucho tiempo en bajarse ¿?

Con respecto a la forma de seleccionar entre imágenes te pongo algo que tal vez te sirva...

En el tag img no pongas nada en el atributo src, pero ponle un atributo id... por ejemplo <img src="" id="imagen">
Luego en en el tag body pon una acción onload más o menos así:
<body onload="inicio()">
y un tag de script más o menos así:

<script language="javascript">
function inicio() {
document.getElementById("imagen").src = (screen.width == 800) ? "imagen800.gif" : "imagen1280.gif"
}
//debes cambiar el nombre de imagen800.gif e imagen1280.gif por
//los nombres reales de las imágenes
</script>

Tal vez no salga a la primera porque lo hice a pelo, pero pruébalo...

Saludos

KarlanKas · #3 (**permalink**) 03/02/2003, 06:05

Mira, se me ocurre uno muy sencillo:

<html>
<head>
<script>

//En tamanoMaximoPantalla pones la resolución máxima para la que hay imagen. Las resoluciones mayores tomarán esa imagen
//como referencia.
//En rutaDeLasImagenes pones la ruta donde están todas las imagenes. Si no hay una única ruta déjalo en blanco (rutaDeLasImagenes="").

//El formato del nombre de las imagenes debe ser del tipo de flores800.jpg (para resoluciones de 800x600) o flores1024.jpg
//(para resoluciones de (1024x768) etc.
//En cada etiqueta IMG debes poner el src="" y onerror="mostrar('flores','jpg',this)". flores aquí es un ejemplo, debes cambiarlo por el nombre de la imagen común a todas las resoluciones
// según el patrón que te he puesto(en este caso flores).
//Es importante que esté entre comillas simples. Lo mismo con la extensión, donde deberás poner la de la imagen (jpg,gif...) entre comillas simples.
//Y el this del final debes dejarlo como está.
//Estas lineas que empiezan por "//" las puedes quitar.

var tamanoMaximoPantalla=1024;
var rutaDeLasImagenes="http://www.sitio.com/imagenes";

ancho=screen.width;
if (ancho>tamanoMaximoPantalla)ancho=tamanoMaximoPant alla;
function mostrar(imagen,extension,sitio){
var nombre=rutaDeLasImagenes+"/"+imagen+ancho+"."+extension;
sitio.src=nombre;
}
</script>
</head>
<body>
<img src="" onerror="mostrar('flores','jpg',this)">
</body>
</html>

Si tienes cualquier duda por favor hazmelo saber!

babilonia · #4 (**permalink**) 03/02/2003, 06:22

gracias a los dos pero no me entero de nada, no sé lo que es tag, ni entiendo:

//En tamanoMaximoPantalla pones la resolución máxima para la que hay imagen. Las resoluciones mayores tomarán esa imagen
//como referencia.
//En rutaDeLasImagenes pones la ruta donde están todas las imagenes. Si no hay una única ruta déjalo en blanco (rutaDeLasImagenes="").

son sectores de imagen que si le pongo: table= 100% se hace un asco la imagen partida en trozos. No hay ninguna página en la que pueda ver cómo está el código? es que no entiendo el lenguaje en el que me lo explicáis... pero gracias de todas formas

KarlanKas · #5 (**permalink**) 03/02/2003, 06:35

Vamos a ver.

Tú haces una imagen para cada resolución de pantalla, no? O por lo menos debes hacerlo así porque, como has visto, si agrandas una imagen queda fatal.

Entonces haces una imagen para cada resolución:

una para 800x600
otra para 1024x768
...

hasta un tamaño máximo (no vas a estar haciendo una imagen para cada una de las resoluciones de pantalla posible porque eso sería una barbaridad.

Imaginemos que haces imágenes de distintos tamaños hasta una resolución máxima de pantalla de 1024x768.

El script que te he puesto (muy parecido al de caricatos, por cierto, hola caricatos!!) detecta la resolución de pantalla y en consecuencia muestra una imagen u otra.

Con ruta de las imágenes me refiero al camino que debes seguir para llegar hasta la imagen. el principio del SRC de la etiqueta imagen... aunque puedes quitarlo como te he dicho y poner el SRC completo en donde yo he puesto flores.

Te aclaras?

Sigue preguntando si no... sé cabezota!

babilonia · #6 (**permalink**) 04/02/2003, 09:37

más me vale serlo si quiero enterarme de algo...

no es que haga una imagen, sino que toda la página está hecha con photoshop y la imagen dividida en sectores optimizados y todo eso. Luego hay texto animado encima, tb con photoshop.
El código está todo en html al guardarlo como html e imágenes, y es ahí donde pongo ese código no? , pero ahora debo saber entre qué etiquetas del html... lo de "onerror" también lo pongo?
claro, te refieres a cada etiqueta de cada sector? supongo que sí, pues cada sector es como una imagen con su "img src"
escribo ese código en cada img además del que tenga? las dos comillas que pones juntas es para lo que ya está escrito? luego pongo onerror...y lo demás? es esto?: ey y gracias de nuevo :cantar:

<html>
<head>
<script>
var tamanoMaximoPantalla=1024;
var rutaDeLasImagenes="http://www.sitio.com/imagenes";

ancho=screen.width;
if (ancho>tamanoMaximoPantalla)ancho=tamanoMaximoPant alla;
function mostrar(imagen,extension,sitio){
var nombre=rutaDeLasImagenes+"/"+imagen+ancho+"."+extension;
sitio.src=nombre;
}
</script>
</head>
<body>
<img src="" onerror="mostrar('flores','jpg',this)">
</body>
</html>

KarlanKas · #7 (**permalink**) 04/02/2003, 09:59

Lo importante es el nombre de las imágenes de cada sector.

Luego en cada una de las <IMG> de la página quitas el contenido del SRC y lo cambias por SRC="" y pones el onerror="mostrar('ruta qeu salía en el SRC','extensión de la imagen',this)

Y ya está...

Recuerda el formato que deben tener los nombres de las imágenes...

Cualquier otra duda pregunta

KarlanKas