Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
Remember that an image is an inline element and that means that it flows as part of the text and that also means that we get to use images for links. You'll see this a lot, you see an image in a web page and you click on that image and it takes you some place else and everybody is happy. They can use their images as links as it should be. And so, here's an example of how that's done. This is an XHTML file and here's a paragraph, and in that paragraph we have "This paragraph has an image that is also a link." And in fact, you see it down here in the browser.
This paragraph has an image that is also a link. And there is the image and you can see it's got this pretty blue box around it, which ought to tell you that that's a link. You see the browser changes when I move it over that and when I click on it, it will take us to lynda.com because here's the anchor tag, a href=http://www.lynda.com/. So, I click on that and there is the lynda. com web page and I'll press the Back button. It will take us back here. We'll see that the pretty blue box is now purple because that's our visited link color.
And so that's how an image works as link. Well, there are couple things about this that I would like to change. One is the pretty blue box. I'm not actually very fond of it. So, I'd like to get rid of that. How you do that is with the border attribute in the XHTML. So, in the image tag, I'm going to type an attribute here, border=0 and that gets rid of the box. Go ahead and save it and reload in the browser and the box is gone. That's actually much more attractive, I like that a lot better and so you see when I hover my mouse over it, it's obvious that it's a link and I click on it and it takes me to lynda.com and I click the Back button and I'm back here and everything is good.
Except, you'll notice a little dotted line around it and frankly, there is not a way to get rid of that in the Firefox browser. But you'll notice that it extends beyond the image. The image actually ends about there and the dotted line is actually beyond it and enclosing the space after the image. In fact, if I click outside of the image, we'll get rid of the dotted box but you see that my cursor actually starts changing during that space. That space after the image is part of a link and that's not really what I want. On the other side, it doesn't do that.
So this is just a quirk of the Firefox browser. Actually all the browsers have some kind of a quirk in this same area and I can get rid of all of those quirks with the same technique. The reason that space is part of the link is I actually told it that I wanted that space to be part of the link because after my image tag I've a new line and a couple of spaces here and then the end of the anchor tag. You see and we remember that the browser will take all of that white space including the new line and the spaces and folded into one space which is exactly what it's done here, so it looks all nice and spaced out in the sentence.
But that's part of the link because I've included that in the A container. So the way to get rid of it is to take the space out of the container to abut the image tag right up against the A tag. So I'll do that at the beginning, because even though isn't creating that as part of the link, in other browsers do and then over here at the end, I'll go ahead and I'll close up that space as well. And so now our image tag is right up against the anchor tag.
So the end of the begin tag, the anchor tag, there is no space between that at the beginning of the image tag and then at the end of the image tag here, there is no space between that and the end tag for the anchor element. So, when I save this and reload in the browser you'll see that you no longer have this problem. The space is not part of the link anymore and if I click on the link, you'll see that dotted box is now tight around the image and it's not enclosing the space after it anymore or the space before it.
Now the only problem with this is that this makes it necessarily longer and you know how I am. I like for things to look good in my editor as well as on the page. So I'm going to show you how this can be pretty in the editor and on the page. You notice if I break the line here, and I'll indent it a little bit, that space is inside of the anchor begin tag. So that does not actually get rendered by the browser. That's part of the rules. Browser is not allowed to render anything inside of those angle brackets. And so I can do the same thing over here and I'll actually indent that like that and so the end of the A tag is over here right up against the image and the end of the image tag is over here right up against the end tag for the A.
And so those spaces and those new lines while they are up on the screen in the editor and they help to make that pretty, they are not going to be rendered by the browser. So I'll go ahead and I'll save this and I'll reload over here and we'll see that our problem is still not a problem anymore. Those spaces are still not part of the link anymore. I can click on this and that full square is tight around the image. So in summary, this is how you create links out of images and this is how you make them work well in the editor and also on the page.
Get unlimited access to all courses for just $25/month.Become a member