Reusing the same image

[AndyGroom]

Hi,

Each page on my site has the same 12 links, each link has the same logo next to it so the same logo appears 12 times on each page. Eg:

<IMG SRC=&quot;

http://www.test.com/logo.gif&quot;

WIDTH=45 HEIGHT=32 BORDER=0>

I've simplified the HTML by creating a style for the image as follows:

img.link { border: none; width: 45px; height: 32px; }

I then tried to include the address of the image within the style rather than repeating it 12 times in the IMG SRC tags:

img.link { border: none; width: 45px; height: 32px; background-image: url(&quot;

http://www.test.com/logo.gif&quot;);

}

This kind of works, it shows the image, except it overlays the IE image for an unloaded bitmap (the placeholder image) over the top of my gif.

Can I get around this?

- Andy
_______________________________
&quot;On a clear disk you can seek forever&quot;

 

[Vragabond]

When using this approach you no longer use the img tag. Combine the img element and the text element. If until now you used something like:

<img src=&quot;...&quot; ... />Some Link

use now:

<span style=&quot;link&quot;>Some Link</span>

and give your style to the span element. Also add something like the following to the style:

background-repeat: no-repeat;
padding-left: (size of your image)px;

This should do it. If it gives you trouble, just come back.

 

[AndyGroom]

Thanks, I'll give it a go!

- Andy
_______________________________
&quot;On a clear disk you can seek forever&quot;

 

[philote]

You're on the right track with the background-image. Don't use an <img> tag in your link though. Instead, make your <a> tag have the background you want (or put in a div tag in place of the img). You'll also need to define the width and height for the <a> and also make it &quot;display: block&quot;.

Another thing you should look into are SSI's (Server Side Includes). This'll allow you to write your menu in a separate file and have it included in your web pages when someone goes to view them. To do this, you'll have to make sure your web server allows them. The good thing is, when you change your menu you can do it just once, instead of changing it on each page.