Insertar imagen con document.write
Quiero meter una imagen en una página con javascript write, para poder variar distintos parámetros de ella.
El problema es que se trata de imágenes que pueden estar en vertical o en horizontal... Y no se como hacer para que javascript lo sepa a la hora de escribir esta linea de img src.
He pensado que puedo hacer
Entonces podría crear una función para que, si el alto fuese mayor que el ancho (vertical) me devolviese height y sino width (horizontal).
Mi pregunta es:
¿Es posible que javascript pueda obtener el tamaño de la foto? (no se... Precargandola... O algo...)
En caso de que no... ¿podría hacer una lista .txt (o .js) con los nombres de las imágenes asociados a width o height y que javascript los recogiese? ¿Cómo?
Al tener que coger imágenes de carpetas diferentes esta ultima solución seria un poco complicada, supongo que debería crear archivos txt o js diferentes para cada carpeta... ¿no? ¿Entonces, cómo hago para llamar al archivo adecuado?
Espero impaciente tu respuesta... Se que es algo complicado y que no me he explicado demasiado bien, pero espero que puedas ayudarme.
document.write ("<img src="+carpeta+"/"+imagen+".jpg>")Las imágenes no son en su tamaño original, por lo que debo reducrilas. Debido a que es posible que las imágenes que vaya a meter no sean todas iguales no me sirve poner un porcentaje, sino que debo especificar.El problema es que se trata de imágenes que pueden estar en vertical o en horizontal... Y no se como hacer para que javascript lo sepa a la hora de escribir esta linea de img src.
He pensado que puedo hacer
document.write ("<img src=blabla"+ with o height+"=90")(Así sea horizontal o vertical la imagen el máximo de ancho u largo siempre sera 90.Entonces podría crear una función para que, si el alto fuese mayor que el ancho (vertical) me devolviese height y sino width (horizontal).
Mi pregunta es:
¿Es posible que javascript pueda obtener el tamaño de la foto? (no se... Precargandola... O algo...)
En caso de que no... ¿podría hacer una lista .txt (o .js) con los nombres de las imágenes asociados a width o height y que javascript los recogiese? ¿Cómo?
Al tener que coger imágenes de carpetas diferentes esta ultima solución seria un poco complicada, supongo que debería crear archivos txt o js diferentes para cada carpeta... ¿no? ¿Entonces, cómo hago para llamar al archivo adecuado?
Espero impaciente tu respuesta... Se que es algo complicado y que no me he explicado demasiado bien, pero espero que puedas ayudarme.
Respuesta de cvblagil
1
Lo que entiendo es que quieres que una imagen no supere el ancho o alto de 90, si lo supera lo reduces a 90.
Si no, le dejas la misma anchura o altura.
Espero que este código te sirva:
var ima= new Image();
ima.src="./abrazo.jpg"
imagen="<img src="+ ima.src;
if (ima.width>90) imagen=imagen +" width=90 ";
else imagen=imagen +" width="+ ima.width;
if (ima.height>90) imagen=imagen +" height=90 ";
else imagen=imagen +" height="+ ima.height;
imagen=imagen + ">";
document.write (imagen);
Si no, le dejas la misma anchura o altura.
Espero que este código te sirva:
var ima= new Image();
ima.src="./abrazo.jpg"
imagen="<img src="+ ima.src;
if (ima.width>90) imagen=imagen +" width=90 ";
else imagen=imagen +" width="+ ima.width;
if (ima.height>90) imagen=imagen +" height=90 ";
else imagen=imagen +" height="+ ima.height;
imagen=imagen + ">";
document.write (imagen);
1 respuesta más de otro experto
Respuesta de gandalf26
1
Si el diseño es mayoritariamente para explorer, no tienes problema: si cargas una imagen sin atributos width o height el solo le asigna los que "traiga" la imagen. Puedes hacer un "onLoad" que te de los atributos de la imagen y modificarlo a tu gusto sin más.
Haz la prueba con este código que al menos en ie6 funciona.
<html>
<head>
<title>Ejemplo de recepcion de parametros</title>
<script language="Javascript" type="text/javascript">
function dale(){
alert(this.document.getElementById("imagen").getAttribute("width"));
}
</script>
</head>
<body>
<H1>Reconocedor de Tamaño de Imagen</H1>
<img id="imagen" src=TU_IMAGEN onClick="dale()">
</body>
</html>
En netscape no funciona así :(
En caso de que lo quieras hacer con un fichero .js, yo lo haría creando arrays con las dimensiones que quieres tener en la página esas imágenes. Por ejemplo:
array_nombre_fotos[] <-- puedes meter los nombres de las fotos asociadas al indice del array.
array_ancho_fotos[] <-- metes el ancho que quieres tener en la foto con el mismo indice de array que en el de nombres.
Otro array análogo para los altos.
Así, al cargar una foto, coges esos arrays y le pones el tamaño que tienes especificado. Es decir, buscar el nombre de la imagen en el primer array y luego accedes al alto y ancho que hay en el mismo indice en los otros dos arrays...
Espero haberte ayudado; si aun te quedan dudas, no dudes en volver a preguntar.
Haz la prueba con este código que al menos en ie6 funciona.
<html>
<head>
<title>Ejemplo de recepcion de parametros</title>
<script language="Javascript" type="text/javascript">
function dale(){
alert(this.document.getElementById("imagen").getAttribute("width"));
}
</script>
</head>
<body>
<H1>Reconocedor de Tamaño de Imagen</H1>
<img id="imagen" src=TU_IMAGEN onClick="dale()">
</body>
</html>
En netscape no funciona así :(
En caso de que lo quieras hacer con un fichero .js, yo lo haría creando arrays con las dimensiones que quieres tener en la página esas imágenes. Por ejemplo:
array_nombre_fotos[] <-- puedes meter los nombres de las fotos asociadas al indice del array.
array_ancho_fotos[] <-- metes el ancho que quieres tener en la foto con el mismo indice de array que en el de nombres.
Otro array análogo para los altos.
Así, al cargar una foto, coges esos arrays y le pones el tamaño que tienes especificado. Es decir, buscar el nombre de la imagen en el primer array y luego accedes al alto y ancho que hay en el mismo indice en los otros dos arrays...
Espero haberte ayudado; si aun te quedan dudas, no dudes en volver a preguntar.