Is it possible to change img src attribute using css? - css

I'm trying to change img src (not the background img src) with css
<img id="btnUp" src="img/btnUp.png" alt="btnUp"/>
#btnUp{
cursor:pointer;
}
#btnUp:hover{
src:img/btnUpHover; /* is this possible ? It would be so elegant way.*/
}

You can use :
content: url("/_layouts/images/GEARS_AN.GIF")

There is another way to fix this : using CSS box-sizing.
HTML :
<img class="banner" src="http://domaine.com/banner.png">
CSS :
.banner {
display: block;
-moz-box-sizing: border-box;
box-sizing: border-box;
background: url(http://domain2.com/newbanner.png) no-repeat;
width: 180px; /* Width of new image */
height: 236px; /* Height of new image */
padding-left: 180px; /* Equal to width of new image */
}
http://css-tricks.com/replace-the-image-in-an-img-with-css/

you could try something like this
<img id="btnUp" src="empty.png" alt="btnUp" />
or
<div id="btnUp" title="btnUp"> <div/>
#btnUp{
cursor:pointer;
width:50px;
height:50px;
float:left;
}
#btnUp{
background-image:url('x.png')
}
#btnUp:hover{
background-image:url('y.png')
}

You can use CSS to a) make the original image invisible by setting its width and height to 0, or moving it off-screen etc, and b) insert a new image in its ::before or ::after pseudo-element.
That will be a performance hit though, as the browser will then load both the original and the new image. But it won't require Javascript!

You can't set the image src attribute via CSS. you can get is, as if you wanted to set use background or background-image.

No - CSS can only be used to change CSS background images, not HTML content.
In general UI elements (not content) should be rendered using CSS backgrounds anyway. Swapping classes can swap background images.

You can use a mixture of JavaScript and CSS to achieve this, but you can not do this with CSS alone. <img id="btnUp" src="empty.png" alt="btnUp" onmouseover="change(img)" onmouseout="changeback(img)" />
Instead of img you would put file name sans file type.
function change(img){
document.getElementById("btnUp").src= img + ".png";
}
function changeback(img){
document.getElementById("btnUp").src= img + ".png";
}
Then you use CSS to modify the img tag or the id to your liking.

You could set the image to a completely transparent image, then change the background image like so:
img {
background-image: url("img1.png");
}
//For example, if you hover over it.
img:hover {
background-image: url("img2.png");
}
The images do have to be the same size though. :(
Hope this helps!

content:url('imagelinkhere');
This is working, I tested it

Related

Overwriting CSS Bootstrap

I need to surcharge Bootstrap CSS and for that i have created a new overwrite.css file.
In my different test I need to display a black background (It's only for test) but nothing.
<div id="myBackground"> </div>
CSS:
#myBackground { background-color: black; width: 100px; height: 100px; }
so i don't know where exactly you need change the bg color use these after bootstrap or in <style></style> inside <head></head>
if you want change the page background
body {
background-color: black !important;
}
if as container or column
col-md-5 {
background-color: black;
width: 100px;
height: 100px;
}
Make sure you are selecting your element with more specificity than the bootstrap css.
Load your overwrite.css file after bootstrap.
Try selecting a parent element before your #myBackground div. For example,
.main-content #myBackground {}
Find the attributes bootstrap is using that you want to override... for example if in bootstrap.css there is .navbar-nav {background:#000;} then you need to make sure your overwrite has a background attribute declared, such as #myNavbar {background:#555;}
overwrite.css : "It means what it means"! You can't create your own id or class if bootstrap doesn't know what is this...
So, you must create a third css file (style.css for example) and load this after bootstrap.css and overwrite.css !
After this, all is working!
Thanks

Is there possible that remove !important property from element on specific resolution?

I'm using carousel slider more than two times and its .item height is 100%. I had to adjust the main slider on specific height, so i added a class .custom-slider in header tag put the style with !important tag, because there was already 100% height .
.custom-slider {
height: 645px !important;
}
Its adjusted and working fine. Now I have to adjust the on different resolution, so i have to reduce the height 645px to 496px, but due to !important property new added height does not working.
I'm trying following style on 1024 reslution, but its not working.
.custom-slider {
height: 496px !important;
}
This accepted answer is well explained, but i didn't resolve my issue, can any guide me regarding this. I would like to appreciate.
Change the style to max-height and remove the important!
.custom-slider {
max-height: 645px;
}
You could also make the selector more specific by adding the tag or a parents id/class. This would give the style a higher priority.
body div.custom-slider {
max-height: 645px;
}
If your trying to do this within the same resolution ( without using media queries ) you should be able to add a second class and give that a defined height as well - it should overwrite the first one. For example:
<div class="custom-slider secondary-height"></div>
.custom-slider.secondary-height {
height: 496px !important;
}
please check this: http://codepen.io/anon/pen/LGmrwZ
when you define a media query, it will catach the relevant one.
if you go from bottom up, only the relevant !important will catch.
and since they have same "cascading juice" the winner will be:
the one that have the appropriate media trageting and the one that comes last, so combining them will solve the issue.
scss example
.custom-slider{
width:100px;
border:1px solid red;
#media (min-width:700px) {
height: 20px !important;
border:1px solid green;
}
#media (min-width:900px) {
height: 80px !important;
border:1px solid blue;
}
}
by the way, if your css is loaded after the slider's css, you do not need !important.
same goes if you add a parent container to your css.

css hover not executing

I want an image to slightly grow in size when hovering over it. I know it's pretty simple, but I have looked for a good hour over other examples and cannot seem to figure out what I am missing. I appreciate the help. These images are saved to my computer.
Scope
<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
<embed src="73797^alarmclock.mp3"; autostart="true"; loop="true"; hidden="true";/>
<body>
<img src ="alarm clock2.jpg"/>
<p> Pulling the sheets into my body, I begin to sink back into the bed...
uggh... my alarm clock... time to get up..
<img style = "position:absolute; top:300px; right: 0px; z-index:1"
src="computer.jpg"/>
<IMG ID="grow" STYLE= "position:absolute; TOP:1157px; LEFT:599px;
WIDTH:47px; z-index:2; HEIGHT:47px" SRC="icon2.gif"/>
</body>
</html>
And here is the stylesheet.css
#grow:hover {
width: 100px;
height: 150px;
}
Inline styles have priority over CSS i believe.
Change your CSS and HTML to the following:
#grow {
position:absolute;
top:1157px;
left:599px;
width:47px;
z-index:2;
height:47px
}
#grow:hover {
width: 100px;
height: 150px;
}
HTML:
<IMG ID="grow" SRC="icon2.gif"/>
The inline style which declared in the HTML element has a higher priority than other css rules. So consider make your rules !important or move the inline style out.
Anyway, the !important rules are not recommended to use regularly. So you have better remove your inline styles and put them in .css files (or at least <style> element inside <head>)
Try this style
#grow:hover {
width: 100px !important;
height: 150px !important;
}
Because you have written inline styles. In order to override it you need to add !important to the styles. Also try to write the html in lowercase and avoid unwanted spaces.
The best thing you can do is avoid inline style and write style as below:
#grow
{
position:absolute;
top:1157px;
left:599px;
width:47px;
z-index:2;
height:47px
}
#grow:hover
{
width: 100px;
height: 150px;
}

