www.webdeveloper.com
Results 1 to 7 of 7

Thread: Errr... Can do u replace an image with another image using css???

  1. #1
    Join Date
    Oct 2004
    Location
    Australia
    Posts
    76

    Exclamation Errr... Can do u replace an image with another image using css???

    I am wondering, can you replace an image with another image using css?

    I have tryed the background code:

    #pic{background:transparent url(http://)}
    but that sets it behind the pic, is there a way of removing the top layer (the pic itself) but keeping the background???

    Or is there another way to totally change the URL of the pic itself???

    Someone Please Help...

  2. #2
    Join Date
    Oct 2004
    Location
    Australia
    Posts
    76
    plz help...

  3. #3
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    You can replace images, but the method used depends on the effect and user interaction required.
    Please explain in more detail when and how the change should take place.
    At least 98% of internet users' DNA is identical to that of chimpanzees

  4. #4
    Join Date
    Jun 2004
    Location
    England
    Posts
    2,972
    You could do this by changing the background of an empty span on hover, else javasript.
    Disclaimer. (1) Whilst I will help you sometimes, if I feel like it, and my advice in relation to your actual question will be of good quality: my posts are to be taken with a pinch of salt. I will be sarcastic, deploy irony and include obscure cultural references for my own amusement without warning.
    (2) You will gain nothing from complaining, and if you try to argue with me then you will not win. No matter how noble your battle seems, I am still better than you, don't be an hero.

  5. #5
    Join Date
    Jan 2004
    Posts
    2,422
    Well... I'm not sure what you want... but... Do you want a rollover effect? If so, then let's say that /images/pie.jpg is 100px wide, and 50px high- the left half is the normal image, the right half is the rollover.
    Code:
    a.pie {
       display: block; /* Set it to be a block level element */
       height: 50px;   /* } Set height and width to 50px */
       width: 50px;    /* }                              */
       background: url(/images/a.jpg); /* Set background-image */
       text-indent: -1000em; /* Hide the text contained within */
    }
    /* Pull the background back 50px so that the right half is showing */
    a.pie:hover, a.pie:focus {background-position: -50px 0;}
    ...
    <a href="#" class="pie">Pie</a>
    That should work, I didn't test this particular code sample... is that what you wanted?

  6. #6
    Join Date
    Jan 2005
    Posts
    294
    That's the only way I know how to do it....

  7. #7
    Join Date
    Oct 2004
    Location
    Australia
    Posts
    76
    i want to swap an image on Neopets.com, it is hard because they dont allow javascript, only css and HTML, i have attached the source code, what i want to do is replace the

    images.neopets..../t/m5on.jpg
    with the image:

    images.neopets..../t/hw/m5on.jpg
    .



    It is hard because they use javscript to trigger the image change... but then its not really an image change, they use:

    <script>function mo(){ol.style.visibility='hidden'};</script>
    also i would like to change:

    images.neopets..../t/m5.jpg
    to:

    images.neopets..../t/hw/m5.jpg

    thanks for your help guys!

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles