how to make a images interactive with HTML 5

how to make a images interactive with HTML 5


I'm needing learn to make images interactive with html 5 or other exist system.

19 posts / 0 new
Last post
For more complete information about compiler optimizations, see our Optimization Notice.

Estoy necesitando aprender a hacer imagenes interactivas con html 5 o otro sistema existente.

emmm, I could not get your question. maybe give an example.

Intel HTML5 Tools Technical Support


I want to create a image with butttons or other way to have a dynamics image for various operations.


try the following on the "": does it answer your question?
updated to include a html file instead.


Downloadtext/plain imgbutton.html.txt491 bytes


Good information! I will make these course for try to learn about this theme.

this tutorial its about canvas interactive i guess its the same

I  got your question and guess that you may interested in the following link for making an image interactive with html5

interactive images can be made possibly even with HTMl4.0 and java

do you mean can't do images with HTML5

you can make your application interactive using the new tag in HTML5 which is canvas

thanks for all for the good suggestions.

You may take a look at iiCreator (, which can turn static images into interactive images with clickable hotspot, mouse-over effects in HTML5 format. It is better than Javascript or Flash based image maps, as HTML5 works on PC, Mac and mobiles without any plug-in required.

Thank you Tom, if flash is not used

There are two common ways (using css and javascript codes) to create interactive images with html5.

Also you may take a look at CssDeck ( for several good examples.

First we need to draw the paths for the map. Well, I can’t draw. I got the from the web and used this as a template, when I was drawing the paths.Open up Illustrator and make sure you set the size correctly, then our job is simply to draw the paths with the pen tool, based on the existing map image.A few notes: when you are drawing, make sure that the territories are not overlapping each other. I like to draw the continents first, then draw the border lines separately, duplicate them and join these paths to a single territory (as you can see on the video above), so you are using the same paths for the neighbor territories, and we can avoid overlapping.



Energy efficiency | HVAC | Energy management | Commercial buildings | Energy savings



Downloadapplication/octet-stream 0 bytes

Why you do not using jquery? 
It's simple and gives you plenty of freedom for customization. 
I recommend you look for examples of slides or gallery,



Jennifer J. (Intel) escribió:

try the following on the "": does it answer your question?
updated to include a html file instead.

Thanks for sharing the link and attachment.

By Eva



Jimena C. thank you for your suggestion jquery is a good option for I need to do.

Leave a Comment

Please sign in to add a comment. Not a member? Join today