Can CSS alter an image element's src attribute?

HTML & CSS
1

Is it possible, via CSS (potentially using generated content) to remove or change the src reference in the markup below?

The easy thing to do would be to change the markup, however, this code is in the wild and I need to deal with it as it is, so I’m trying to remove the image and use a background image instead.

<input type="image" src="wp-content/uploads/image.png" name="submit" class="submit" value="Submit" />

My CSS:

.submit {width:128px;height:28px;background:url(go.png) no-repeat;}

//however the image.png image is still shown on top of the background image.

2

That is not possible with CSS alone, you would either need to edit the HTML or do it with JavaScript in combination with CSS.

3

CSS doesn’t have ANYTHING to do with content. So the answer is NO. If you use JS to alter the SRC, you don’t need CSS.

That being cleared up. You can use a spaceball.gif. That is a transparent GIF as a place holder. CSS does control an IMGs height and width ( or in this case an INPUT) and you can use a BG image on an image ( tho normally the BG is covered up by the image itself, but since the spaceball.gif is a 1px X 1px transparent gif you dont have to worry about that).

4

Hi,

Yes it is possible (indirectly).:slight_smile:

I often use this for rollovers on images without using extra elements but it can also be used to replace the image itself.


.submit {
	width:0;
	height:0;
	padding:61px 0 0 160px;/* image width (160px) and height (61px) */
	background:url(image2.png) no-repeat 0 0;
}




<input type="image"src="image1.png" name="submit" class="submit" value="Submit" />

All you do is set the width and height to zero so that no image shows. Then you increase the padding to the same size of the image that you want to display and apply a background image as usual. The foreground image is hidden and the new background image is shown instead.