#1
  1. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2003
    Posts
    3
    Rep Power
    0

    mouseover with CSS


    Hi all,

    I have a question about mouseovers with CSS, I know they are doable with changing text (size, etc.), background color and background images. But, is it also possible to swap two images on mouseover that aren't backgorund images ? With images that are there instead of a text, not behind a text ?

    Usually I would do it with java script but it's part of a bigger assignment for school and the instructions were very clear, I'm only allowed to use html and CSS, nothing else.

    So if anyone could tell me if what I have in mind is even possible and if yes, how, I would be very grateful.
    Thanks

    Ephesus
  2. #2
  3. Über nübe
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2003
    Location
    Babylon 4
    Posts
    240
    Rep Power
    12
    Are you allowed to use CSS2?
  4. #3
  5. |<.+#f@#+.&.|
    Devshed Loyal (3000 - 3499 posts)

    Join Date
    Mar 2002
    Location
    norway
    Posts
    3,009
    Rep Power
    1224
    sure

    Code:
    css:
    a.test .image2{
    	display:none;
    }
    
    a.test:hover .image1 {
    	display:none;
    }
    
    a.test:hover .image2 {
    	display:inline;
    }
    
    
    html:
    <a class="test" href="#"><img class="image1" src="logo2.png" alt="logo2" /> <img class="image2" src="logo.png" alt="logo" /></a>
    works fine in mozilla and opera, can't check in ie atm.
    Last edited by Akh; November 27th, 2003 at 08:21 PM.
  6. #4
  7. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2003
    Posts
    3
    Rep Power
    0
    khwang: Nope, I'm afraid, no CSS2.

    Akh: Thanks, I will try it asap, hope it works. Thanks again.

    Ephesus
  8. #5
  9. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2003
    Posts
    3
    Rep Power
    0
    It works in Opeara, sadly it doesn't seem to work in IE, but thanks for your help anyway.

    Ephesus

IMN logo majestic logo threadwatch logo seochat tools logo