Cambiar el tamaño de las imágenes en una tabla usando JavaScript

Me disculpo de antemano si nada de esto tiene sentido, o si parezco incompetente ... He estado haciendo páginas web por un tiempo, pero no conozco JavaScript.

Estoy tratando de hacer una página web para un amigo y me pidió si podía escribir algún código para cambiar el tamaño de las imágenes en la página según la resolución de pantalla del usuario. Investigué un poco sobre esta pregunta y es algo similar a este, este, este. Desafortunadamente, esos artículos no respondieron completamente a mi pregunta porque ninguno de los métodos descritos funcionó.

En este momento, tengo una página web de tres columnas con 10 imágenes en una tabla en la barra lateral izquierda, y cuando uso porcentajes para sus tamaños, no cambian de tamaño correctamente entre monitores. Como tal, estoy tratando de escribir una función de JavaScript que cambie su tamaño después de detectar la resolución de la pantalla.

El código se quita de mi publicación si lo pongo todo, así que solo diré que cada imagen se vincula a un sitio web y usa una imagen separada para cambiar de color cuando pasa el mouse sobre ella. ¿Tendría que abordar ambas imágenes para cambiar sus tamaños correctamente? Utilizo una función de JavaScript para cambiar entre ellos.

De todos modos, probé ambos métodos en este artículo y ninguno funcionó para mí. Si ayuda, estoy usando Google Chrome, pero estoy tratando de hacer que esta página sea lo más compatible con todos los navegadores.

Aquí está el código que tengo hasta ahora en mi función de JavaScript:

function resizeImages() {
    var w = window.width;
    var h = window.height;
    var yuk = document.getElementById('yuk').style;
    var wb = document.getElementById('wb').style;
    var tf = document.getElementById('tf').style;
    var lh = document.getElementById('lh').style;
    var ko = document.getElementById('ko').style;
    var gz = document.getElementById('gz').style;
    var fb = document.getElementById('fb').style;
    var eg = document.getElementById('eg').style;
    var dl = document.getElementById('dl').style;
    var da = document.getElementById('da').style;

    if (w = "800" && h = "600") {
    }
    else if (w = "1024" && h = "768") {
    }
    else if (w = "1152" && h = "864") {
    }
    else if (w = "1280" && h = "720") {
    }
    else if (w = "1280" && h = "768") {
    }
    else if (w = "1280" && h = "800") {
    }
    else if (w = "1280" && h = "960") {
    }
    else if (w = "1280" && h = "1024") {
    }
}

Sí, no tengo mucho porque todavía no sé si lo estoy haciendo bien. ¿Es esta una forma en la que puedo detectar las propiedades de "ancho" y "alto" de una ventana? El "puaj", "wb", etcétera son las imágenes cuyo tamaño estoy tratando de cambiar.

En resumen:

Quiero cambiar el tamaño de las imágenes en función de la resolución de la pantalla usando JavaScript, pero mis intentos de investigación han sido ... inútiles.

Lo siento si eso fue largo, ¡pero gracias de antemano!

preguntado el 09 de enero de 11 a las 03:01

1 Respuestas

Esto debería funcionar.

init();

function init()
{
    var images = document.getElementById("images");
    for(var i=0;i<images.childNodes.length;i++)
    {
        //scare off possible text nodes
        if(images.childNodes[i].tagName == "IMG")
        {
            images.childNodes[i].width = window.innerWidth * .25;
            images.childNodes[i].height = window.innerHeight * .25;
        }
    } 
}

Estoy sacando a todos los niños de un div con una identificación de images y recorrerlos mientras se excluyen todos los nodos de texto. Luego, todo lo que estoy haciendo es establecer el ancho y el alto en función del ancho / alto del navegador multiplicado por .25.

http://jsfiddle.net/CQsPk/1/

Respondido el 09 de enero de 11 a las 06:01

¿Se inicializará por sí solo o debería llamarlo onLoad? - Abluescarab

El código que publiqué se inicializará solo siempre que lo coloques dentro de un <script type="text/javascript"> etiqueta. - usuario1385191

¿Necesito MooTools o jQuery, algo para esto? - Abluescarab

¡Okey! Solo estoy teniendo problemas ... nada quiere funcionar para este problema. ¡Me siento muy incompetente! ¡Y lamento molestarlos! Tal vez sea porque mi div izquierdo no se mide en porcentaje, sino en píxeles. - Abluescarab

Pon todas tus imágenes dentro de un div que tenga una identificación de images, asi que <div id="images">. Mi código debería funcionar bien entonces. - usuario1385191

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.