title: Adding a HTML mapped image with JavaScript
body: <p>I'm new, after a lot of searching I haven't found an answer so thought I'd post. </p>
  
  <p>I'm making a website which requires the same HTML through each page, but also requires different style sheets to be used on button clicks. </p>
  
  <p>So, for one of these "skins" I'm making, I've been having some navigation troubles, which have been resolved with image mapping. Adding the HTML in for this would change the other skins, so I'm looking for some javascript to add this HTML on the button click.</p>
  
  <p>So far, I've got this, which doesn't work!</p>
  
  <pre><code>document.getElementById("test").innerHTML+= "&lt;img id="Image-Maps-Com-image-maps-2016-05-29-194027" src="http://butterybeast.hol.es/butterworldwithlabels.png" border="0" width="1037" height="753" orgWidth="1037" orgHeight="753" usemap="#image-maps-2016-05-29-194027" alt="" /&gt;
  </code></pre>
  
  <p>
  
  
  
  
  
  ";</p>
  
  <p>See it (not working) on my codepen (Although I can't see this link. Think I've broken that too... <em>sigh</em>): 
  <a href="http://codepen.io/Puffincat/pen/VjwxXG" rel="nofollow">http://codepen.io/Puffincat/pen/VjwxXG</a> </p>
  
  <p>And for the reference of the whole website idea, as I probably didn't explain too well.... <a href="http://butterybeast.hol.es/button.html" rel="nofollow">http://butterybeast.hol.es/button.html</a> </p>
  
  <p>I've been pulling my hair out trying to sort out the whole navigation issue. It's a nightmare! If there is a better solution to image mapping, I'm open for this! It's not my ideal solution, I wanted some animation on hover - but getting the image in the right place was not worth the effort. </p>
  
  <p>Anyway, as it's my first post let me know if I've done anything wrong, blah blah... blah. I really appreciate this site a lot, I've got so many useful answers from it! Don't want to misuse it. </p>
  
  <p>Thank you! </p>