How To Hyperlink An Image | Making Real Estate Blog Images Clickable

This how-to blog is a sequel to the how-to blog I did a few days ago on How To Insert An Image. This blog will provide a little instruction on how to hyperlink an image. I am not an expert in html, so I will cover the basics of hyperlinking images, then provide resources for further study/reading.

I will follow the same format as the How To Insert Images blog by analyzing the code of a hyperlinked image. I will only write about the variables as they relate to hyperlinking. To learn more about the other variables, consider checking out the blog on Inserting Images.

Let us start by inserting a hyperlinked pretty lady (for real, the caricature doesn't do Colleen justice) into some Loren ipsum text:

Cras et quam id risus ultricies vulputate. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque a ipsum sit amet eros lobortis cursus. Donec pulvinar purus vel massa. Praesent eu mauris vel odio malesuada nonummy. Phasellus vehicula, neque at molestie laoreet, tellus felis porta massa, sed scelerisque augue quam in sapien. Suspendisse non sapien. Suspendisse gravida quam et dolor. Nunc ante arcu, ornare eget, interdum in, laoreet eget, velit. Sed volutpat, purus ac lacinia dignissim, lacus tellus ornare nibh, et mollis justo quam ut elit. Praesent nec dui. Nam bibendum orci sit amet mauris. Sed pretium nibh ut odio. Nulla lacinia ligula quis augue. In feugiat. Nam venenatis sodales turpis. Nullam vestibulum metus eu purus. Phasellus placerat tortor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In sem. Nulla facilisi. Aliquam erat volutpat. Fusce gravida justo sit amet odio mattis lobortis. Nunc sapien enim, pharetra id, tempus a, lacinia nec, libero. Pellentesque a dolor in arcu rhoncus ultricies. Integer vitae purus. Morbi tincidunt scelerisque odio. Duis sit amet odio id odio faucibus molestie. Nulla facilisi. Quisque eget risus. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer ac lectus. Maecenas.

I've hyperlinked the image to our "About Us" page at www.joelane.com. Ok, now let's view the source code and study the html code. Here is the code of the hyperlinked image:

<a href="http://www.joelane.com/about.php" target="_blank"><img height="225" alt="The Pretty Lady Boss" hspace="5" width="182" align="left" vspace="5" border="1" src="http://www.joelane.com/images/colleen-lane.jpg" /></a>

I will disucss the code sections highlighted in red. The red sections are what make this image clickable, or hyperlinked. Again, for the remainder of the image code, visit our how-to on image insertion. Ok, let's start.

Essentially, there are three parts to note in a hyperlinked image. The three parts:

Where You Want The Click To Take The Visitor [a href="http://www.joelane.com/about.php"]
This is the start of the <a> (anchor) tag. In our case, we want the image to be linked to http://www.joelane.com/about.php. Don't forget the quotes.

The Where [target="_blank"]
The 'target' attribute instructs the browser to diplay the clicked image in a variety of ways. I use two, either "_blank" or "_self". The former opens up the new url in a new browser window, while the later diplays the new url in the existing window, replacing the existing page. If you are using framed pages, you will need a few other target options. See the tutorial recommendations at the end of this blog.

The Ending [</a>]
This is the conclusion or ending of our hyperlinked image. The ending or conclusion of the <a> tag.

Conclusion
That's it. Pretty simple. In a nutshell, this is what you have in a hyperlinked image: <a href="url">The Anchor Text</a> And the target attribute, target="_", tells the browser where you want the new url.

Ok, here a repeat from the How-To Insert Images blog:

The best way to experiment with image insertion is to take some image code and place it in some lorem ipsum text and mess with the variables. A great place to experiment with html is with the free html editor NVU. It's free and easy to use.

For further study, consider W3schools html tutorials. My personal favorite. Also, I pay $25/month to use Lynda.com's tutorials. At Lynda.com, the monthly fee includes unlimited use of over 22,000 tutorials. Yup, over 22,000 of them!

BTW, much of the image insertion can be accomplished using REW's blog image tools, however, having an understanding of how image placement works is a necessity for a tech-savvy real estate agent.

Have fun hyperlinking your images!

• Rate this Post!

  Select Your Rating:

  • 5 Stars (Excellent!)
  • 4 Stars
  • 3 Stars
  • 2 Stars
  • 1 Stars (Poor)

• Share this Post

  Share With A Friend:

  Your Name Your Email

  Friend's Name Friend's Email

  Optional Message

  Send

• Print
• Social Bookmarking

  Add to Bookmarks: