CODEWITHSUNDEEP
htmlcss
Drixson Oseña
Drixson Oseña

Reputation: 3641

Use CSS to put img attributes

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?

Upvotes: 3

Views: 23653

Answers (8)

ericjbasti
ericjbasti

Reputation: 2075

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.

Upvotes: 0

matpol
matpol

Reputation: 3074

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/

Upvotes: 3

keaukraine
keaukraine

Reputation: 5364

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>.

Upvotes: 2

Sachin
Sachin

Reputation: 40970

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
}

Upvotes: 7

Dashrath
Dashrath

Reputation: 2189

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

Upvotes: 0

Albzi
Albzi

Reputation: 15609

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");

Upvotes: 0

Kees Sonnema
Kees Sonnema

Reputation: 5784

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.

Upvotes: 0

SoWhat
SoWhat

Reputation: 5622

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);

}

Upvotes: 1

Related Questions