CSS equivalent of <img> "src"attribute?

**fjanon** · 10-26-2006, 05:54 AM

I am creating dynamically an <img> element in Javascript. I set the "src" attribute to a default image file path i.e. 'src="images/defaulticon.jpg"' and I would like to be able to override that path using CSS. I checked my CSS books and the list previous posts and could not find anything. I tried
"img {background: url('images/myicon.jpg')" and got the image in the background but the image with a red cross is also surimposed.

Basically I would like to see the myicon.jpg and not defaulticon.jpg in a configuration like this:

img {
src: url("images/calendar.gif");
}

<img style="vertical-align: middle;" src="images/defaulticon.gif" id="calendarContainer_Icon">

Thanks

**tech_support** · 10-26-2006, 06:35 AM

...Why?

**codeexploiter** · 10-26-2006, 06:36 AM

img {
src: url("images/calendar.gif");
}

I don't think this is valid

**tech_support** · 10-26-2006, 06:37 AM

It's not.

**fjanon** · 10-26-2006, 06:50 AM

I know

img {
src: url("images/calendar.gif");
}

does not work. That's what I am asking! How could you override the default image in CSS for an existing IMG tag? Is there another attribute than "src" I can use to specify the URL of the image in CSS?

**tech_support** · 10-26-2006, 06:51 AM

But why?

**codeexploiter** · 10-26-2006, 06:56 AM

I think using CSS you can only specify background image not the SRC of an <IMG>. If you want to change the SRC of an IMG then i think you can do it using JavaScript.

**jscheuer1** · 10-26-2006, 07:08 AM

Here's one way:

HTML Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">

.rollimage1 {
display:block;
width:70px;
height:113px;
background-image:url('image1.gif');
}
.rollimage1:hover {
background-image:url('over1.gif');
}

</style>
</head>
<body>
<a class="rollimage1" href="javascript:void(0);" onclick="return false;"></a>
</body>
</html>

Notes: If you want the rollover to be linked, you can forget about the javascript:void(0); and remove the onclick event (the two of which together degrade gracefully in most non-javascript enabled browsers) and just give the href attribute the URL for the link. Because IE does not apply the hover pseudo class except to anchor links, this syntax (or one much like it) pretty much must be used. Browsers require display:block; to render properly. If you want the images to appear to be inline, floating, positioning or the use of a table would be required. The width and height should be that of the images. Two images of the same dimensions should be used but, with a little creativity that can be worked around.

This sort of effect can be more conveniently accomplished with active javascript but, that leaves out non-javascript enabled browsers.

**fjanon** · 10-26-2006, 07:56 AM

Why?

I have an HTML/JS page that I don't want to modify each time a customer asks for a different look (meaning also the path and name for the IMG src) => therefore the existence of external CSS stylesheets! The problem is that <img src='defaultIcon'> is not easily customized with an external stylesheet. All the solutions involving another element and its background don't work because you need to know the size of the image to have a snug enclosing element! The IMG tag, although simple, does actually get the size of the image and sizes the containing box accordingly!

I thought I missed something in the CSS2 spec and there was a way to specify the image src path in a stylesheet...

**jscheuer1** · 10-26-2006, 09:13 AM

Nope, you cannot get that sort of configurability and functionality with css alone. If you use javascript, you could configure your images (as well as have all or most of the script code) in an external javascript file.

Thread: CSS equivalent of <img> "src"attribute?

Thread Tools

Search Thread

CSS equivalent of <img> "src"attribute?

Bookmarks

Bookmarks

Posting Permissions