how to embeding HTML in a slide?

I need to link to a simulation that has HTML instructions to embed as an image. I tried to convert it to Javscript document write statement, also as wrapped in a function and also as a string variable using the Hotspot interactive object and then executing the JavaScript. I tried all three methods and nothing happens when clicked after I publish it. Here is the HTML script to embed.  Appreciate any help as I am not JavaScript literate.

<div style="position: relative; width: 300px; height: 225px;"><a href="http://phet.colorado.edu/sims/states-of-matter/states-of-matter-basics_en.jnlp" style="text-decoration: none;"><img src="http://phet.colorado.edu/sims/states-of-matter/states-of-matter-basics-screenshot.png" alt="States of Matter: Basics" style="border: none;" width="300" height="225"/><div style="position: absolute; width: 200px; height: 80px; left: 50px; top: 72px; background-color: #FFF; opacity: 0.6; filter: alpha(opacity = 60);"></div><table style="position: absolute; width: 200px; height: 80px; left: 50px; top: 72px;"><tr><td style="text-align: center; color: #000; font-size: 24px; font-family: Arial,sans-serif;">Click to Run</td></tr></table></a></div>

Here is the JavaScript document write version I tried to use:

document.write("<div style=\"position: relative; width: 300px; height: 225px;\"><a href=\"http:\/\/phet.colorado.edu\/sims\/states-of-matter\/states-of-matter-basics_en.jnlp\" style=\"text-decoration: none;\"><img src=\"http:\/\/phet.colorado.edu\/sims\/states-of-matter\/states-of-matter-basics-screenshot.png\" alt=\"States of Matter: Basics\" style=\"border: none;\" width=\"300\" height=\"225\"\/><div style=\"position: absolute; width: 200px; height: 80px; left: 50px; top: 72px; background-color: #FFF; opacity: 0.6; filter: alpha(opacity = 60);\"><\/div><table style=\"position: absolute; width: 200px; height: 80px; left: 50px; top: 72px;\"><tr><td style=\"text-align: center; color: #000; font-size: 24px; font-family: Arial,sans-serif;\">Click to Run<\/td><\/tr><\/table><\/a><\/div>");

Here is the wrapped in a function version:

<script type="text/javascript">
function writeHTMLasJS(){
document.write("<div style=\"position: relative; width: 300px; height: 225px;\"><a href=\"http:\/\/phet.colorado.edu\/sims\/states-of-matter\/states-of-matter-basics_en.jnlp\" style=\"text-decoration: none;\"><img src=\"http:\/\/phet.colorado.edu\/sims\/states-of-matter\/states-of-matter-basics-screenshot.png\" alt=\"States of Matter: Basics\" style=\"border: none;\" width=\"300\" height=\"225\"\/><div style=\"position: absolute; width: 200px; height: 80px; left: 50px; top: 72px; background-color: #FFF; opacity: 0.6; filter: alpha(opacity = 60);\"><\/div><table style=\"position: absolute; width: 200px; height: 80px; left: 50px; top: 72px;\"><tr><td style=\"text-align: center; color: #000; font-size: 24px; font-family: Arial,sans-serif;\">Click to Run<\/td><\/tr><\/table><\/a><\/div>");
}
</script>

<!--
now place this function call at whatever point
it needs to write the markup on to the page: -->

<script type="text/javascript">
writeHTMLasJS();
</script>

Here is the string variable version:

var strVar="";
strVar += "<div style=\"position: relative; width: 300px; height: 225px;\"><a href=\"http:\/\/phet.colorado.edu\/sims\/states-of-matter\/states-of-matter-basics_en.jnlp\" style=\"text-decoration: none;\"><img src=\"http:\/\/phet.colorado.edu\/sims\/states-of-matter\/states-of-matter-basics-screenshot.png\" alt=\"States of Matter: Basics\" style=\"border: none;\" width=\"300\" height=\"225\"\/><div style=\"position: absolute; width: 200px; height: 80px; left: 50px; top: 72px; background-color: #FFF; opacity: 0.6; filter: alpha(opacity = 60);\"><\/div><table style=\"position: absolute; width: 200px; height: 80px; left: 50px; top: 72px;\"><tr><td style=\"text-align: center; color: #000; font-size: 24px; font-family: Arial,sans-serif;\">Click to Run<\/td><\/tr><\/table><\/a><\/div>";