Techy Tips on Tuesdays - using an image as a link

We have gotten so much positive feedback from our Techy Tips series and are so glad that you are enjoying them and learning something new (hopefully)!

If you have not already checked out our tip on hyperlinks, you may want to before continuing reading below (the tips build on one another).

When I created our social media buttons, I knew that I wanted to have a user click on the image and send them directly to our facebook, twitter, pinterest, etc pages.  If you are wondering how to do just that...read on!



 To start off, let's take the hyperlink code that we were working on last week and add to it:

<a href="www.yourURL.com" target="_blank">TEXT to display to reader</a>


Instead of displaying TEXT for the reader to click on, we want to display an image.  So we are basically going to have to replace the blue code above.


In its simplest form, this is the code to link up an image:


<img src="www.yourphotoURL.com" />
{please take special note of the "/" at the end...this is important}


The PINK text is the URL, or website, where your image is located.  Personally, I use Photobucket to store my images.  It is free and (I think) simple to use - you can sign up here.  Once you have finished editing your image, you just upload it to Photobucket.

So now let's put the two pieces together.  
This is what your new code would look like:


<a href="www.yourURL.com" target="_blank"> <img src="www.yourphotoURL.com" /> </a>



Let's move onto an example, and I will show you how to add on additional variations.

This is the code I used for my Facebook Social Media Icon (top right side of the blog).

<a href="http://www.facebook.com/CGCDesign" target="_blank"><img src="http://i1226.photobucket.com/albums/ee412/TwoSasters/Banner/facebook.jpg" height="95" width="95"  style="border: none;"/></a>

Red = Facebook URL (which is just www.facebook.com/NAMEOFPAGE)

Green = The code to open the link in a new window (see last week for more details)

Blue = Location of Image (I used Photobucket to store my photos)

Orange = You can vary the height and width of any image.  After playing around, I landed at 95 each.

Purple = This code is if you do not wish to have a border around your image.  It will override any of your default borders.

Remember, you can use this tip for any image.

If you have any questions, feel free to leave them in the comments, or send us an email.  We would be happy to help:)

Thanks for stopping by and talking a little more about HTML!!  

Share Tweet