We have created a nice animation that involve a pictures of thee Mona Lisa’s face. Click on one of three different colored areas of her face and it launches a different video pertaining to that anatomical area. Problem is that on the Mac it was produced on all works well. But when exported into the Hype3 package and uploaded to webserver the GREEN (chin area) color just wont appear; regardless of browserThe image map selection area is recognized as clickable, and when clicked launches the target video, but the green colored area (a .png file) just wont show. Its set no differently as the blue and red areas in the same picture.
For starters, as @DBear mentioned, some html browsers/ hosts don’t take spaces very well. I recommend changing the spaces for underbars or dashes ( _ - )if you really need to have a space in between words.
eg., www.yoursite.com/regional_anesthesia_of_the_face/etc_etc
Thanks for all the replies. DBears point likely to be the issue - that pesky %3A in the filename. The files came off a Mac, and hype keeps building the HTML5 code and putting that symbol in there (appears like a tiny bullet on your screen). I will have them ranme everything to safe standards and rebuilt. And of course reports back. DBear, how where you able to see that filename being called : http://emermed.net/staging/Regional%20Anesthesia%20of%20the%20Face/mental%3Ainferior%20alveolar.png
I opened the site in Firefox and used F12 to see the backend code but couldn’t locate that png file address. Just curious.
Hmm. I did do that and its just the top level basic code pointing to the main javascript file. Let me peek deeper.
Regional Anesthesia of the Face
html {
height:100%;
}
body {
background-color: #FFFFFF;
margin:0;
height:100%;
}
<!-- copy these lines to your document head: -->
<meta name="viewport" content="user-scalable=yes, width=600" />
<!-- copy these lines to your document: -->
<div id="regionalanesthesiaoftheface_hype_container" style="margin:auto;position:relative;width:600px;height:400px;overflow:hidden;" aria-live="polite">
<script type="text/javascript" charset="utf-8" src="Regional%20Anesthesia%20of%20the%20Face.hyperesources/regionalanesthesiaoftheface_hype_generated_script.js?94879"></script>
</div>
<!-- end copy -->
<!-- text content for search engines: -->
<div style="display:none">
<div>Click to Return</div>
</div>
<!-- end text content: -->
You need to look at the DOM tree instead of the source code.
If you are in Safari for example. go to the source (CMD+ALT+U) and then click on SOURCE drop down for DOM tree Here you will see the structure of the DOM and all the Hype elements.
Or you can right click on an element on the page and select “Inspect”.
Thanks for all the replies, and sorry for delayed response. Was able to find the typo. Exporting from Mac caused a bullet figure in file name resulting in the errant %3A. I have the green spot back.
But as it turns out Squarespace (where this was to live) does not allow Hype 3 files toi live on the server via Devleopers Mode. I think I have to have it stored off server and called in via a code block.
Here you will see the structure of the DOM and all the Hype elements.
