A Smarter Way To Learn HTML & CSS(2015)

34
Clickable images

You can substitute an image for a link anchor (the text that the user clicks). When the user clicks on the image, it works the same as anchor text: a new page loads or something else happens. To do it, you combine two tags you already know, the a tag and the img tag.

Look again at the link code from Chapter 28.

<a href="http://www.stackoverflow.com">Stack Overflow</a>

When the user clicks the words “Stack Overflow” she’s taken to stackoverflow.com.

Here’s some code that uses the Stack Overflow logo instead of an anchor.

<a href="http://www.stackoverflow.com"><img src="images/stack-overflow-logo.png alt="Stack Overflow logo" width="85" height="25"></a>

When the user clicks the image, she’s taken to stackoverflow.com

One way to create a clickable button is to make an image of a button, then make the image clickable.

<a href="faq.html"><img src="images/button-faq.png alt="Button linking to FAQ page" width="50" height="18"></a>

Another good use for clickable images is a photo gallery. You array one or more rows of thumbnail images across the page. When the user clicks one of them, a larger version of the image loads in a new window. Here’s code that turns an array of thumbnails into a clickable catalog.

<a href="full-size-robin.html"><img class="fl-left" src="images/thumbnail-1.jpg" alt="Robin" width="50" height="50"></a>
<a href="full-size-blue-jay.html"><img class="fl-left" src="images/thumbnail-2.jpg" alt="Blue Jay" width="50" height="50"></a>
<a href="full-size-cardinal.html"><img class="fl-left" src="images/thumbnail-3.jpg" alt="Cardinal" width="50" height="50"></a>
<a href="full-size-sparrow.html"><img class="fl-left" src="images/thumbnail-4.jpg" alt="Sparrow" width="50" height="50"></a>
<a href="full-size-pigeon.html"><img class="fl-left" src="images/thumbnail-5.jpg" alt="Pigeon" width="50" height="50"></a>

A nice way to do this is to add target="_blank" to the a tag as I showed you in Chapter 32, so the page with the big picture opens in a new window. Even nicer: open it in a window that’s smaller than full-size so the user can see a portion of the original page underneath, as I showed you at the end of Chapter 32.

In your HTML file create an image tag for http://www.asmarterwaytolearn.com/robo_guy.png and link it to asmarterwaytolearn.com. Save the page and display it. Click the picture.

Sample HTML code is at:
http://asmarterwaytolearn.com/htmlcss/practice-34-1.html.

Find the interactive coding exercises for this chapter at:
http://www.ASmarterWayToLearn.com/htmlcss/34.html