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...plz help...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.You could do this by changing the background of an empty span on hover, else javasript.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.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=http://www.webdeveloper.com/forum/archive/index.php/"#" class="pie">Pie</a> That should work, I didn't test this particular code sample... is that what you wanted?That's the only way I know how to do it....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!