The image mapper I used is here. You can add your image from your computer, URL, or you can use a sample image. I put in my URL then clicked on "accept". If you are a first time user, you will need to click on download, after adding your image, to begin the mapping process.
After clicking accept, my image appeared lower in the window.
The second column of choices is the coordinates that are used in the code for the image map. The third column is for "alt" text. The fourth is for the "title" text. The last is to choose if you want a new window open, a top window, or to open in the current window. I chose to open a new window. Above the last row, you can choose how you want the labeling. I choose "No Labeling". Please keep in mind that the titles you enter will appear when someone hovers over the link with their mouse.
Once you are done, go toward the bottom and click on the word "code". A generated code will be available for copying and pasting, but there will still be more work to be done.
The code that was generated for me is below:
<map id="imgmap201321093956" name="imgmap201321093956"><area shape="rect" alt="facebook" title="Facebook" coords="589,2,651,60" href="" target="_blank" /><area shape="rect" alt="twitter" title="Twitter" coords="657,0,718,58" href="" target="_blank" /><area shape="rect" alt="rss" title="RSS" coords="722,1,779,57" href="" target="_blank" /><area shape="rect" alt="Email" title="Email Notification" coords="784,0,843,57" href="" target="_blank" /><!-- Created by Online Image Map Editor (http://www.maschek.hu/imagemap/index) --></map>
Copy your code to a sticky note or a document as you will add to it. Go one line above what you copied and copy and paste the following:
<img id="imgmapYour map number" src="Your photo URL" usemap="#Your map number" />
Change the bold items to your specific information.
Then in the code that you copied, you will need to insert the URL that you want to direct people to. The URL (link) goes between the quotation marks that I changed to the color red. Once all the URLs are inserted, you will have your image map completed.
So now, your code will be unique to your photo. If you change the coordinates, you will need to create a new image map. If you just change the color or the design, but keep the same coordinates, you will not to need to create a new image map.
The other tips I will write about are backgrounds and resources on the web to find great layouts for your blog. If you want to know how I added other elements to my blog, let me know in the comments below.
Share this with other people by using the buttons to the left or the toolbar below!