View Full Version : png "on click" hot spot

11 Apr 2012, 11:06 PM
Right now it appears the hot spot for a transparent png is the pixel dimensions of the image itself not the area defined by the transparency. Is there a work around this for overlapping images and stacking images where I need the negative space of a larger image to not be "hot"

12 Apr 2012, 4:20 PM
I am not sure I follow.

If you only want part of an image to receive click events in Animator, you could just add a box, remove background-color and borders styles (so it looks "invisible") and then attach the click action to that panel?

12 Apr 2012, 7:59 PM
true that would work, great idea...but then my fancy script that you folks sent me wont work as I need all those invisible panels(as I'm sure I'll need a few to cover parts of one image) to replace the one image they are the hot spot for.

the below script works great but now I would need any of the "multiple" hotspots to replace the one image sequentially as before, any ideas?

//list of all the images, these need to be in the exported asset folder
var imageSrcList = [

//get image element
var imageElement = document.querySelector('#Board img');

//get current image index
var imageSrc = imageElement.src;
var currentImageIndex = 0;
for (var i = 0; i < imageSrcList.length; i++) {
if (imageSrc.search(imageSrcList[i]) !== -1 ) {
currentImageIndex = i;

//get next image
currentImageIndex = currentImageIndex + 1;

//go to first image if we are at end of list
currentImageIndex = currentImageIndex % imageSrcList.length;

//update image src
imageElement.src = imageSrcList[currentImageIndex];

12 Apr 2012, 8:15 PM
In case this is confusing, the reason I'm doing this is I have multiple images being stacked on a scene and they are all
different shapes and sizes. Sample image below: I want to be able to click on any of the blue areas and replace all blue areas to pink, click again and change it to green etc. But I also want to click on the orange areas and only change them to say yellow, then black. so the above script would now have to understand there are multiple "orange hotspots" that could get clicked to change only one graphic.


13 Apr 2012, 7:20 AM
Sound like you should write yourself a small js file that does all the logic, and then call it's methods from Animator.

You can include external js by adding a script tag in the Project->Head HTML property.

Let say you create an object called "imageLogic" in you external js file, then you can in Animator click action refer to it (something like "imageLogic.replaceTopImage()"). As long as you assign CSS Id to all the objects you need to change you can refer to them from the external script.

13 Apr 2012, 9:43 AM
thanks I'm going to get some help with the scripts. Do you know if the external js would still compile up in to a widget OK

13 Apr 2012, 10:12 AM
Yeah, as long as you include in the widget and link to it relatively it should work.

E.g. include the script similar to this in the Head HTML property
<script type="text/javascript" src="assets/logic.js"></script>

Then on export, copy in the logic.js file into your asset folder.

For development, you could also give the script an absolute path so you don;t have to copy it in the asset folder every time you export it. e.g
<script type="text/javascript" src="/some/place/on/my/pc/assets/logic.js"></script>
Just make sure to change it back to an relative path when you do the final export.

16 Apr 2012, 7:54 AM
Just wanted to thank you and Sencha for all the help. Its this level of support that made me buy the full product over other html animation packages. Whilst building a DEMO of an iBook we tied several options but in the end it was the level of support given that was the ultimate deciding point.



We'll post a link to the book when it goes live

16 Apr 2012, 3:59 PM
So using the transparent box object for hot spot works functionally. BUT when converted to a widget for iAuthor on click the hot spot shows a grey box until you let go of the hold. Is this coming from the sencha file, and if so is there a way to get rid of it(all other "actions" are set to non). I'm trying to turnn everything else off in case theres some other feature being stored but no luck yet

16 Apr 2012, 4:15 PM
Never mind I found a work around. If i use a transparent png instead of the box made in Sencha it never shows the grey box :)

16 Apr 2012, 8:57 PM
well that work around only lasted for one image. When I dupe this hotspot resize it and place it in a different location, that new one now exhibits the grey box on click.

17 Apr 2012, 8:02 AM
Have you tried setting the opacity of it to zero?

17 Apr 2012, 8:38 AM
Yep it's all set to zero. In a browser I don't see a transparent grey box when I click. Just when it's converted to a widget and loaded via iAuthor and previewed. It seems the click and hold or multitouch is interpreting the HTML differently. The hot spot function fine and the image is fine, it's only on click that the hotspot has a transparent grey box drawn over it

17 Apr 2012, 8:41 AM
I know feedback on click is helpful but because I have multiple hot spots to define some larger shapes this function makes it seem broken. Just trying to find a way to override it

17 Apr 2012, 9:07 AM
Looks like there is a iOS specific css property you can add to configure the tap highlight. Add the following to the custom css fields of all clickable/tappable objects, or add it as a general css rule in the projectHTML setting.

Custom CSS:

-webkit-tap-highlight-color: rgba(0,0,0,0);

or Head HTML:

<style type="text/css">
* {
-webkit-tap-highlight-color: rgba(0,0,0,0);

17 Apr 2012, 7:39 PM
used the CSS custom code and it appears to be working thank you again.