How can the width/height of an image be controlled via external stylesheet instead of using attributes?

<div id="leftContent">
<div style="text-align: center">
<img src="S.jpg">
</div>
</div>
Now i have a stylesheet 'main.css' linked with this page...
since i haven't set the width/height of img in the code itself
I wanna set that via styling in main.css.
How can I do that..?
P.S.: I don't have access to HTML file of the page.. I only have the access to the style sheet.
use width and height in css
#leftContent img {
width: ... ;
height: ... ;
}
you may also create a specific css rule for each different image (no matter about parent container) if you are using them several times across the site with different templates, e.g.
img[src="S.jpg"] {
width: ... ;
height: ... ;
}
Add this in your external stylesheet.
#leftContent div img{your attributes}
try this:
if you want to select a specific img
#leftContent div img:nth-child(2 or 3 or 4 or) { //here number of the img.. 2 for the 2.
width: yourValue;
height: yourValue;
}
and else
#leftContent div img {
width: yourValue;
height: yourValue;
}
try this
http://jsfiddle.net/UbN7M/2/
CSS
#leftContent > div > img{
border:1px solid blue;
width:200px;
height:200px;
}

image with hover? (mouse over)

to change to
when mouse over.. like you can do with a:hover, how can i do this?
I tried
addFriend img:hover{
background: url(images/addFriend_hover.png);
}
Ditch the img tag, and do it without javascript
(off the top of my head, untested)
HTML
<div class="addFriend">Add Friend</div>
CSS
.addFriend { background: url(images/addFriend.png); }
.addFriend:hover { background: url(images/addFriend_hover.png); }
For it to work in all browsers with the least amount of code you can do it with CSS.
Add A Friend
.icon {
display: block;
width: (width of image);
height: (height of image);
text-indent: -9999px; /* hides the text 'Add A Friend' */
background: url(url of image) no-repeat center center;
padding-right: 55px;
}
.icon:hover {
background: url(url of new image) no-repeat center center;
}
You could also use jQuery.
$('img.addFriend').hover(function() {
$(this).attr('src','images/addFriend_hover.png');
}, function() {
$(this).attr('src','images/addFriend.png');
});
Edit
You could also do non-jQuery, I assume you don't want a background-image or an href
<img src='images/addFriend.png' onmouseover='this.src="images/addFriend_hover.png"' onmouseout='this.src="images/addFriend.png"' />
You have to use a container with a background image, e.g. a div with a specified height and width. Then you can use the background image and a :hover-pseudo-class.
This tutorial might be useful: http://www.w3schools.com/js/js_animation.asp
To see if it does what you want, scroll down to "The Entire Code" and click "Try it yourself".

Resources