Css Image Replacment using CSS to change the image path

moldboy · August 16, 2005

I was wondering if it is possable to change the path to an image using CSS, so that I could provide a sort of template system rather then having to change a bunch of thing I could have astandard page and then by changing the external CSS I could change not only styles but the whole image, I soo how I could change the background-color { url(image.gif)} but whatabout an actual image say change the src of an img tag?

mizako · August 16, 2005

I do not think that what you want to do it is possible. CSS is a style sheet for elements. An img tag it is itself an element and the src attributte has to be in the image tag inside of your XHTML code. Maybe you can use a div element and position your image as a background image for this element. This way by changing the style sheet you can change the image src.

Tyssen · August 16, 2005

I've been thinking about doing something similar recently. My thoughts were that if you wanted to change the background image of an element dynamically (say randomizing a background image) that you'd javascript or PHP or ASP to generate a different internal line of CSS code inside your HTML document, e.g. create an array with a set of URLs and then use your script to print out

<style type="text/css">	element { background: url(images/randomimage.jpg); }</style>

Well, something like that anyway.

SystemWisdom · August 16, 2005

You should really check out Brain Jar..

Click the Home menu, then go down the menu to Customize and select one of the themes.. You'll notice that the theme changes completely including background images...

This is all done with seperate CSS style sheets for each theme, and simply changed to point to a different style sheet for each theme..

The site even has alot of tutorials including how to change your sites theme using CSS (pure client-side themes)..

Anyway, I hope that helps!

moldboy · August 16, 2005

You should really check out Brain Jar..

You know that's exactly what I want except without the menu, but for the user to change the themes.
Now I was also looking at his code and sort of came to the conclusion that is isn't all CSS though, because as was mentioned in the above postings that css can't change the img tag src, so I got to wondering how did he change the floating brain image according to the style chosen, I would assume it has something to do with the style variable defigned in the setscheme.asp file, now there is another story I wouldn't have aclue how to set the scheme using an external file, nor how to do it with asp, but I assume it could be done with php, so let's say I have a file that contians a bunch of information recarding what css to use and what image where:

//Default theme$css = "default/default.css";$bannerimage = "default/banner.gif";//and so on a so forth

then in my site I would have a code that depending on the ?style= command it would include the above file at the top so:

if style="default"{include default_theme.php;}//then you would have a bunch of other if's and what to do if there was no style definationecho "<html><head><title>here it is!</title><link href="" . $css . "" rel="stylesheet" type="text/css" />";

and so on a so forth with the rest of the site, so when the style is style=defaule the default_theme.php is called which provides the file with the variables like $css

Do you think that might work, also how would I keep that style even through the rest of my pages?

someguy · November 4, 2005

You could only do this by changing a bg image, usually the bg image of the whole page, a table or a cell. You could do this by saving one css file as 'imagestyle.css and have this in it:

.style1 { background: url(images/yourimage.gif)}

and then you could insert this into the <HEAD> of your HTML file:

<LINK rel="stylesheet" type="text/css" href="imagestyle.css">

and put this in the table cell of which you want the image. NOTE you should change the width and height values to the width and height values of your image

<TD width="100" height="100" class="style1"> </TD>

and this should work or you could;

Use an external javascript to display an image,

Use a random image script and only add the image you want to be shown

Or simpily change the picture but keep the same filename. But if you choose this method the new image would have to be the same size in pixels other wise it will have to be streched.

Sign In

Css Image Replacment using CSS to change the image path

Recommended Posts

moldboy 0

Share this post

Link to post

Share on other sites

mizako 0

Share this post

Link to post

Share on other sites

Tyssen 0

Share this post

Link to post

Share on other sites

SystemWisdom 0

Share this post

Link to post

Share on other sites

moldboy 0

Share this post

Link to post

Share on other sites

someguy 0

Share this post

Link to post

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Browse

Activity

Important Information