PDA

View Full Version : CSS equivalent of <img> "src"attribute?



fjanon
10-26-2006, 06: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, 07:35 AM
...Why?

codeexploiter
10-26-2006, 07:36 AM
img {
src: url("images/calendar.gif");
}


I don't think this is valid

tech_support
10-26-2006, 07:37 AM
It's not.

fjanon
10-26-2006, 07: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, 07:51 AM
But why?

codeexploiter
10-26-2006, 07: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, 08:08 AM
Here's one way:


<!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, 08: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, 10: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.

codeexploiter
10-26-2006, 10:22 AM
The person was looking for something which can't be done using CSS!!.

jscheuer1
10-26-2006, 05:40 PM
I thought about this a bit more and there is a way that something sort of like this can be done just with css:


<!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">

.roll {
position:relative;
}
.rollimage1 {
position:absolute;
width:auto;
height:auto;
background-image:url('image1.gif');
}
.rollimage1:hover {
background-image:url('over1.gif');
}
.roll img {
visibility:hidden;
border-width:0;
}

</style>
</head>
<body>
Yo!&nbsp;<span class="roll"><a class="rollimage1" href="javascript:void(0);" onclick="return false;"><img src="image1.gif"></a><img src="image1.gif"></span> Hi!
</body>
</html>

The two image tags in the markup have their visibility:hidden. This means that they take up space but are not seen. The one inside the absolutely positioned a tag gives it the image's intrinsic dimensions, and the one inside only the span tag, gives it its intrinsic layout. This still will not allow you to edit all images from an external file but, at this rate, using a server side (if available) variable for the images in both the style and the markup, would get you one step configuration. All this with no javascript (as before, the onclick event may be removed and the href set to a URL).