Yahoo Answers is shutting down on May 4th, 2021 (Eastern Time) and the Yahoo Answers website is now in read-only mode. There will be no changes to other Yahoo properties or services, or your Yahoo account. You can find more information about the Yahoo Answers shutdown and how to download your data on this help page.
Trending News
How To Change An HTML Image in the CSS sheet?
Hi, i am trying to change an html image as indicated below:
The code below was taken by right clicking the image i want to change and choosing inspect element.
I want to REPLACE THIS:
<img width="462" height="62" alt="" class="art-lightbox"
src="images/changethispicture.png" style="">
WITH THIS:
<img width="462" height="62" alt="" class="art-lightbox"
src="images/tothispicture.png" style="">
But i want to do it through the style sheet.
can This Be Done?
I think for the css theres a part art-lightbox and i managed to make that invisible by adding visibility: hidden; within that string (if thats what you call em, im new to this).
Id appreciate any advice, ive searched google and followed some examples but nothing seems to work. The invisibility: hidden hid all images on that page possibly because they were all in a layout region/cell.
Thanks again.
Thanks, i will try this to see if i can get it to work. However the reason i wanted to do this from the CSS is that i have a script that loads A DIFFERENT css depending on region/where the visitor is coming from
ie i want to present a different image to those in different regions by loading different style sheets depending on the region.
I then simply change the image in each style sheet to suit.
3 Answers
- 4 years ago
look into the link I secure under. that's an academic the place the author has layed out step by utilising step of coming up an quite expert cyber web web site utilising CSS/HTML. between the flaws secure are "buttons" (actually photos) that fluctuate once you hover the mouse over them. that's performed by utilising coming up a much better image with assorted variations of what you need on the button, then protecting off purely the element you pick displayed. to alter the image, the CSS actually strikes it and leaves the comparable mask in place, subsequently coming up a changing image.
- Anonymous8 years ago
I'm confused to why you are using inspect element to change this.
The class="art-lightbox" would suggest you are using Joomla or jQuery.
There is no simple way to change an src property via CSS.
I would use jQuery. This would also help decide when you want to change the image (on click, on load, etc.) I'm going to presume you want to change it when the page loads. Insert this code into the head, and it should replace the image (given it actually exists on the server).
<script type="text/javascript">
$(document).ready(function() {
$(".art-lightbox").attr("src","tothispicture.png");
});
</script>
- Anonymous8 years ago
If you want to load a specific image in a stylesheet for a specific area, you can simple use a div tag and put your image in the CSS file respectively.
for example in your HTML file
<div class="america"></div>
CSS file:
.america {
background-image: url("america.png");
background-repeat: no-repeat;
width: 462px;
height: 62px;
}
.china {
background-image: url("china.png");
background-repeat: no-repeat;
width: 462px;
height: 62px;
}
.england {
background-image: url("england.png");
background-repeat: no-repeat;
width: 462px;
height: 62px;
}
.. then you would simply put the <div class=""></div> tag in the file with the class you wanted.
Is this what you were looking for?