Image and Text as same Hyperlink
Forward: In this article I explain how you can make an image and a hyperlink, both of them lying next to one another, open the same web page.
By: Chrysanthus Date Published: 16 Feb 2013
Introduction
In this article I explain how you can make an image and a hyperlink, both of them lying next to one another, open the same web page. You need basic knowledge in HTML and CSS in order to understand this tutorial.
Hyperlink Rectangle
Any HTML element has a rectangle. In other words any HTML element is in a rectangle. Practically, any HTML element is effectively within the rectangle. When you click a hyperlink text, the effective click, is on the hyperlink rectangle. So, if you click inside the rectangle but not on any character of the link text, the new page will still open. Remember, the new page opened is actually downloaded from the server.
Where to place the Image
You place the image tag between the start and end tags of the hyperlink. If you place the image tag on the left of the text of the hyperlink, the image will appear on the left of the hyperlink; if you place the image tag in the middle of the text of the hyperlink, the image will appear in the middle of the hyperlink; if you place the image tag on the right of the text of the hyperlink, the image will appear on the right of the hyperlink.
When you place the image tag between the start and end tags of the hyperlink, the image goes into the hyperlink rectangle. The image as well as the text both become the content of the hyperlink. At this point clicking the image or the text means the same thing; that is, will open a new web page. In other words, clicking anything within the rectangle, even the space within, will open a new web page.
You can try the following code, with any image of your choice:
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
text text text text text <a href="http://www.somesite.com"><img src="pic.png" width="15" height="15"> Hyperlink Title</a> text text text text text
</body>
</html>
It is possible to display the rectangle of a hyperlink. To do this, you use the CSS border property. The following code gives the rectangle a border width of 2px and color, brown. Read and try the code:
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
text text text text text <a href="http://www.somesite.com" style="border:2px solid brown"><img src="pic.png" width="15" height="15"> Hyperlink Title</a> text text text text text
</body>
</html>
The style attribute for the border is placed in the start tag of the hyperlink. The border is the border outline of the rectangle.
Text Below Image
The text can be placed below the image. The simplest way I know to achieve this is to place the hyperlink in a cell of a table, in which you typed the line break element, <br> after the image. If you do not place the hyperlink in a table cell, the line break element will send all what is on its right to the next line. Read and try the following code where there are three hyperlinks in three cells:
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<table>
<tbody>
<tr><td><a href="http://www.somesite1.com"><img src="pic1.png" width="15" height="15"> <br>Hyperlink1 Title</a></td><td><a href="http://www.somesite2.com"><img src="pic2.png" width="15" height="15"> <br>Hyperlink2 Title</a></td><td><a href="http://www.somesite3.com"><img src="pic3.png" width="15" height="15"> <br>Hyperlink3 Title</a></td></tr>
</tbody>
</table>
</body>
</html>
So, to make the image and text of a hyperlink have the same effect of clicking to open a new web page, place the image tag between the start and end tags of the hyperlink.
Chrys
Related Articles
Same Page Form Feedback with JavaScriptSimulating onmouseout Event for Web Page Layers
Ajax Technology Explained
HTML Link Rectangle
Image and Text as same Hyperlink
Simulating an HTML Hyperlink
ECMAScript (Javascript) eval Function
Writing a Web Live Text Chart Application with PHP and MySQL
Page Views with Ajax and PHP and MySQL
Shopping Cart with HTML Table for Web Development in PHP and MySQL
Major in Website Design
Web Development Course