title: TypeError: 'undefined' is not an object (evaluating 'arrayImg[img].style')
body: <p>I'm trying to write a javascript program which show an hidden image.</p>
  
  <p>Here's the html part :</p>
  
  <pre><code>    &lt;!DOCTYPE html&gt;
  &lt;html&gt;
          &lt;head&gt;
                  &lt;meta charset="utf-8" /&gt;
                  &lt;title&gt; Exercice 3 &lt;/title&gt;
                  &lt;link rel="stylesheet" href="style.css" /&gt;
          &lt;/head&gt;
          &lt;body&gt;
                  &lt;header&gt;
                  &lt;/header&gt;
                  &lt;section&gt;
                          &lt;article&gt;
                                  &lt;figure&gt;
                                          &lt;img src="images/powsoundeffect.png" alt="image" /&gt;
                                          &lt;figcaption&gt;
                                                  Image 1
                                          &lt;/figcaption&gt;
                                  &lt;/figure&gt;
                                  &lt;figure&gt;
                                          &lt;img src="images/thwack_soundeffect.png" alt="image" /&gt;
                                          &lt;figcaption&gt;
                                                  Image 2
                                          &lt;/figcaption&gt;
                                  &lt;/figure&gt;
                                  &lt;figure&gt;
                                          &lt;img src="images/tophat.png" alt="image" /&gt;
                                          &lt;figcaption&gt;
                                                  Image 3
                                          &lt;/figcaption&gt;
                                  &lt;/figure&gt;
                                  &lt;figure&gt;
                                          &lt;img src="images/1311511622.png" alt="image" /&gt;
                                          &lt;figcaption&gt;
                                                  Image 4
                                          &lt;/figcaption&gt;
                                  &lt;/figure&gt;
                                  &lt;ul&gt;
                                          &lt;li&gt;
                                                  &lt;a href="#"&gt; Image 1 &lt;/a&gt;
                                          &lt;/li&gt;
                                          &lt;li&gt;
                                                  &lt;a href="#"&gt; Image 2 &lt;/a&gt;
                                          &lt;/li&gt;
                                          &lt;li&gt;
                                                  &lt;a href="#"&gt; Image 2 &lt;/a&gt;
                                          &lt;/li&gt;
                                          &lt;li&gt;
                                                  &lt;a href="#"&gt; Image 2 &lt;/a&gt;
                                          &lt;/li&gt;
                                  &lt;/ul&gt;
                          &lt;/article&gt;
                  &lt;/section&gt;
                  &lt;script type="text/Javascript" src="script.js" &gt;
                  &lt;/script&gt;
          &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>The css :</p>
  
  <pre><code>figure {
          width: 20%;
          position: absolute;
          visibility: hidden;
  }
  
  ul li {
          border: 1px solid black;
          width: 10%;
  }
  </code></pre>
  
  <p>The script :</p>
  
  <pre><code>var arrayA = document.querySelectorAll('a');
  var arrayImg = document.querySelectorAll('figure');
  
  function show_Image(text, img) {
          text.style.fontSize = '2em';
          arrayImg[img].style.visibility = 'visible';
  }
  
  for (var i = 0, c = arrayA.length; i &lt; c; i++) {
          arrayA[i].addEventListener('mouseover', function(e) {
                                                          show_Image(e.target, i);
                                                  },
                                                  false);
  }
  </code></pre>
  
  <p>When I try to run the script the following error occurs on safari :</p>
  
  <pre><code>TypeError: 'undefined' is not an object (evaluating 'arrayImg[img].style')
  </code></pre>
  
  <p>and on chromium :</p>
  
  <pre><code>Uncaught TypeError: Cannot read property 'style' of undefined 
  </code></pre>
  
  <p>It seems that the arrayImg is not containing object with the querySelector and I don't see why ...
  Anyone can help me on this ?</p>
  
  <p>Thanks !</p>