Thursday, July 10, 2014

how to create a picture with multiple links


Lately I've been so interested in web and graphic design, trying to create simple changes in my blog on my own. It challenges me, and I like it. :)

About 2 months ago I've changed the banner, and yesterday (God knows why these ideas come to my head around midnight) I created the "About Me" page. It still needs work, but I am happy I started the change. 


Instantly I had this idea to finally update my profile picture. I didn't like the generic blogger tiny picture with text added on the bottom. So, I went on the internet for inspiration and noticed that I enjoyed the look and functionality of the profile pictures with built-in social media icons and links to those profiles.

Now, how the heck do I do that?! I've never studied html or CSS. I even learned the "image mapping" word combination last night (apparently, that's how making a picture with multiple different links is called. You're welcome!).

Apparently, there is a way around all the programming! There is a website called www.image-maps.com which does all the dirty programming work for you. Here's how I did it:

1.  I created a 300x300 px white square in Photoshop and threw in all the pictures I wanted to show up on my final image, including pretty watercolored social media icons (which you can download for free here). If you want the picture to look seamless, choose the color of the background (white in my case) according to the color scheme of your website.


2. Go to any image hosting website and load your image there to receive a direct link to your image. Image Maprs website deletes the images that were loaded from your computer within 24 hours without premium membership. We don't want our work go to waste, right?

3. Go to www.image-maps.com and paste the link to your image.


4. Click "Continue."

5. You will land on the mapping page, which is basically an empty page with your image on it and a yellow banner with instructions. Follow them. Basically, for every link you want to include on your image you will make a little rectangle. After you are done, your image will look something like this.
6. For each rectangle you make, you want to change the Map URL to the link you want this exact part of the image to lead. For example, for the rectangle with my portrait I added the URL of my "About Me" page and changed the title to "About Me."

7. After you are done with all the rectangles and links, right click on the screen and choose "Get Code" option. Copy the HTML code of your image map. Go to your Blogger menu, choose Design - Add New Widget - HTML and paste your code into the new widget window. Save changes. Move the widget into the desired place of your blog layout. You're done! That was easy, right? :)


Please, share links to your blogs if you decide to make image maps with this tutorial, I'd love to see your hard work! :)
Image and video hosting by TinyPic

4 comments:

  1. I would love to read this post before, I had hard time in finding how to create multiple links but at the end it worked and they look similar to yours!
    Thank you so much for visiting my blog :)

    See you xx

    ReplyDelete
  2. it looks great! & Sasha, you look fab in that picture!
    I love how little details come together and make a totally different experience! they really make all of the difference :)
    xx Corinne
    cateyesandthighhighs.com

    ReplyDelete

Thank you for visiting Cranberry Mix! Feel free to share your thoughts on the topic, suggestions for the future posts or ask a question.
I'll visit your blog back as soon as possible! :)