Theme Layout

[Rightsidebar]

Boxed or Wide or Framed

[Boxed]

Theme Translation

Display Featured Slider

Featured Slider Styles

[Center]

Display Grid Slider

No

Grid Slider Styles

[style2]

Display Trending Posts

Display Author Bio

No

Display Instagram Footer

Weekend Freebie: Image Mapping Tutorial


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!


QuickEdit
Ashley B
7 Comments
Share :

7 comments:

  1. Great tutorial! I usually use photoshop or polyvore, but I love these type of step-by-step posts!

    AJ | TheAJMinute

    ReplyDelete
    Replies
    1. AJ, I am a HUGE fan of Polyvore! What's your username -- I recently started following your blog and I think we have a somewhat similar mindset!

      Delete
    2. Hi Denise! My username is TheAJMinute on polyvore as well. What's yours?

      Delete
    3. Hey AJ - I'm decidedlyd on polyvore (http://decidedlyd.polyvore.com/). I tried searching for you, but I didn't find any results. Please add me and I'll most definitely add you back! :)

      Delete
  2. I use imagemaps for my graphics, like my nav bar, but never thought to use it for the images in my blog posts themselves - such a great idea, thanks!

    Belle // thelifeandtimesofbelleh.blogspot.com

    ReplyDelete
  3. This is such a great tutorial! Thanks for sharing!

    Hunter
    Prep on a Budget

    ReplyDelete
  4. Hi Ashley! Thank you so much for this. I thought when people made these they were using some kind of fancy PS voodoo magic -- this is much more digestible for me!

    ReplyDelete

[name=Ashley] [img=https://1.bp.blogspot.com/-bTA6uO0YNf0/WEooiL2h2DI/AAAAAAAA-4A/4lNwqyMNFRAW7yUynRd5IRlAJVdXzWkrgCLcB/s1600/Blog_Pic_2.jpg] [description=Thanks for stopping by! Please feel free to leave a comment, I would love to hear from you.] (facebook=https://www.facebook.com/historyinhighheels/) (instagram=Ihttps://www.instagram.com/historyinhighheels/) (pinterest=https://www.pinterest.com/HistoryinHH/)