Noob: Clickable image map area color wont show up

(Todd W. Roat) #1

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.

Any thoughts?

Link: should be a green area on chin


it cannot find the image. It comes back with a status of 404 not found.

The above link is not found. Check the filename and path again.

%3A is the URL encoding for a “:” I’m guessing it should be a %20 (space) ?

I would suggest writing your filenames without spaces too. Maybe use a “-” between words.


(Greg) #3

I agree with DBear. It’s the file name that’s causing it.


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.

Can you attach the hype file?

(Greg) #5

Michigan Tech has a pretty decent guide on avoiding special characters in file/folder names…

(Todd W. Roat) #6

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 :

I opened the site in Firefox and used F12 to see the backend code but couldn’t locate that png file address. Just curious.

Thanks for all the help!

(Greg) #7

You can look at the page source code and it will show up there.

(Todd W. Roat) #8

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>
<!-- end copy -->

<!-- text content for search engines: -->
<div style="display:none">
	<div>Click to Return</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 :wink: 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”.

In other browsers I’m not sure of the shortcuts.


(Greg) #10

Dbear is correct, heres a screen shot…



plenty of ways to find the info :smile:

(Todd W. Roat) #12

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.