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

  • joseph
  • Newbie
  • Newbie
  • User avatar
  • Posts: 12
  • Loc: Tamil Nadu

Post 3+ Months Ago

How to add image as content thro' CSS? not as background.
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • Mas Sehguh
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 1853

Post 3+ Months Ago

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.
  • sarvel
  • Student
  • Student
  • User avatar
  • Posts: 79
  • Loc: Dubai

Post 3+ Months Ago

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
Code: [ Select ]
<!-- css class-->
.lgnedulogo
{
height:80px;
width:247px;
background-image: url('../images/login/logo.jpg');
}

<table>
<tr>
<td class=” lgnedulogo”>&nbsp</td>
</tr>
</table>
  1. <!-- css class-->
  2. .lgnedulogo
  3. {
  4. height:80px;
  5. width:247px;
  6. background-image: url('../images/login/logo.jpg');
  7. }
  8. <table>
  9. <tr>
  10. <td class=” lgnedulogo”>&nbsp</td>
  11. </tr>
  12. </table>
  • joseph
  • Newbie
  • Newbie
  • User avatar
  • Posts: 12
  • Loc: Tamil Nadu

Post 3+ Months Ago

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?
  • joebert
  • Fart Bubbles
  • Genius
  • User avatar
  • Posts: 13503
  • Loc: Florida

Post 3+ Months Ago

sarvel I merged your topic here since this is basically the same question :)
  • Mas Sehguh
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 1853

Post 3+ Months Ago

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.
  • joseph
  • Newbie
  • Newbie
  • User avatar
  • Posts: 12
  • Loc: Tamil Nadu

Post 3+ Months Ago

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.
  • sarvel
  • Student
  • Student
  • User avatar
  • Posts: 79
  • Loc: Dubai

Post 3+ Months Ago

I am waiting for sam’s replay. :!:
  • rtm223
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 1855
  • Loc: Uk

Post 3+ Months Ago

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 ;)
  • joseph
  • Newbie
  • Newbie
  • User avatar
  • Posts: 12
  • Loc: Tamil Nadu

Post 3+ Months Ago

Your idea will suit if it is just to use image as a link. That is not the topic.
  • rtm223
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 1855
  • Loc: Uk

Post 3+ Months Ago

Do you mean that you want a complete image map, rather than just an image link?
  • Mas Sehguh
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 1853

Post 3+ Months Ago

joseph wrote:
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.


Then use JSP to put img elements in the appropriate places.
  • neksus
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 2194
  • Loc: Canada

Post 3+ Months Ago

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
Code: [ Select ]
<span id="blah"><img src="blank.gif" height="img height in span" width=" img width in span">

make sense?
  • joseph
  • Newbie
  • Newbie
  • User avatar
  • Posts: 12
  • Loc: Tamil Nadu

Post 3+ Months Ago

Sam Hughes wrote:
joseph wrote:
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.


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




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.
  • rtm223
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 1855
  • Loc: Uk

Post 3+ Months Ago

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/
  • joseph
  • Newbie
  • Newbie
  • User avatar
  • Posts: 12
  • Loc: Tamil Nadu

Post 3+ Months Ago

Hi guys, thanks for your valuable inputs.
As of now, I have decided to use the background gif with CSS and use the transparen gif to map.
Thanks and Bye.
  • neksus
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 2194
  • Loc: Canada

Post 3+ Months Ago

woo hoo :D glad i helped somebody else use some of my weird ways

Post Information

  • Total Posts in this topic: 17 posts
  • Users browsing this forum: No registered users and 94 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
cron
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.