 |
|
 |
|
 |
||||||||||||||||||
|
Using Pictures for Links Everyone enjoys the ability to use a picture for a link, because we all want to be able to spice up the website with pictures.So we've got to start with the simple just turning the image into a link. To do this we are going to combine two codes. The code to make a link and the code to make a picture. <a href="http://www.mistyicedesigns.com"><img src="/images/midbutton.jpg></a> Notice how, like with the link code we placed the <a href="http://www.mistyicedesigns.com"> and the </a> tags around what we wanted to be the link. Now when we do this the output on the site would look like this: 
Notice how around the image there is a orange box, purple if the link is visited. To show that the image is a link. MOST people don't like this, and so there is a way to stop that. Inside your <img src="/images/midbutton.jpg"> tag we are going to add border=0 so it should now look like this: <a href="http://www.mistyicedesigns.com"><img src="/images/midbutton.jpg" border=0></a> It will now output like this:
Notice the lack of the border now. In addition to this we can add a alt property to the link. The alt property would be placed within the <img src="/images/midbutton.jpg" border=0> and would look like this alt="mistyicedesigns.com" So now your code looks like this: <a href="http://www.mistyicedesigns.com" ><img src="/images/midbutton.jpg" alt="mistyicedesigns.com" border=0></a> Now the output appears to be the same, but when you hover your mouse over it you'll see "mistyicedesigns.com" come up inside a little box. Go ahead try it.
|
