Css Image Replacment - using CSS to change the image path

moldboy

Aug 16 2005, 04:48 AM

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

Aug 16 2005, 11:57 AM

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

Aug 16 2005, 01:18 PM

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

CODE

Well, something like that anyway.

SystemWisdom

Aug 16 2005, 04:07 PM

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

Aug 16 2005, 09:41 PM

QUOTE

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:

CODE

//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:

CODE

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 defination
echo "<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

Nov 4 2005, 01:38 AM

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:

CODE

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

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

CODE

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

CODE

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.

ADD REPLY / Got an Opinion!	Remove these ADs!	RAPID SEARCH!	Free Web Hosting	[X]
Express your Opinions, Thoughts or Contribute more info. to help others. Ask your Doubts & Queries to get answers, So that "Together We can help others!"	Register FREE for AD-FREE forum, Create your own topics, Ask Questions, track topics, setup subscriptions & notifications and Get a Free Website w/ Email and FTP.		500MB Space No Ads, CPanel, FTP, PHP, MySQL, EMails - 100% FREE