Clickable Image map

1

Hi Guys,

has anyone used a library to click on part of an image and perform an action.

I need to be able to create the following:

  1. We place an image on screen. ( this would be maybe a cartoon bedroom )
  2. When the bedside cupboard is clicked this would fire up an animation of say the drawers opening
  3. Any ideas for the best animation strategy. Would I overlay the animation on top or swap out the underlying image for an animated gif. Bearing in mind the app need to scale to different form factors.

Any help appreciated

Cheers

Steve Warburton

2

A couple of tips:

  1. The onclick event actually supplies an argument, which is an event object. It has lots of useful info:
MouseEvent {isTrusted: true, screenX: 1259, screenY: 326, clientX: 124, clientY: 145, …}
altKey: false
bubbles: true
button: 0
buttons: 0
cancelBubble: false
cancelable: true
clientX: 124
clientY: 145
composed: true
ctrlKey: false
currentTarget: null
defaultPrevented: false
detail: 1
eventPhase: 0
fromElement: null
isTrusted: true
layerX: 66
layerY: 6
metaKey: false
movementX: 0
movementY: 0
offsetX: 65
offsetY: 6
pageX: 124
pageY: 145
path: (7) [button#Button1.btn.btn-secondary.btn-md.collapse.show, div#Form1.nsb-form, div#NSBPage, body, html, document, Window]
relatedTarget: null
returnValue: true
screenX: 1259
screenY: 326
shiftKey: false
sourceCapabilities: InputDeviceCapabilities {firesTouchEvents: false}
srcElement: button#Button1.btn.btn-secondary.btn-md.collapse.show
target: button#Button1.btn.btn-secondary.btn-md.collapse.show
timeStamp: 4380.299999960698
toElement: button#Button1.btn.btn-secondary.btn-md.collapse.show
type: "click"
view: Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, parent: Window, …}
which: 1
x: 124
y: 145

I can see you using offsetX and offsetY to get the position of the click.

I would display the animation on top of the base image. If positioned just right, it will be seamless.

3

Ideally I need to detect whether ( in this case ) the blue dragon has been clicked. ( anywhere within its shape )

I have attached the sample app.

I initially had just the 3 images.
background1 set to hidden = false
background2 set to hidden = true
anim1 set to hidden = true

with the following code it worked okay.

Button1.onclick=function(){
  background1.style.display = 'none';
  background2.style.display = 'block';
  anim1.style.display = 'block';
}

I now need to have a few different sets of animations ( eg a comic strip )

So I added the 3 images into a container and duplicated them and change the code to

Button1.onclick=function(){
//Button1.style.display = "none" or 'block'
  background1.style.display = 'none';
  background2.style.display = 'block';
  anim1.style.display = 'block';
  background3.style.display = 'none';
  background4.style.display = 'block';
  anim2.style.display = 'block';
  
}

but the anim image is not overlaid it appears below the others.

animation1.appstudio.zip (1.1 MB)

4

If you change the order of the items in the Project Explorer, you can set which one is on top.

5

I’m making progress. Project attached.

I have used Flexbox but not understanding all the various settings.

I have a flexMain position set to relative.
This contains 3 flex boxes with position set to absolute.
flex1 flex2 flex3
These setting give me what I need from the animation point of view. ( ie when the screen is resized the animations work )

  1. I have set flex1-2-3 to 33% width but the only fill up approx 90% of flexMain
  2. Ideally I would like flex1-2-3 to be centered within flexMain ( I presume this would happen if 1. was as expected )
  3. When the screen size is smaller ( ie phone screen ) I want the flex1-2-3 to wrap down ( ie one on top of the other )

Are these possible within the flexbox ?

cheers

Steve Warby

animation13House.appstudio.zip (1.1 MB)

6

Hi Guys,

In each gridColumn there are three images
image1 with everything in ( set to hidden = false )
image2 with the blue dragon removed ( set to hidden = true )
image3 animated gif with the dragon moving off screen ( set to hidden = true )
I have the following happening on startAnimation to hide image1 and show image2 & image3

This works fine.

I now need to us the gridRow & gridColumns to allow the images to stretch then move down when the screen reduces.

In the attached project the top row works from an animation point of view but the gridColumns don’t wrap.
The second row wraps okay but the images are not on top of each other.

I have tried millions of variations to get this to work.

http://toolfolks.com/animhouse/

Any help appreciated.

Cheers

Steve Warbyanimation13House2.appstudio.zip (1.1 MB)

7

How are your grids defined? Flexbox is the easiest way as you can constrain a grid and then change the constraint with a simple on-the-fly css change.

8

I tried playing around with the flex box settings but couldn’t get what I needed.

Any idea what the correct settings should be ?

Cheers

Steve Warby