Have you noticed how sometimes as you move your mouse, the linked page changes? An easy way to get this feature on your own blog is to use Image Maps, which maps specified coordinates to a particular link target. This comes in especially handy for navigating social media icons and collages made from different images. This also removes the need to upload multiple images and trying to line them all up together!
Let’s say you’re trying to create your own social media icons. Head on back to Part 1 of this tutorial, How to Create Social Media Icons using Ribbet, and check it out. Once you have your image, you are ready to map it!
1. Go to www.image-maps.com, upload your previously saved image, and click on ‘Start Mapping Your Image’.
2. You’ll be taken to an intermediate window that you can just click through. On the right hand side, you’ll be given the choice to using a rectangle mapping or a custom shape mapping. Choose ‘rectangle’. This will open up a mapping box on your image. Adjust and place the box over an icon, and enter in the link for that icon. You can also enter in a title for that link.
Also, make sure to un-check the ‘Show Text Links’ box on the right hand side-bar.
3. Keep adding mapping areas and adding links to each icon. Once you are done (I only mapped one for this example), go to the side-bar and click on ‘Get Your Code’.
4. This image ended up a bit screwy on my screen, but you basically pick the 2nd tab, ‘HTML Code’. Copy the code.
5. Enter the code to your website. Remember to upload your own copy of the icon image and replace the image-map image code with your own uploaded image code in the HTML.
On WordPress, go to your sidebar widget or header and add in the HTML code, save and refresh.
That’s it! The important thing is to have the image ready and know where it’s going to go. Since mapped images are instantiated as HTML code, the same code can be reused over and over again in different parts of your blog. …like below!