by runawayhorses September 8th 2012, 12:54 pm
You don't need any special image hosting for image maps you can upload your image map to your forums host (serving), because the image used for the image map is nothing more than a regular jpg, or png, or gif,, etc. What makes it an image map is the coding involved, and the coding is not uploaded it is applied to the image the same way you would apply any html coding.
Here is an example of an image map coding at the bottom of this posted message. You need an image editor to locate where you want the links (coordinates) to be on the map and replace the coordinates that are in this code with your link coordinates. You add the image URL and the Link URL's to this code, everything goes in this code example. You need to fill in or replace everything in this code, and if you need to add more links, then simply add more lines of coding in the example at the very bottom of this post.
You can use an image editor like "IrfanView" to display your image coordinates. Every image editor has its own way of displaying image coordinates. Just google how to make an image map with with your editor. In a nutshell you load the image in the editor, click on the top of the image where you want the link to be and it will display the coordinates of that place on the image, it will be two numbers like this example, 255, 327. Then you click at the bottom the image where you want the link to be and it will display two more set of coordinates. Then your entire coordinates for that place on the image might look something like this: 255,327,168,55. You would place those coordinates in the code.
IrfanView is free its what I use to make image maps:
http://www.irfanview.com/You add the URL to the image map in this coding, the links to where you want the destinations to go, and the coordinates and titles.
Full image map code:
- Code:
<img src="URL OF IMAGE MAP GOES HERE" width="696" height="30" border="0" alt="" usemap="#NAME OF IMAGE MAP GOES HERE" />
<map name="NAME OF IMAGE MAP GOES HERE">
<area shape="rect" coords="10,4,107,23" href="LINK TO DESTINATION GOES HERE" title="" alt="" />
<area shape="rect" coords="116,5,238,23" href="LINK TO DESTINATION GOES HERE" title="" alt="" />
<area shape="rect" coords="248,5,350,22" href="LINK TO DESTINATION GOES HERE" title="" alt="" />
<area shape="rect" coords="360,4,456,22" href="LINK TO DESTINATION GOES HERE" title="" alt="" />
<area shape="rect" coords="466,4,568,21" href="LINK TO DESTINATION GOES HERE" title="" alt="" />
<area shape="rect" coords="580,4,651,21" href="LINK TO DESTINATION GOES HERE" title="" alt="" />
<area shape="default" nohref="nohref" title="" alt=""/>
</map>
Extra link example code:
- Code:
<area shape="rect" coords="248,5,350,22" href="LINK TO DESTINATION GOES HERE" title="" alt="" />