How to add image as content thro' CSS? not as background.

How to add image as content thro' CSS? not as background.

CSS does not do content; it is for presentation.

If you want an image to be part of the informational content of an HTML document, you will have to use HTML.

Hai friends
I am developing css based product. I want insert a image in to td via css(not as background).this is my sample code

Thanks Sam. I got your point.

Is there any workaround, for the following:

I have two images(say for two themes), it needs to change dynamically according to the css chosen. If I have to add the image as background using CSS, I have a problem in that, I want to map it and give link using that.
Any workaround?

sarvel I merged your topic here since this is basically the same question

Is the CSS changed via javascript? Or are you referring to some browsers' abilities for using alternate stylesheets? I will assume the former, since so many people use IE.

If you are using Javascript, you can also have the theme-altering function change an IMG element's SRC attribute. I am confident that you can do the same with an image map, if you need to do so.

If not, you could do a very nasty solution that works by laying a transparent GIF or PNG in the cell itself, atop the changeable background image. However, some browser bugs with GIF/PNG transparency atop background images can prohibit this solution.

I am not using Javascript or browser settings either. I am using JSP to render the HTML, at the time of page generation itself it will be decided which CSS to be used.

As of now, i am using the image as backgroud, in each of the css, i have mentioned two different paths respective to the images. JSP will decide the CSS to use and in the CSS i will have the background image path. And as you have said, i am using a transparent gif for mapping.

And this is not a organised way to do this, I am looking for other methodolgies.

I am using FireFox as the browser.

I am waiting for sam’s replay.

Why are you all so keen to do it with the html?? The background image idea will work just fine as far as I can see, unless I am missing something.....

You can give the <a> tag the background image btw. Just because you want an image in a link doesn't mean you need an image tag

Your idea will suit if it is just to use image as a link. That is not the topic.

Do you mean that you want a complete image map, rather than just an image link?

Then use JSP to put img elements in the appropriate places.

you can create a span id/class with a background no-repeat image fixed width and then call it through the html page from the css. without borders it basically just looks like an image on the page, but you use it with the
make sense?

We a have controller which switches(changes CSS according to the theme selected). After a theme is selected the CSS file itself will be changed and the effects for that are,
Font , Size, Color, Background images, Alignment properties,... changes immediately. For one switch - one action. It does all the above changes.

We are not making any changes in the content but for the images that are added as content and mapped as link. As you have said, CSS is not for content...

And these images are scattered over, 2000 pages. If it is at an earlier stages, we can also change the image using JSP as we do for CSS. Your solution is technically feasible but not viable to implement.

When the images are mapped, are the destination links the same, regardless of the theme being used?

IE, the only difference is visual. If so then you can try to create an image map using normal text links and some clever CSS styling. This will leave you with the images and the mapping being done entirely in CSS. It strikes me as the only feasible way to go.

http://www.alistapart.com/articles/imagemap/
http://www.alistapart.com/articles/sprites/