title: Resizing Images In a Table Using JavaScript
body: <p>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.</p>
  
  <p>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 <a href="https://stackoverflow.com/questions/4329269/resizing-an-image-using-javascript-running-in-opera-browser">this</a>, <a href="https://stackoverflow.com/questions/3097494/resizing-page-elements-based-on-window-size">this</a>, and <a href="https://stackoverflow.com/questions/838137/jquery-change-height-based-on-browser-size-resize">this</a>. Unfortunately, those articles didn't answer my question entirely because none of the methods described worked.</p>
  
  <p>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.</p>
  
  <p>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.</p>
  
  <p>Anyway, I tried both methods in <a href="https://stackoverflow.com/questions/4329269/resizing-an-image-using-javascript-running-in-opera-browser">this article</a> 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.</p>
  
  <p>Here's the code I have so far in my JavaScript function:</p>
  
  <pre><code>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" &amp;&amp; h = "600") {
      }
      else if (w = "1024" &amp;&amp; h = "768") {
      }
      else if (w = "1152" &amp;&amp; h = "864") {
      }
      else if (w = "1280" &amp;&amp; h = "720") {
      }
      else if (w = "1280" &amp;&amp; h = "768") {
      }
      else if (w = "1280" &amp;&amp; h = "800") {
      }
      else if (w = "1280" &amp;&amp; h = "960") {
      }
      else if (w = "1280" &amp;&amp; h = "1024") {
      }
  }
  </code></pre>
  
  <p>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.</p>
  
  <p><strong>To sum it up:</strong></p>
  
  <p>I want to resize images based on screen resolution using JavaScript, but my research attempts have been... futile.</p>
  
  <p>I'm sorry if that was long-winded, but thanks ahead of time!</p>