I'd like to load images and their contents dynamically from a css file. I know I can set the background-image attribute for divs, but how can I achieve something similar for images?
You can't.
The <img> element holds content. The specifics of that content aren't something that can, or should, be described on the presentation layer.
You can set the src of the img to a transparent gif and set the background image of the img just like you would a div but that's a bit of a hack. You can change the src attribute of an image very easily using javascript:
html:
<img id="asdf" src="1.gif" />
javascript:
document.getElementById("asdf").setAttribute("src","2.gif");
Related
I have some images with svg extension. I need to get those images in grayscale mode. Is it possible to do it only using css or whatever I can do with files or the <svg> tag itself? I don't want to use online tools for this convert, I need the pure styling "tools", like html css js. I have read that adding classes to <img> tag might be helpful. By the way, I need it in its original quality, so just making it gray-colored is the only objective.
Try this
<img src="img.svg" style="filter: grayscale(1);"/>
I have to make an html page without using css...
the problem is that, that i want to use div tag and add an image as my background and write some content over the image, so please suggest me ways to do it.
Thanks in advance!
Some examples, with this you don't need to include/insert all css file
<body style="background-image:url('http://example.com/background.png')">
or
<div style="background-image:url('bakground.png')">
Without css you can't set background
I'm making a carousel and I wanna set a background image for every carousel item and I want the background image to be the same image that's inside the item, so the image has a src attribute and I want to get it into the CSS automatically to set it as a background
Sorry for my bad English
It can be done with Javascript
Suppose, you have an <img> like
<img id="my_img" src="my_img_src"/>
Then, you can get the src of the <img> as follows
var myimgsrc = document.getElementById("my_img").src;
Now, the variable myimgsrc holds the src of your <img>.
Again using Javascript you can use the variable to set the CSS like,
document.getElementById("my_img").style.backgroundImage = "url('"+myimgsrc+"')";
Try this..
I have constructed a lightbox for my website. For the purposes of this question, it consists of an img element, that is hidden by default using CSS.
When a thumbnail image on my site is clicked, the src of the img element is overridden using javascript with the appropriate path, and the img is then made visible.
My question is what do I set the img src to when the page is first loaded?
If I leave the src blank, i get a browser warning.
I would prefer not to load an actual image, as this uses bandwidth.
I would prefer not to load a small transparent image of 1px, as this feels like a dirty hack.
Do I have any other options?
Create the img element with JavaScript.
If some markup (beyond the occasional placeholder div or span) adds nothing for the user before some JS runs, then don't put it in the markup in the first place. Add it with DOM manipulation when it is needed.
I have had very similar problem.
My solution is: make <!-- comment wrapper --> around your <img> tag and after your JS code adds the src parameter, remove the comment.
<!-- <img src="unknown"> -->
This solution is clean and fast (comment is not parsed and analyzed by browser).
I have a large div with the site header/logo as the background image. Is there anything wrong with putting a h2 tag containing the site title behind this using z-index, so that it would show if the user couldn't/didn't get the image for some reason? I know this is different to a standard [background on the h2 element] image replacement. (EDIT: Sorry maybe i'm not making it clear - i'm using a div background image not an IMG tag)
You should use the alt attribute of the img tag, so if the image isn't loaded for some reason, the text would appear.
This is exactly why the alt attr exists,.
If possible, I would ditch the div and just use an h2 with an id and set a background image to that.
I do that whenever possible to avoid excessive divs when I could use other block-level elements, if it only has a background and text. An h* with a background image is still a heading.
You can simple place img tag with alt attribute. That way if image is not loaded, text will be displayed.
<img src="" alt="This text will be displayed" />
Google doesn't like what you describe:
http://www.google.com/support/webmasters/bin/answer.py?answer=66353
However, from a pure design perspective, there is no real problem, save some bloated code.
You might want to see how often your images fail before you attempt any changes.
That's fine. Note that many feel the site logo isn't really something you'd put into an h* tag other than on the home page, when it makes sense to put it in an h1 tag.