|
You can make links
out of images just as easily as you can make links out of text.
Just place the <IMG>
tag command within the <a> </a> tag pair, just like
you’d place text.
Example:
<a
href=“test.htm”><img src=“image1.jpg”></a>
This line of code will
set the page up so that when a user clicks on the graphic “image1.jpg,”
they will be transported to the Web page test.htm.
Using images as a link
automatically displays the image with a border to indicate that
the image is a link.
If you do not want
this border to appear (especially if you want to create a more
professional-looking “button”), use the “BORDER=0”
parameter in the <IMG> tag.
Example:
<a
href=“test.htm”><img src=“image1.jpg”
border=0></a>
This line of code will
set the page up so that when a user clicks on the graphic “image1.jpg,”
they will be transported to the Web page test.htm, but there will
be no border around the graphic.
Let's try making the
dog picture in our existing web page into a link. Modify the HTML
code so it looks like the following (changes are in red):
<html>
<head>
<title>My First Web Page</title>
</head>
<BODY BGCOLOR=#000000 TEXT=#00FF00 LINK=#FFFF00 VLINK=#FFFFFF
ALINK=#FFCC00>
This is some text!
<pre>This is preformatted text</pre>
This web page is ©2001 by Me.
This should be a few spaces over
to the right.
<H1>This is going to be big text on its own line.</H1>
<font face="Arial" size=5>This will be almost
as big, and in Arial font!</font>
<br>
<div align="right">This should be on the next
line and on the right side of the screen.</div>
<br>
<center>This should be centered text.</center>
<br>
<a href="http://www.tmlp.com"><img
src="dog.jpg" border=0></a>
<br>
<hr width=75% size=6 align="left">
<br>
<br>
<br>
<div align="center">So should this, but several
more lines down the page.</div>
<br><br>
<a href="http://www.tmlp.com">Click here to go
to the TMLP Home Page.</a>
<br>
<br>
<ol>
<li> <font size="5">Text 1</font>
<ul>
<li><i>Text 1a</i>
<li><u>Text 1b</u>
</ul>
<li> <font size="7">Text 2</font>
</ol>
</body>
</html>
Viewing the page we
see:
You'll notice it doesn't
look any different than it did on the previous page. However,
if you pass your mouse cursor over the picture of the dog, you'll
see the cursor changes into the shape of a "pointing hand."
Click once and you are automatically transported to the TMLP Online
home page.
Up next, we'll try
adding a background image to our page to spice things up a little.
|
