So this weekend's freebie is more of a tutorial than a printable. But I have been asked to share how I make some of my images "clickable." So I thought it was time I shared!
First, create your image in whatever program you use, save it, and upload it to your blog. For blogger you need to create a new post and upload the image into that post. Then switch from compose to HTML to view the image's HTML code.
Next, you want to open a new tab in your internet browser of choice and go to this free image mapping website. Don't worry you don't have to subscribe and pay to map your images. Although you do need to register.
Begin by clicking "browse for file" to upload your image. Once your image is uploaded, you will right click to draw a rectangle on the first part of the image you wish to map.
After you draw your rectangle, you want to cut and paste the url of the link into the first box under options called "map url" (this will default with "http://www.image-maps.com/" just delete this and insert your link).
Repeat these steps (right click, draw a rectangle, and insert the url) for every part of the image you want to map. In this example from
yesterday's post, I am creating links for every article of clothing. Be careful not to overlap your rectangles!
When you are finished you should have something that looks like this:
Now right click again and select "get code." This will take you to your image's new HTML code. Again the site will try to get you to subscribe for their services. But you can bypass paying by changing the location of the image.
Remember when you started by uploading your original image to a new blog post? You need to paste that code (beginning with the http: and ending with the file name) into the first box under map info.
 |
| Paste this code into the box below |
Once you have replaced the image source, click the second tab "HTML Code." Scroll down, past their attempt to get you to subscribe, and select all of the HTML image map code.
Copy all of this code and past it into your blog post (while in HTML mode), when you switch to compose mode, you will see your pic. Be careful not to change this image or code or you will inactivate your image mapping. Once the post goes live, your image will be clickable!
Let me know if you have any questions! And have a great weekend!
Labels: Freebies, How I do it
