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)