title: Using same image map on multiple images but with a different link for each area on each image
body: <p>I am trying to use multiple images using the image map "imageTileMap". </p>
  
  <pre><code>&lt;map name="imageTileMap"&gt;
      &lt;area id="quiz"shape="circle" coords="41,193,20" href=""&gt;
      &lt;area id="video"shape="circle" coords="112,193,20" href=""&gt;
      &lt;area id="presentation"shape="circle" coords="184,193,20" href=""&gt;
  &lt;/map&gt;
  </code></pre>
  
  <p>And I am using Javascript so that each area links to an anchor on a separate page, the page being dependent on the image itself. My function is: </p>
  
  <pre><code>     &lt;script type="text/javascript"&gt;
    function changeLink(clicked_href) {
      var url = clicked_href;  
      var areaQuiz = document.getElementById("quiz");
  areaQuiz.href = url + "#quiz";
  
  var areaVideo = document.getElementById("video");
  areaVideo.href = url + "#video";
  
  var areaPresentation = document.getElementById("presentation");
  areaPresentation.href = url + "#presentation";
    }
    &lt;/script&gt;
  </code></pre>
  
  <p>And the first image itself is set up as so: </p>
  
  <pre><code>&lt;a id="firstImage" href="linkedPage1.html"&gt;&lt;img src="image1.png" usemap="#imageTileMap" onClick="changeLink(this.href)"/&gt;&lt;/a&gt;
  </code></pre>
  
  <p>The second image is formatted as: </p>
  
  <pre><code> &lt;a id="secondImage" href="linkedPage2.html"&gt;&lt;img src="image2.png" usemap="#imageTileMap" onClick="changeLink(this.href)"/&gt;&lt;/a&gt;
  </code></pre>
  
  <p>The problem that I have currently is that clicking on any &lt;area&gt; on the first image directs me towards the anchor of the second image's href. How can I change the changeLink function to correctly collect the correct href? I am grateful for any response.</p>