In this, the inaugural tutorial of our new Blog Design For All! series, we show you a quick and dirty method for making your images clickable (like the one above) to an outbound link. We'll also demonstrate how to tag your clickable image with simple HTML markup language so that the user sees a small bit of text near the cursor when she mouses over it. Although we'll be illustrating these techniques within the context of the Blogger platform, it should be noted that they may be incorporated into any website and/or free blogging site like Wordpress. Now, on with the show!
Step 1: Upload your image (already sized to fit the allotted space on your blog, preferably) to a free photo hosting site like Flickr.
Step 2: In your Flickr photostream, find and select your recently-uploaded photo by clicking on it. Next, click on the 'Share this' drop-down menu and select the 'Grab HTML' option. In the new drop-down menu that appears underneath the HTML code, select the desired image size (i.e., the size you originally uploaded) and copy all of the HTML code that appears in the window above the size menu drop-down.
Step 3: In your Blogger publishing window, select the 'Edit Html' tab and paste the HTML you just copied on Flickr into the window. Click on the 'Compose' tab to check that the photo appears in the proper place among the other elements on the page.
Step 4: Back in the Blogger 'Edit Html' window, find the code you just inserted and replace the Flickr url after a href= with the url of the webpage that you'd like your image to point to. In the highlighted example above, http://www.flickr.com/photos... has been replaced with http://huzzahvintage.com/product... so that users are now taken to the product page for the pictured jacket instead of the Flickr page on which the image is hosted. Voila! You're done.
Extra Credit: Change the text inside the quotation marks after title= to whatever you like (a description of the image, special promo code details, etc.). Now, when the user mouses-over the image, she will see your special message and not the Flickr-generated title.
Extra Extra Credit: If you don't want users to leave your blog entirely, and would prefer, instead, that a new browser window open up upon click, simply add the tag target="_blank" after the title tag.
The end result:
* Next week we'll show you how to make a more stylized series of clickable images, like those featured in this post.