Use CSS instead of <img>?

I have a toolbar in my web page. The code looks like:

<table id="toolbar">
 <tr>
  <td>
   <a href="...">
    <img alt="" src="icon1.gif" /> Link1
   </a>
   <a href="...">
    <img alt="" src="icon2.gif" /> Link2
   </a>
   <a href="...">
    <img alt="" src="icon3.gif" /> Link3
   </a>
  </td>
 </tr>
</table>

HTML:

But I want to be able to control which icon to show by the text in CSS, how can I do that? (I tried to use CSS+div, but then the toolbar became a mess)

 

I presume you want your image to span the entire table and not just a couple cells or rows?

You can add this into your CSS definition for "toolbar":

background-image: url('link/to/image.jpg');

Code (markup):

Bearing in mind that any styles you apply to the cells may make them opaque - it's just trial and error and seeing what works.

 

@Yesideez: Think for helping, but that's not what I want. I have a toolbar and it looks like:

*link1 *link2 *link3

(imagine that the *s are different icons)

And I hope I can control which icon to use via CSS.

 

Yes, you can do that. You need to make a new CSS class for each icon, for example:

CSS:

.link1 {
   background-image: url(images/link1.gif);
   background-position: top left;
   padding-left: 15px; */ Width of image */
}

.link2 {
   background-image: url(images/link2.gif);
   background-position: top left;
   padding-left: 15px; */ Width of image */
}

.link3 {
   background-image: url(images/link3.gif);
   background-position: top left;
   padding-left: 15px; */ Width of image */
}

Code (markup):

HTML:

<a href="#"><span class="link1">Link 1</span></a>
<a href="#"><span class="link2">Link 2</span></a>
<a href="#"><span class="link3">Link 3</span></a>

Code (markup):

Now, I haven't tested this although it should work. Let us know how it goes.

 

I would opt to placing class within the declaration of the anchor links rather than using span.

 

You should use CSS and a list <ul><li></li></ul> instead of a table for navigation, much better for accessibility etc..
If you want me to show you how PM msn/skype address.

 

Also, another way to do this is by using the UL and LI properties.

And then creating the CSS style for the UL, and LI property, asn the LI .a effect.

This should help, i will attach a link here so you can better understand what I am talking about.

http://www.alistapart.com/articles/taminglists/

There is a nice tutorial about it, then after you set your spacing and width and alignment issues, just use normal CSS style to add the

li .a {

Effect to it..I hope this helps some.

 

Thanks for helping. The code PixelRaider provide works, but not totally:



As you see, only the top of the image shown, and I can't see the rest of part. How can I fix this? My CSS:

#toolbar { /* this is a <div> */
 background-color:#C3D9FF;
 height:30px;
 width:100%;
}

h2 { /* I use <h2> to wrap <a> */
 font-size:9pt;
 font-weight:normal;
 margin:0px;
 line-height:30px; /* So texts will be in middle */
}

.link1 {
 background-position:top left;
 background-repeat:no-repeat;
 padding-left:20px;
 background-image:url('link1.gif');
}

Code (markup):

 

On your:

}

.link1 {
background-position:top left;
background-repeat:no-repeat;
padding-left:20px;
background-image:url('link1.gif');
}

You need to add a HEIGHT: **px;

Attribute, and set it to your icons heights. If your icons are bigger than 30px high then you need to go in to your

#toolbar { /* this is a <div> */
background-color:#C3D9FF;
height:30px;
width:100%;
}

And increase this height as well.

 

Although ShawnsITSolutions' tip doesn't work, I've found out that style="font-size:20px;" works. Thanks for everybody trying to help!

 

hmm that is very strange as this should have worked, did you use the exact same code that i put there? or did you make changes? Because the code i gave you was your code and just showing what should have been changed.

Or maybe i didn't explain myself right

 

@ShawnsITSolutions:
Well, my current code (with font-size fix):

 
   <style type="text/css">
   <!--
    .link_icon {
     background-position:top left;
     background-repeat:no-repeat;
     padding-left:20px;
     font-size:20px;
 
    #link1 .link_icon {
     background-image:url('link1.gif');
    }
   -->
   </style>
   ...
   <a id="link1" href="...">
    <span class="link_icon">&nbsp;</span>
    <span class="link_text">Link1</span>
   </a>

HTML:

I use <span> so I can control them easily via CSS (hide text, etc.).