Wednesday, July 25, 2012

Make a clickable picture (image, photo or screenshot, banner)


The first thing is you must get the picture up on the web. This you can do by uploading to Photobucket, Get Blogger to host your picture or start a PUBLIC Google group to upload your photo. Get the URL of the photo on the web.












The basic HTML for the clickable picture (picture hyperlink) is:

<a href="URL of target site"><img src="photo URL"></a>

To the ><img> tag, you can add more attributes separated by space, especially the alt="description" tag which will give some information of the picture and will serve 2 purposes. Search engines cannot read images, but they can read what is written what is typed between the "" marks in the alt="" tag. This will help the search engines knows more about your post and helps in SEO (Search Engine Optimization). When for whatever reasons the picture cannot be displayed, instead of an empty box, the visitor will see what it typed between the "" marks in the alt="" tag.

Another attribute is the width="W" where W is the width of the image in pixel you want it to display. This is especially important when the image you uploaded is a wide picture which may exceed the width of the main column (if you include it in a post) or the width of the sidebar (if you put the image in the sidebar). You will then have to know what it the width of the main column or siderbar.

A less important attribute is the title="" attribute. If you add this attribute, when a visitor hovers the mouse over the picture, a tool tip will appear displaying what you typed between the "" marks. This may give more information to the visitor on what to expect if he clicks on the hyperlink picture.


No comments:

Post a Comment