Tuesday, February 12, 2013

Tutorial on Image Mapping

Image Mapping is when a clickable link in inserted into an image.  My header used to look like:

Image Mapping Header
I decided I wanted my follow buttons in my header.  I used Pixlr.com to add the follow buttons into the image then saved the image to Photobucket when it was the way I wanted it.

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. 

Blogger Image Mapper Follow Buttons
The first column you have to select is for what kind of area you want around the clickable link.  The choices are rectangle, polygon, or circle.  I chose that I wanted a rectangle.  To select the area, as shown above, drag your mouse to the area you want to select, then when you have finished the first area, go up, and press the next number to select the next area.  The importance of this is that anytime someone clicks within the rectangle, the link can be clicked. I always try to make the big enough so people don't have to guess.

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.

To add this header to your blogger blog, go to the layout, and add a gadget below the favicon and navbar.  You will select HTML/Javascript.  Once that opens, copy and paste the complete code into the window, then press save.  Go to your blog and test out all the links. Remember to remove your other header once you are happy with your new clickable header.

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!

Related Posts Plugin for WordPress, Blogger...