A image into different part of html page

Hi, guys need opinion on splitting an image into different parts. Any help is deeply appreciated.

For example, I have this image, https://members.afferentinput.org/wp-content/uploads/2016/10/elephant.jpg.

I need to split into head, leg, back, tail upon click.

Really appreciate with any help thankyou.

I think you need to split the image first on your Adobe Photoshop or other graphic software and then put the splitted images into each different div tags or ion-item tags… and then make your Angular animation or CSS3 animation move the div tags when you click on a button.

You need to split the image in some image desiging tool & call the exact part at any particular place. I think this is the best option we have. Let me know if you have some other option. I will be interested to check that.

I happen to saw this on https://www.w3schools.com/tags/tag_map.asp
It’s looks like playing with the coordinator will works.

1 Like