HTML - Image Links

Hello there, aspiring web developers! Today, we're going to dive into the exciting world of HTML image links. As your friendly neighborhood computer teacher, I'm here to guide you through this journey, step by step. So, grab your favorite beverage, get comfortable, and let's embark on this adventure together!

What are HTML Image Links?

Before we jump into the nitty-gritty, let's understand what HTML image links are. Imagine you're creating a digital photo album. You want to display pictures, but you also want people to click on those pictures to visit other web pages. That's exactly what HTML image links do – they turn images into clickable links!

Syntax

Now, let's look at the syntax for creating an image link. Don't worry if it looks a bit intimidating at first – we'll break it down together!

<a href="URL_of_the_link">
    <img src="URL_of_the_image" alt="Description of the image">
</a>

Let's dissect this code:

1. <a href="URL_of_the_link">: This is our anchor tag. It creates the link.
2. <img src="URL_of_the_image" alt="Description of the image">: This is our image tag, nested inside the anchor tag.
3. </a>: This closes our anchor tag.

Examples of HTML Image Links

Example 1: Basic Image Link

Let's start with a simple example. Say we want to create an image of a cute puppy that, when clicked, takes us to a website about dog care.

<a href="https://www.dogcare.com">
    <img src="cute_puppy.jpg" alt="A cute puppy">
</a>

In this example:

• The image file is "cute_puppy.jpg"
• Clicking the image will take you to "https://www.dogcare.com"
• If the image doesn't load, "A cute puppy" will be displayed as alternative text

Example 2: Opening Link in a New Tab

Sometimes, we want the link to open in a new tab. We can do this by adding target="_blank" to our anchor tag.

<a href="https://www.catcare.com" target="_blank">
    <img src="playful_kitten.jpg" alt="A playful kitten">
</a>

This code will open the cat care website in a new tab when the kitten image is clicked.

Example 3: Adding a Title

We can add a title to our image link, which will appear as a tooltip when someone hovers over the image.

<a href="https://www.birdwatching.com" title="Learn about birdwatching">
    <img src="colorful_parrot.jpg" alt="A colorful parrot">
</a>

Now, when someone hovers over the parrot image, they'll see "Learn about birdwatching" as a tooltip.

Coordinate System in HTML Images

Now, let's talk about something a bit more advanced – the coordinate system in HTML images. This is particularly useful when you want to make different parts of an image clickable and link to different pages.

Image Maps

An image map allows you to define clickable areas on an image. These areas can be of different shapes: rectangles, circles, or polygons.

Here's an example of how to create an image map:

<img src="world_map.jpg" alt="World Map" usemap="#worldmap">

<map name="worldmap">
    <area shape="rect" coords="0,0,82,126" href="north_america.html" alt="North America">
    <area shape="circle" coords="90,58,3" href="south_america.html" alt="South America">
    <area shape="poly" coords="124,58,96,71,102,83,124,83,129,72" href="africa.html" alt="Africa">
</map>

Let's break this down:

1. We have an image of a world map.
2. We define a map with the name "worldmap".
3. Inside the map, we define three clickable areas:
   • A rectangle for North America
   • A circle for South America
   • A polygon for Africa

Each area has its own shape, coordinates, and link.

Understanding Coordinates

The coordinate system starts at the top-left corner of the image (0,0). The x-coordinate increases as you move right, and the y-coordinate increases as you move down.

For different shapes, coordinates work slightly differently:

Shape	Coordinate Format	Example
Rectangle	x1,y1,x2,y2	coords="0,0,82,126" (top-left to bottom-right)
Circle	x,y,radius	coords="90,58,3" (center x, center y, radius)
Polygon	x1,y1,x2,y2,...,xn,yn	coords="124,58,96,71,102,83,124,83,129,72" (series of points)

Conclusion

And there you have it, folks! We've journeyed through the world of HTML image links, from basic syntax to advanced image maps. Remember, practice makes perfect. Try creating your own image links and image maps – you might be surprised at how quickly you pick it up!

As we wrap up, I'm reminded of a student who once told me, "Sir, I thought HTML was just for boring text, but now I see it can make the internet come alive!" And that's exactly what you're learning to do – bring the internet to life, one image link at a time.

Keep coding, keep learning, and most importantly, keep having fun with it! Until next time, this is your friendly neighborhood computer teacher signing off. Happy coding!

Credits: Image by storyset