So, You Want An Active Image, Huh?

Use these to jump around or read it all…

[Basic Link Format]

[An Image Link]

[Removing the Blue Border]

     This is a topic that is covered in the Primers section of HTML Goodies, but deserves its own short tutorial. The volume of e-mail I receive runs in cycles. The questions become more and more complex and then, all of a sudden, they become very simple. The new wave of HTML artists are trying their hands at the craft. And this is the question they ask most:

How do I make an image act as a link to another page?

---

The Basic Link Format

     

One of the basics foundations of HTML is the ability to link from page to page. It

’

s one of the first things you learn. Here

’

s the basic format:

---

<A HREF=”index.html”>Click Here</A>

---

     The format is simple. The A stands for Anchor and the HREF stands for Hypertext REFerence. It is a reference to another page, thus the address https://www.htmlgoodies.com.

     What shows up on the page is the text Click here for HTML Goodies. And, as you see, it shows up blue. What this tutorial is about is replacing that text with an image.

---

An Image Link

     

Here

’

s an image. Its name is sally.gif. I will use it as a link to the HTML Goodies page.

     

To replace the text above with the sally.gif image, you simply replace the text that would appear on the page with an image command calling for the sally.gif image. Like so:

---

<A HREF=”index.html”><IMG SRC=”sally.gif”></A>

---

     This is what it gives you:

     Go ahead, place your pointer over the image. It’s active and it points to the HTML Goodies home page. You’re done… almost.

---

Removing the Blue Border

     

Look at the image above. See the blue border around it? That happens when you make an image active. Remember that when you make text into a link, that it turns blue? Well, that

’

s what happens here. If you like it

—

great. You

’

re done. I think it looks unprofessional. I get rid of it. Here

’

s how:

---

<A HREF=”index.html”><IMG BORDER=”0″ SRC=”sally.gif”></A>

---

     Notice all I did was add the command BORDER=”0″ inside the image command, right between the IMG and the SRC. That sets the blue border around the active image to zero. Now, if you’d like, you can go the complete opposite way and write in BORDER=”50″. That will give you a huge blue border.

     Here’s what you get with the command above:

     Lay your pointer on the image — it’s still active, but no blue. That looks much more crisp.

     That’s about it — just allow me to remind you that all images should have HEIGHT, WIDTH, and ALT commands attached to them in order to make the transfer of pages much faster and easier to understand. But that is out of the realm of this tutorial. The learn more, go to my Height, Width, and ALT Commands tutorial.

Enjoy!

 

[Basic Link Format]

[An Image Link]

[Removing the Blue Border]