CSS image link

[vieya]

So I've been having trouble. I want to do different style sheets and I thought it would be awesome until I came to this problem...
I have an index page. and on that page it has an image link how can I change that image so that when they load a new theme it's a new image link? Or am I forced to use that same image no matter what theme?

[thetestingsite]

I think you would want to use javascript for what you are asking.

Hope this helps.

[vieya]

how would that work?
wouldn't I have to change the image as in even when the load the style the image won't change because i cannot edit that element in css since it's an image link and not just a regular link?

[Beverleyh]

I use divs and background images, that way, the image isnt actually embedded directly in the HTML.

For example, in your html, insert a div container for your image and give it an id. Then within it, put your hyperlink code:
<div id="homepic"> <a href="index.php" title="Home"></a> </div>

Now reference the div container using its id in the stylesheet, and add a background image to it:

div#homepic {
position:absolute; top:92px; left:17px;
display:block;
width:166px; height:142px;
background: url("../images/style1pic.jpg") 0 0 no-repeat;
}

As you can see, the div container, and therefore the image too, is referenced in the stylesheet and not directly in the HTML.

To change the image, in your second stylesheet simply reference the same div container, but this time with a different image, and it will magically pop into view when you load your second stylesheet, like this:

div#homepic {
position:absolute; top:92px; left:17px;
display:block;
width:166px; height:142px;
background: url("../images/style2pic.jpg") 0 0 no-repeat;
}

Hope that helps

[vieya]

yeah that's what I did too but I guess I messed up on the coding so it didn't work. but now it works but thanks your code is very helpful as well!