Custom Image Links

Aug 23 2005 11:50 AM

If you've ever tried to spruce up your hyperlinks from the default underline, you've probably noticed that your styles apply not only to your regular links, but to your image links as well.

For example, say you wanted to add a dashed underline to your hyperlinks, then make the underline solid when the user hovers it:

  1. a:link, a:visited {
  2.         border-bottom: 1px dashed #003399;
  3.         color: #003399;
  4.         text-decoration: none; 
  5. }
  6.  
  7. a:hover {
  8.         border-bottom: 1px solid #003366;
  9.         color: #003366; 
  10. }

The problem though, is that all of your image links will have that same dashed bottom-border as well which just doesn't look right under an image.

Example A

The only way around this predicament is to assign all of the image links to a different class. Simple enough in theory, but it's a pain in the ass to remember to add class="image" every single time you want to use an image link if you ask me.

Use JavaScript

A better way is to let JavaScript do all the dirty work. I've created a function that will go through all the links on a page, see if the link has an img tag in it, and assign the link to class="image" if it does.

Example B

Add this in your head section:

  1. function customImageLinks() {
  2.         if (!document.getElementsByTagName) return;
  3.         var anchors = document.getElementsByTagName('a');
  4.         for (var i=0; i<anchors .length; i++) {
  5.              anchor = anchors[i];
  6.                 var images = anchor.getElementsByTagName('img');
  7.                 if (images[0] != null) {
  8.                         anchor.className = "image";
  9.                 }
  10.         }
  11. }
  12.  
  13. if (window.addEventListener)
  14.         window.addEventListener("load", customImageLinks, false)
  15. else if (window.attachEvent)
  16.         window.attachEvent("onload", customImageLinks)
  17. else if (document.getElementById)
  18.         window.onload=customImageLinks

Then you can style the image class however you see fit.

  1. a:link.image, a:visited.image, a:hover.image {
  2.         border-bottom: none;
  3. }
  • Posted 3 years, 3 months ago in Code

5 ResponsesAdd yours

Couldn’t you just write a piece of CSS that says:

a:link img {border: 0;}

or just set a global rule:

img {border: 0;}

I think either of those would work just as well.

Jeremy Flint
Aug 23 2005 1:24 PM
1 hour, 33 minutes afterwards.

Ok, just tried it and maybe that doesn’t work.

Jeremy Flint
Aug 23 2005 1:40 PM
1 hour, 50 minutes afterwards.

I’m afraid not Jeremy. The “img” tag is not what the border-bottom is being applied to. It’s being applied to the “a” tag.

CSS has no way of knowing if the link is text or if its an image. The only way to remove the border-bottom from the “img” tag is to differentiate those links from normal text links. JavaScript allows you to do it in an easy, unobtrusive manner.

Summerville
Aug 23 2005 1:44 PM
1 hour, 54 minutes afterwards.

I, like Jeremy had to try it for myself to see.
This script really does seem to be a good way to rectify the image link problem.

Christopher
Aug 23 2005 2:58 PM
3 hours, 8 minutes afterwards.

Right on the spot!

Had this problem with a CSS style on our CMS a while back and left it for dead, (Well atleast the styles were commented out), didn’t think of looping through the links and add another class at the time. It’s kinda obvious though - but sometimes the answer is right infront of you, but you still need someone to point it out for you!

It’s great to read an article which really hits you in the face, great work man!

Kim Steinhaug
Dec 17 2005 3:05 PM
3 months, 3 weeks afterwards.

You must be logged in to post a comment.