Use CSS to put img attributes - html

Question

Can I use CSS programmatic to put the attributes of my img tag?
<span><img class="img-dollar"></img></span>
<span><img class="img-royalty"></img></span>
I want to put src to get the image and put height and width to scale it down. How can I achieve?

Answer 1

The answer is No. You can't manipulate the html tags with the help of css. Use javascript for that.
CSS is only used for manipulate the style attributes.
To change the height and width property using css you can do something like this
.img-dollar
{
height:100px;
width: 100px
}

Answer 2

You can set the size of an image using css e.g.
img{
width: 200px;
height: 200px;
}
If you have div wrapper you can make the image take up the size of that div e.g.
.wrapper{
width: 200px;
height: 200px;
}
.wrapper img{
width: 100%;
height: auto;
}
You can fake the src using an image as a background e.g.
.img{
width: 200px;
height: 200px;
background: /images/image.gif
background-size: 200px 200px /* CSS3 */
}
You can find out more about background image size here http://www.css3.info/preview/background-size/

Answer 3

You can't alter attributes in CSS, only create rules based on attributes.
In your case, you can use CSS content property to set URL to image or inline Base64-encoded images as content of certain elements.
More information here: https://developer.mozilla.org/en-US/docs/Web/CSS/content and here: http://www.w3schools.com/cssref/pr_gen_content.asp
For example:
HTML:
<span class="img-dollar"></span>
<span class="img-royalty"></span>
CSS:
span.img-dollar:before {
content: url(images/dollar.png);
}
span.img-royalty:before {
content: url(images/royalty.png);
}
This will put image into your <span>.

Answer 4

You can't set the src but use the background to achieve a similar effect
img-dollar{
width:5px;
height:5px;
background:url(dollar.png);
}

Answer 5

Yes and No.
You can't add a src attribute using css. You could however use
Javascript for that.
a quick example:
$("img.imgNav").hover(function() {
var src = $(this).attr("src").match(/[^\.]+/) + "over.png";
$(this).attr("src", src);
},
function() {
var src = $(this).attr("src").replace("over", "");
$(this).attr("src", src);
});
You can style the background-color and width/height with css.
img
{
background-color: #222;
width: 200px;
height: 100px;
}
for example.

Answer 6

You could give it a set with or height then use background:url();
Or, using JQuery, you could use $('img-dollar').attr('src', 'image.jpg');
Or, using pure javascript, you could use:
document.getElementById('img-dollar').setAttribute("src", "image.png");

Answer 7

To change any attribute of html element you need to use javascript or jQuery .
you can change image source in jQuery as
$(document).ready(function(){
$('.img-dollar').attr('src','imgpath/imagename.png');
});
and similar code to change other attributes

Answer 8

Here im setting the content and size of an image through straight css:
http://jsfiddle.net/nQxje/
.img-dollar{
content: url('http://woodgears.ca/box_joint/tiny_box_scale.jpg');
height: 100px;
width: 100px;
}
hope this works for you.