convert image into html sections

Question

I want to convert image into HTML sections ( see image below marked as red , blue , orange , green and yellow). That means when i click on these parts they will appear as a separate section in a separate window just like online news paper.

Well one can do this by using photoshop slicing tool may be m not sure.. but don't want to use photoshop rather i want to implement such functionality where i can select the section over image and then later on it will get convert into html page or part.

so can anyone give me some idea , example or a road map to do that

Answer 1

This is not the simplest task, luckily, there are plenty of tools that do what you want (generate the map that creates the hotspots for your image)

http://www.maschek.hu/imagemap/imgmap

http://www.image-maps.com/ This one lets you use an existing map and modify it.

and many others http://www.google.com/search?aq=f&sourceid=chrome&ie=UTF-8&q=online+image+map+creator

If you want to be able to click and link just to that part of the image you have two options:

• Write some server side code that does the slicing of images, based on the map coordinates. There are many libraries available to do this, in PHP, there's GD http://php.net/manual/en/book.image.php and http://www.imagemagick.org/script/index.php which can run on many platforms.
• When you click on an image, pass the map coordinates to the new page, and position the image using a window technique, much like css sprites. http://websitetips.com/articles/css/sprites/