Jump to content


Photo

How can I controll images with CSS?


  • Please log in to reply
6 replies to this topic

#1 bobleny

bobleny
  • Members
  • PipPipPip
  • Advanced Member
  • 429 posts

Posted 21 August 2006 - 05:21 PM

I know I could spend an hour or two online and I'd probably find it, but this was easier.

How can I use CSS to display an image?

I was thinking something like this:

XHTML:
<img class="header" />

CSS:
img.header
{
  header.gif
}
-- www.firemelt.net --
First do me a favor and read this: JavaScript is NOT Java - Then read this: www.php.net - When your done with that, read this Topic
After that, floors open. I and anyone else will be MORE than happy to answer YOUR query! [Topic Solved]
Cheer up, the worst has yet to come...

#2 moberemk

moberemk
  • Members
  • PipPipPip
  • Advanced Member
  • 695 posts

Posted 21 August 2006 - 06:21 PM

<div class="flip">&nbsp;</div>

CSS:
.flip {
background-image: url(image_url);
}
.flip:hover {
background-image: url(image2_url);
}

Simple enough.
Disclaimer: No matter how harsh I may be, I'm always IMO only.

#3 bobleny

bobleny
  • Members
  • PipPipPip
  • Advanced Member
  • 429 posts

Posted 21 August 2006 - 06:32 PM

Oh, I'm sorry, when I said change I ment I want the ability to change it. I just want to use css to display it.

I want to have to diffrent CSS files so If I use the first one, the top image is header.gif, but if I use the second file, I want the top image to be header2.gif.

Do you understand?
-- www.firemelt.net --
First do me a favor and read this: JavaScript is NOT Java - Then read this: www.php.net - When your done with that, read this Topic
After that, floors open. I and anyone else will be MORE than happy to answer YOUR query! [Topic Solved]
Cheer up, the worst has yet to come...

#4 makeshift_theory

makeshift_theory
  • Members
  • PipPipPip
  • Advanced Member
  • 226 posts

Posted 21 August 2006 - 07:19 PM

Just make two css files, one with the class as mentioned with the background-url attribute as header.gif
and the other css file make it with th eother background-url attribute.  Simple no?
<b>Emacs</b> it's great for the body.
<br><br>
<b>Trust the TechnoLust</b>

<b><u>Have a question check here:</u></b>
PHP Manual: http://www.php.net

#5 bobleny

bobleny
  • Members
  • PipPipPip
  • Advanced Member
  • 429 posts

Posted 21 August 2006 - 09:05 PM

No, I don't want to change the background image. I know how to do that anyways...

I just want to change the shown images through out the site dictated by the CSS file the user has chosen.
-- www.firemelt.net --
First do me a favor and read this: JavaScript is NOT Java - Then read this: www.php.net - When your done with that, read this Topic
After that, floors open. I and anyone else will be MORE than happy to answer YOUR query! [Topic Solved]
Cheer up, the worst has yet to come...

#6 wildteen88

wildteen88
  • Staff Alumni
  • Advanced Member
  • 10,482 posts
  • LocationUK, Bournemouth

Posted 22 August 2006 - 10:13 AM

The only way for CSS to display an image is by using the background-image style attribute. There is no other CSS attributes that can display an image AFAIK.

This is probably not a good idea to have but what you could do is have two image tags where one displays header1.gif and other displays header2.gif. Give them class names of header1 and header2

Now in the stylesheet you want to display header1.gif add this to it:
.header1 {
    display: block; /* this shows the image for header1 */
}
.header2 {
    display: none;  /*this stops the header2 image from displaying */
}
For the style you want to display header2.gif you use this:
.header1 {
    display: none; /*this stops the header1 image from displaying */
}
.header2 {
    display: block; /* this shows the image for header2 */
}
That way when the user switches stylesheet a different image will be shown for each style.

However using the background-image attribute is probably better.

#7 ToonMariner

ToonMariner
  • Members
  • PipPipPip
  • Advanced Member
  • 3,342 posts
  • LocationNewcastle upon Tyne, UK

Posted 22 August 2006 - 10:37 AM

what he is trying to do is skin his site.

To that end makeshift provided (IMO) the best option to follow.

Just have multiple css files that you can switch between.

If Bobleny needs any inspiration go and look at css zen garden
follow me on twitter @PHPsycho




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users