Resizing Images In a Table Using JavaScript

Question

I apologize beforehand if none of this makes sense, or if I sound incompetent... I've been making webpages for a while, but don't know any JavaScript.

I am trying to make a webpage for a friend, and he requested if I could write some code to resize the images in the page based on the user's screen resolution. I did some research on this question, and it's kind of similar to this, this, and this. Unfortunately, those articles didn't answer my question entirely because none of the methods described worked.

Right now, I have a three-column webpage with 10 images in a table in the left sidebar, and when I use percentages for their sizes, they don't resize right between monitors. As such, I'm trying to write a JavaScript function that changes their sizes after detecting the screen resolution.

The code is stripped from my post if I put it all, so I'll just say that each image links to a website and uses a separate image to change color when you hover over it. Would I have to address both images to change their sizes correctly? I use a JavaScript function to switch between them.

Anyway, I tried both methods in this article and neither worked for me. If it helps, I'm using Google Chrome, but I'm trying to make this page as cross-browser as possible.

Here's the code I have so far in my JavaScript function:

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") {
    }
}

Yeah, I don't have much in it because I don't know if I'm doing it right yet. Is this a way I can detect the "width" and "height" properties of a window? The "yuk", "wb", etcetera are the images I'm trying to change the size of.

To sum it up:

I want to resize images based on screen resolution using JavaScript, but my research attempts have been... futile.

I'm sorry if that was long-winded, but thanks ahead of time!

Answer 1

This should do the trick.

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;
        }
    } 
}

I'm grabbing all of the children from a div with an id of images and looping through them whilst excluding all text nodes. Then, all I'm doing is setting the width and height based on the browser width/height multiplied by .25.

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