index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
    <title>Bobble</title>
    <script type="text/javascript" src="jquery-3.2.1.min.js"></script>
    <script type="text/javascript" src="bobble.js"></script>
    <style>
      h2 {text-align: center;font-family: arial, sans-serif; color: #0D68A3;}
      #characterbody{display:block;position:relative;width:580px;height:580px;margin:100px auto;background:url(images/characterbody.png);border:1px solid transparent}
      .bobble{display:block;position:relative;width:230px;height:324px;border:1px solid transparent;margin:14px 168px 242px 182px;}
      .bobble { border-spacing: 0;}
    </style>
  </head>
  <body>
    <h2>Move mouse over head in various directions</h2>
    <div id="characterbody">
      <div id="bobblebox01" style="width: 580px;margin: 20px auto">
        <img class="bobble" border="0" src="images/characterheadcropped.png" name="pic" id="pic" style="position:relative;" />
      </div>
    </div>
  </body>
</html>