An image map is an image with specific clickable areas. You may create a map where you can click on city names or even states that goes to specific pages or displays additional information. The simplest way to create an image map is to use HTML. You can use a tool like Dreamweaver to define the coordinates of each clickable area.
An image map with special effects requires more than HTML. In the past, you could achieve certain effects with flash. Now, you can use jQuery to build what you needed to use Flash for. The jQuery plugin called ImageMapster helps you to make HTML images without Flash. It works on modern web browsers and mobile devices. With ImageMapster, you can highlight and select areas on your map, create special effects, show floating tool tips and more.
To use Imagemapster, you need to do the following:
- Download the jQuery plugin and include it in your page.
- Create an image map and add to your page.
- Apply the Imagemapster code.
- Add the special effects that you want to include.
- Write additional code to include additional functionality.
- Test your image map.
Imagemapster has demos and documentation that provides more details on how to use this plugin.
While looking for jQuery tutorials that were more challenging than the typical beginner tutorials, I found marcgrabanski.com. His now defunct developer blog has a few tutorials on jQuery. Marc posted one on Google Maps and jQuery. This tutorial had exactly what I was looking for. It showed a practical use for jQuery instead of how to create an animated box. Marc walks you through a step by step process of using jQuery with Google Maps. He shows you how to mashup jQuery with Google Maps to create a simple map that overwrites Google Map popups.
If you are learning jQuery and want to try a tutorial that is more challenging and fun, I suggest taking a look at jQuery and Google Maps.
For a project, I needed to add a slideshow to the home page of the website. I looked for a jQuery solution. I found JQuery Cycle Plugin. It has different transition effects and very simple CSS. jQuery Cycle Plugin is very easy to implement and place in your design. I’m usIng the fade transition. It works well with the site design.
There are many cheat sheets or quick reference guides available for web developers. Use the following cheat sheets to quickly learn HTML5, CSS3 and jQuery:
If you need to find more cheat sheet for developers, devcheatsheet.com has them.