Jump to content
xisto Community
Sign in to follow this  
moldboy

Css Image Replacment using CSS to change the image path

Recommended Posts

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?

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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!

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

×
×
  • Create New...

Important Information

Terms of Use | Privacy Policy | Guidelines | We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.