I have two external CSS files and depending on the background colour (white or black) choosen by the user - the database will load the appropiate CSS file.

I want the external CSS to contain a icon (graphic) or location to the graphic.
I have created a icon version that looks good on White and a version for black so I just need any coding that resides on the external CSS and the reference in the html page

any help appreciated

~ian

You're talking about placing an icon on the page based on whichever stylesheet is in use?

You can use a transparent spacer the same size as the icon and set the icon as a background image, calling the icon that matches each stylesheet respectively. Make sure you specify a background color and a text color for the icon rule, and set alt text to load in the event the transparent spacer does not show up.

That's by far the easiest way to handle this :)

thanks the_pm
I have almost no CSS knowlwdge - is there a online tutorial or example code for this.

I can create a placeholder the proper width="62" height="36" in my html document but the referencing from the CSS and how in the CSS - do I reference a URL to the different images

any info helpfull

Here, maybe this will help:

create a nearly identical rule in both style sheets:

.switcherIcon { background:#FFF url(icon1.gif) ; color:#000 }
.switcherIcon img { border:none ; height:36px ; width:62px }

- and -

.switcherIcon { background:#000 url(icon2.gif) ; color:#FFF }
.switcherIcon img { border:none ; height:36px ; width:62px }

Then in your HTML document:

<a href="[whatever code triggers the switcher]" class="switcherIcon"><img src="spacer.gif" alt="Switch Styles" /></a>

Not only will this give you the desired effect, it will make it usable in the event your images fail to load or someone has image loading turned off. That last bit is all about accessibility ;)

HTH!

Thanks the_pm


one last question

[whatever code triggers the switcher] - the database will determine the CSS file to load according to the user preferences - I put the proper image filename into the code you provided and into the appropiate CSS file

in the HTML file

<a href="[whatever code triggers the switcher]" class="switcherIcon"><img src="spacer.gif" alt="Switch Styles" /></a>

I want to link to my domain

<a href="http://www.MYDOMAIN.com">
<img src="spacer.gif" width="62" height="36" class="switcherIcon"">
</a>

is the above correct - it leaves me with a X because the spacer.gif is nonexistant and the link is highlighted

is there a way to have a placeholder and the class reference

ian

Well yeah, you have to actually have a transparent spacer .gif on your server and you have to supply the path to it - saying "spacer.gif" won't magically make this work ;)

Your code is fine, except you'll want to remove the errant quotation mark near the end of the <img> tag. You'll find that using the CSS code I gave you will eliminate the link highlight as well as the need to specify width/height info in the <img> tag, handy if you change your design later and don't want to have to change this info on every single page of your site!

Thanks the_pm

sometimes it takes a while to sink into the noodle : )
appreciate the information and have a happy holidays

~ian

Happy holidays to you as well Ian. Glad I could help :)