Load a image from a CSS (not background image) - CSS forum at WebmasterWorld - WebmasterWorld

Forum Moderators: not2easy

Message Too Old, No Replies

Load a image from a CSS (not background image)

DJZman

7:31 am on Sep 27, 2011 (gmt 0)

10+ Year Member

I am making a website that will reuse lots of images on diffent pages.

what i would like to do is hold all the image urls in a CSS

Then when i want to use the image in the PHP file i can call it up

Any idea how to do this with out using a background statment

Like: (i know this code will not work)
Images.css file would have it in something like this.

.image1
{
image:url(logo1.gif)
}
.image2
{
image:url(photo1.gif)
}
--------------------------------------

then in the PHP file have it it pull up the photo when i want it
<html>
<head>
<link href="/css/images.css" rel="stylesheet" type="text/css" />
</head>
<body>
<center><h1> Hello welcome to</h1>
<span class="image1" width 100% height 100%><BR><BR><BR>
Here is a photo from yesterdays storm<BR>
<span class="image2" width 100% height 100%>
</body>
</html>

-----------------------------------------------------

I know this code looks lame, but im only doing it as a sample so you can see what im trying to do. so you dont get confused and think i want a background-image

Thanks for any help.

--------------------------------------------------------

penders

8:26 am on Sep 27, 2011 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

Top Contributors Of The Month

I think it would need to be a background-image if you want it referenced only in the CSS.

A reason for not having images (as opposed to background-images) in the CSS... Generally images in the HTML markup are part of the page 'content'. The CSS is purely presentational. It is good to separate the two. Your page should at least work without the CSS applied.

IMO you should be managing the image URLs in the PHP.

DJZman

9:49 am on Sep 27, 2011 (gmt 0)

10+ Year Member

See the reason why i want to do this is so later after the website is done, I can upload a new photo for (todays weather)
and then go into the CSS file and change the name of image2 for the new photo. now every php page i have that calls on that image2 will have the new image. (see what im trying to do) this way i dont have to go in and change each php file.

Also i dont what to rename the photo and upload it over the top of the other one, incase someone has a link to just the photo from another page of there own. (yes we allow people to draw photos from our website)

anyway see why i want it to be in some sort of list.

If CSS cant do that, can anything ealse do that? If so please let me know what....

penders

11:03 am on Sep 27, 2011 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

Top Contributors Of The Month

This is not what CSS is designed for and consequently CSS can't do what you require. background-image's yes; content no.

A separate PHP file could contain an (associative) array of images. You include this file on every page you require these images and reference the image as required. When you upload a new image you would update this 1 PHP file rather than your CSS. Would that be acceptable? You could later take this a step further and include your image URLs in a database, add a front end and you wouldn't need to manually edit any file.

For example...

image_list.php:

$IMAGES = array ( 
  'image1' => '/path/to/image1.jpg', 
  'image2' => '/path/to/image2.jpg', 
  'todays-weather' => '/path/to/todays_weather.jpg', 
);

In your PHP page:

<?php include('image_list.php'); ?> 
<html>  
<head>  
<title>My Page</title> 
</head>  
<body>  
<h1>Hello welcome to</h1>  
<img src="<?=$IMAGES['image1']?>" alt=""> 
<img src="<?=$IMAGES['todays-weather']?>" alt=""> 
</body>  
</html>

Your $IMAGES array could contain a lot more information, such as width, height, description etc. and include a function that generates the entire IMG element for you.

DJZman

7:02 pm on Sep 27, 2011 (gmt 0)

10+ Year Member

oh way cool thank you.

Paul_o_b

8:52 pm on Sep 27, 2011 (gmt 0)

10+ Year Member

As a matter of interest you can change an image in the html using css like this:


.imgclassname {
width:0;/* hide image*/
height:0;/* hide image*/
padding:61px 0 0 160px;/* background image width (160px) and height (61px) */
background:url(image2.png) no-repeat 0 0;/* your new image*/
}

You just set the image's width and height to zero to hide the real image and then you increase the padding on the image until its the size of your alternative image. Finally you paint that alternative image onto the foreground image's background.

I only mention it as a matter of interest and of course penders solution is the one you should go with.

DJZman

7:36 am on Sep 28, 2011 (gmt 0)

10+ Year Member

for some reason this is not working.
In fact i copyed it just the way you have it
I even made a DIR called /path/to just so i use just what you typed.
I uploaded the jpgs and no go.

anyidea whats wrong with the code, (is there a typo)?

on the top of the screen it says
$IMAGES = array ( 'image1' => '/path/to/image1.jpg', 'image2' => '/path/to/image2.jpg', 'todays-weather' => '/path/to/todays_weather.jpg', );

Then the word Hello Welcome to (and a image x'ed out (not loading)

any idea?

DJZman

7:59 am on Sep 28, 2011 (gmt 0)

10+ Year Member

I fig it out.

<?php a friend told me to put it in. in the image_list.php 1st line

and ?> after it all. now it works.

Thanks again.

rocknbil

4:53 pm on Sep 28, 2011 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

@Paul: IE has always had problems with anything set to zero, be it font size, image height, etc. . . . but you could just as easily use display: none and an .active selector that's display: inline (or block)

Paul_o_b

7:19 pm on Sep 28, 2011 (gmt 0)

10+ Year Member

@Paul: IE has always had problems with anything set to zero, be it font size, image height, etc. . . . but you could just as easily use display: none and an .active selector that's display: inline (or block)

I don't want to drag the thread off topic but you are confused a little there and I need to clear this up :)

If you set an image to be height:1px it will be exactly 1px in all IE and no more. Just try it and see. If you set it to 0px it will be 0px and invisible.

You are confusing this with IE6's behaviour when you set an element such as a div to have a height less that the current font-size/line-height as IE6 treats height as a minimum and will always expand an element to accommodate its content which in the case of an empty div is the current font-size/line-height. Setting line-height and font-size to zero will solve this problem as indeed would an overflow:hidden.

The problem does not happen with images because it is not a container for anything other than the image itself.

I have used the technique loads of times with no problems in any version of IE and commonly use it for rollovers as it avoids the hourglass flicking on and off in IE.

. . but you could just as easily use display: none and an .active selector that's display: inline (or block)

You lost me there - sorry :) If you set it to display:none then you will have nothing to hang your background image on. I feel you may have meant something else.

DJZman

6:53 pm on Sep 30, 2011 (gmt 0)

10+ Year Member

its ok to take the topic off topic, i got my answer already earlyer posts. so feel free to bring up something ealse. :)