Redimensaionar imágenes con JAvascript

[Nachoseo]

Hola a tod@s,

He intentado hacer un procesillo en Javascript pero no tengo mucha idea de este lenguaje de programación por eso recurro a este foro en busca de ayuda.

Esto mostrando un listado de artículo en una tabla, en cada fila de la tabla se muestra en una celda la imágen del producto. Estas imágenes están en una base de datos y el problema que me encuentro es que todas tienen un tamaño distinto.

Lo que quiero hacer mediante javascript es mirar saber el ancho de la imágen y si esa imágen es mayor a 100px mostrar la imagen de 100px y si es menor pues el tamaño original de la imagen.

He puesto este código en la Web pero no me funciona:

<img src="imagen.jpg" onError="this.src='paginas/images/paginas_ext/imagen-no-disponible.gif'" id="imagen01"
<script type="text/javascript" language="javascript">
<!--
if(document.getElementById('imagen01').width>100)
{
document.write("width=100");
}
else
{
document.write("width=50");
}
-->
</script> />

Os agradezco la ayuda!

[Vhan]

Mi primera respuesta!


reescribí un poco tu codigo:

Código:

<img src="imagen.jpg" id="imagen01"


<script type="text/javascript" language="javascript">

var image=document.getElementById('imagen01');
if(image.width>100)
{
image.width=100;
}

</script> 


/>

lo que haces con
document.write("width=100");
es... escribir en la pagina????
y si no es de este tamaño (si es menor a 100) piensas dejarlo siempre en 50? o su tamaño por defecto (si es 60... 60, si es 40 dejarlo en 40).

con mi respuesta simplemente tomo la imagen (la guardo en una variable), verifico el atributo y si el width es mayor a 100 la redusco....

espero eso sea lo que buscas.

[zerokilled]

el codigo no funcionara. estas intentando poner la etiqueta SCRIPT dentro de la declaracion de otro elemento. es decir, tu no puedes hacer esto:

Código:

<img <script>...</script> />
<div <script>...</script>> </div>
<input <script>...</script> />

cualquiera de las variantes no son validas. la unica manera de incluir javascript dentro de un elemento es mediante eventos.

Código:

<elemento evento="codigo"></elemento>

en tu caso se me ocurre una de dos, utiliza CSS para que todas las imagenes obtengan el mismo tama~no. esteticamente pienso que es la mejor alternativa aunque cabe mencionar que las imagenes sufriran cierta degradacion.

la otra alternativa es con javascript, parecido a lo que intentabas hacer:

Código:

<img src="http://www.forosdelweb.com/f13/redimensaionar-imagenes-con-javascript-714708/..." onload="if(this.width > 100)this.width = 100;" />

[Nachoseo]

Muchas gracias por las respuestas, ambas me han servido de mucha ayuda para solucionar el problema que tenía con las redimensiones de imágenes.

Un saludo,

Nacho Fdez. Carreño