Learning Resources
Using Images as Links
To use an image as a clickable link, you'll need to apply two concepts you've already learned:
- Creating a hyperlink.
- Inserting an image into a webpage.
Remember the image "next.jpg" that I’ve been using at the bottom of each page as a link to the next section? Here’s how it works:
First, you create a link to the desired destination. For example, if you want the image to link to the main page, start by typing the opening link tag:
<a href="URL_of_the_main_page">
Instead of adding text within the link, insert the image tag right after the opening link tag. If you're using the "next.jpg" image, it would look like this:
<a href="URL_of_the_main_page"><img src="next.jpg" alt="Next"></a>
Finally, close the link tag after the image tag, so the image is enclosed between the opening and closing link tags, like this:
<a href="URL_of_the_main_page"><img src="next.jpg" alt="Next"></a>
When you hover over the image, the cursor will change to a pointing hand, indicating that it’s clickable. If you click on the image, you'll be redirected to the linked page.
Noticing the border around the image? By default, many browsers add a border to linked images. To remove this, add the border="0" attribute to the image tag, like so:
<a href="URL_of_the_main_page"><img src="next.jpg" alt="Next" border="0"></a>
This way, the image will function as a link without any unwanted borders around it.