 Css Image Replacment, using CSS to change the image path |
Free Web Hosting, No Ads > CONTRIBUTE > Computers > Programming Languages > CSS (Cascading Style Sheets)|
|
|
|
  |
 Aug 16 2005, 04:48 AM
Post
#1
|
|
|
Privileged Member  Group: Members Posts: 518 Joined: 29-April 05 From: Canada Eh?!? Member No.: 6,408  |
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?
|
 |
 
|
|
Aug 16 2005, 11:57 AM
Post
#2
|
|
|
Super Member Group: Members Posts: 372 Joined: 16-August 04 From: Spain Member No.: 824 |
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.
|
|
|
|
|
Aug 16 2005, 01:18 PM
Post
#3
|
|
|
Group: Members Posts: 1,161 Joined: 9-May 05 From: Brisbane, QLD Member No.: 6,818 |
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 <style type="text/css"> element { background: url(images/randomimage.jpg); } </style> Well, something like that anyway. |
|
|
|
|
Aug 16 2005, 04:07 PM
Post
#4
|
|
|
Advanced Member Group: Members Posts: 117 Joined: 3-May 05 From: A Canadian South of the 49th Parallel Member No.: 6,544 |
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! |
|
|
|
|
Aug 16 2005, 09:41 PM
Post
#5
|
|
|
Privileged Member Group: Members Posts: 518 Joined: 29-April 05 From: Canada Eh?!? Member No.: 6,408 |
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? |
|
|
|
|
Nov 4 2005, 01:38 AM
Post
#6
|
|
|
Newbie [Level 2] Group: Members Posts: 31 Joined: 2-November 05 Member No.: 13,705 |
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 <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 CODE <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. |
|
|
|
|
Similar Topics
| Topics | Topics | |
|---|---|---|
|
|
|
|
Lo-Fi Version | Time is now: 8th September 2008 - 05:34 AM |