I have a button in my html form and need to change it's background image when it is clicked using css. it works perfect in FF but it seems that IE doesnt support :active state.
Here is my code:
HTML:
<button class='button'>Click Me</button>
CSS:
.button {
width: 118px;
height: 33px;
background: url(/images/admin/btn.png) no-repeat center top;
border: none;
outline: none;
}
.button:active {
background-position: center bottom;
}
This is a known bug in earlier versions of IE (I think they solved it in IE8). I usually solve this (as well as the corresponding "hover" problem) with javascript. I attach two event handlers to the element -- "mousedown" to set an additional class (something like "button-active") and "mouseup" to remove the class. In jQuery it would be something like this:
$('.button').mousedown(function() { $(this).addClass('button-active'); });
$('.button').mouseup(function() { $(this).removeClass('button-active'); });
Then, just add that class to the css rule, like so:
.button:active, .button-active {
background-position: center bottom;
}
A little ugly, yes, but what do you expect -- it's Internet Explorer. It can't be pretty.
Related
I have an anchor that changes its background image when hovered with a class class-btn that contains a background-image.
When hovered, it has
a.class-btn:hover
{
background-image('path/to/image-hovered.jpg');
}
When the page loads the first time and you hover this button the first time, it blinks (it takes about half a second to download the hovered image). How to avoid that blinking without JavaScript (only simple css and html is allowed)?
I tried to search Stack Overflow for the similar question, but with no luck.
Just added:
Should I "preload" the hovered image? How?
Should I play with z-index or opacity?
It happens with all browsers and thus the solution should work for all browsers.
Here is a simple and effective css image preloading technique I have used several times.
You can load several images by placing content: url() url() url()... etc.
body:after {
display: none;
content: url('path/to/image-hovered.jpg') url('path/to/another-image-hovered.jpg');
}
The easiest way to avoid this is to make use of image sprites. For a good overview, check out this CSS Tricks article.
That way, you not only solve the flicker problem you're seeing, but will also reduce the number of HTTP requests. Your CSS will look something like:
a.class-btn { background: url('path/to/image.jpg') 0 0 no-repeat; }
a.class-btn:hover { background-position: 0 -40px; }
The specifics will depend on your images. You can also make use of an online sprite generator to make the process easier.
A simple trick I use is to double up the original background image making sure to put the hovered image first
.next {
background: url(../images/next-hover.png) center center no-repeat;
background: url(../images/next.png) center center no-repeat;
&:hover{
background: url(../images/next-hover.png) center center no-repeat;
}
}
No performance hit and very simple
Or if you're not using SCSS yet:
.next {
background: url(../images/next-hover.png) center center no-repeat;
background: url(../images/next.png) center center no-repeat;
}
.next:hover{
background: url(../images/next-hover.png) center center no-repeat;
}
If you do this:
#the-button {
background-image: url('images/img.gif');
}
#the-button:before {
content: url('images/animated-img.gif');
width:0;
height:0;
visibility:hidden;
}
#the-button:hover {
background-image: url('images/animated-img.gif');
}
This will really help!
See here:
http://particle-in-a-box.com/blog-post/pre-load-hover-images-css-only
P.S - not my work but a solution I found :)
#Kristian's method of applying hidden 'content: url()' after the body didn't seem to work in Firefox 48.0 (OS X).
However, changing "display: none;" to something like:
body:after {
position: absolute; overflow: hidden; left: -50000px;
content: url(/path/to/picture-1.jpg) url(/path/to/picture-2.jpg);
}
... did the trick for me. Perhaps Firefox won't load hidden images, or maybe it's related to rendering(?).
You can preload images
function preloadImages(srcs, imgs, callback) {
var img;
var remaining = srcs.length;
for (var i = 0; i < srcs.length; i++) {
img = new Image();
img.onload = function() {
--remaining;
if (remaining <= 0) {
callback();
}
};
img.src = srcs[i];
imgs.push(img);
}
}
// then to call it, you would use this
var imageSrcs = ["src1", "src2", "src3", "src4"];
var images = [];
preloadImages(imageSrcs, images, myFunction);
This is a non-CSS solution: if the hover images are in one directory and have a common naming convention, for example contain a substring '-on.', it is possible to select the file names and put it into the HTML as a series of:
<img src='...' style='display: none' />
If they are the same dimensions, one possibility is to draw the two images directly on top of each other, with the CSS :hover class for the top image having display: none;
This way both images will be preloaded, but hovering will make the second visible.
The "double up the original background image" trick didn't work for me so I used another css trick:
.next {
background: url(../images/next.png) center center no-repeat;
}
.next:hover {
background: url(../images/next-hover.png) center center no-repeat;
}
.next:after {
content: url(../images/next-hover.png);
display: none;
}
This technique works nicely for me and ensures not only is the hover image pre-loaded, but it's also ready and waiting to be displayed. (Most other solutions rely on switching the background image on hover, which just seems to take the browser a bit of time to figure out, however much the image is pre-loaded.)
Create :before and :after pseudo elements on the container with the two images, but hide the one you want to see on hover. Then, on hover, switch the visibility.
So long as they both share the same size and positioning rules, you should see a neat swap.
.image-container {
&:before { display: block; background-image: url(uncovered.png); }
&:after { display: none; background-image: url(uncovered.png); }
}
.image-container:hover {
&:before { display: none; }
&:after { display: block; }
}
I had the same issue.
After trying everything related with css i can not solve the problem.
What finally solved the problem was simulating that someone hovers the element.
The css is the normal one.
CSS
#elemName{
/* ... */
}
#elemName:hover{
/* change bg image */
}
JS
var element = document.getElementById('elemName');
var event = new MouseEvent('mouseover', {
'view': window,
'bubbles': true,
'cancelable': true
});
element.dispatchEvent(event);
Just change the size of the background image, instead of the source of it! So...
a.class-btn {
background-image: url('path/to/image-hovered.jpg');
background-size: 0;
}
a.class-btn:hover {
background-size: auto;
}
The best way to do this is to just insert the images onto the webpage and set display to none.
I have a animated gif as a background image which is activated when you hover a link.
But once activated it just keeps on playing even though you're not hovering the link and even though it isn't visible.
Are there any ways to restart the gif every time you hover over the link, using css only?
Here is my code so far
<div id="zichtbaar">
Zichtbaar<span></span>
and the CSS
#zichtbaar a span {
display: none;
background-image: url("background.gif");
background-size: contain;
background-position: fixed;
background-repeat: no-repeat;
position: fixed;
width: 100%;
height: 100%;
left: 25%;
top: 35px;
z-index:-9999;
#zichtbaar a:hover span {
display:block;
}
I'd create a second image, a still in .png format, and would change the source of the image on :hover so that when the user hovers the image, the source is the animated gif, and when he mouses out, the source is replaced with the still image and that would visually reset the image. Something like this:
#zichtbaar a span {
background-image: url("StillImageOfTheGif.png");
}
#zichtbaar a span :hover {
background-image: url("background.gif");
}
In addition, I'd add an <img> element of the still .png image with a hidden attribute so that the image loads when the page loads and thus avoid a delay when the user triggers the hover.
Edit based on comments and javascript version.
<a id="zichtbaar">Zichtbaar</a>
<img id="DasBild" src="https://jepen84.github.io/github.io/images/static_ice.gif" />
function Start() {
$('#zichtbaar').on({
mouseenter: function () { $('#DasBild').prop('src', 'https://jepen84.github.io/github.io/images/ice_t.gif') },
mouseleave: function () { $('#DasBild').prop('src', 'https://jepen84.github.io/github.io/images/static_ice.gif') }
});
}
$(Start);
You need to use hover
#zichtbaar a span :hover {
background-image: url("background.gif");
<img src="URL_OF_FIRST_IMAGE_SOURCE"
onmouseover="this.src='URL_OF_SECOND_IMAGE_SOURCE'"
onmouseout="this.src='URL_OF_FIRST_IMAGE_SOURCE_AGAIN'" />
I also had the same issues and this solution solved my problem perfectly it also help me tidy my CSS stylesheet cause it also replaces the use of stating a hover effect
Check it out here on fiddle: a link!
I want to remove the selection-highlight on all images on my page.
I found some useful additions like :
CSS
img {
-webkit-user-select:none;
-khtml-user-select:none;
-moz-user-select:none;
-o-user-select:none;
user-select:none;
pointer-events:none
}
But when I press down my mouse button and select multiple things or press Ctrl+A for "select all" my images get highlighted with a blue shade.
I tried to change it via :
CSS
img::selection {background:transparent;color:inherit;}
img::-moz-selection {background:transparent;color:inherit;}
But that don't have any effect.
Does someone have a useful solution or is there none yet ?
P.S. : I don't care about selecting my images - I just want to get rid of that blue shape.
Here goes a wacky solution I came up with...
1) After some testing I found that this only occurs on mozilla. Other browsers don't show the blue selection on images when the code
img::selection {
background: transparent;
}
is set.
2) Even mozilla - only has a problem with image elements. But other elements with a background-image obey the ::selection rule.
So technically we could work around this assuming we add an empty span in our markup after each img element which we set to display:none;
Then we can add some CSS which will only run in firefox which sets the images to display:none and places a background-image on the adjacent span.
Like this:
FIDDLE
**
img::selection {
background: transparent;
}
img + span {
display: none;
}
#-moz-document url-prefix() {
img {
display: none;
}
img + span {
background: url(http://placehold.it/200x200) no-repeat;
width: 200px;
height: 200px;
display: block;
}
}
<div>Hello there </div>
<img src="http://placehold.it/200x200" /><span></span>
<div>Hello there </div>
1: http://jsfiddle.net/GMuzV/30/
This disabled highlighting on a DOM element:
function disableSelection(target){
if (typeof target.onselectstart!="undefined") // if IE
target.onselectstart=function(){return false}
else if (typeof target.style.MozUserSelect!="undefined") // if Firefox
target.style.MozUserSelect="none";
else // others
target.onmousedown=function(){return false;}
target.style.cursor = "default";
}
Use it like this:
disableSelection(document.getElementById("my_image"));
I would like to change the background image of a div by hover a button. This is my key:
.content-portfolio {
background-image: url(../files/portfolio/event.jpg) no-repeat;
}
#event-button a:hover{
}
I dont really know how to do it, I hope you help me!
Best regards!
It's pretty hard to do just with css. You probably could use some javascript to do that. But, I found a way to do what you want if your div was an immediate sibling of your button (with no other elements between the two).
The code would look like this:
HTML
<input type="button" id="btn" value="Click me !" />
<div id="testDiv">
<p>Some content</p>
</div>
CSS
#btn:hover + #testDiv {
background-color: red;
}
#testDiv {
border-style: solid;
width: 200px;
height: 200px;
}
The operator "+" or "~" will apply the css to the next sibling element.
Here's a JS Fiddle that show you the tricks.
If you just remove the "+" it will apply the css to descendant/child of the left element. For more information you can check out this page.
I think that you want to change .content-portfolio's background when you hover on event-button right? You get it right by giving the button an id and not a class, but you can't affect other elements with css selectors if they're not related in some way. Alternatively, it's easier to affect other elements if they have ids instead of classes, specially if they don't have any kind of hierarchy. You'll need to use a javascript solution for this (fiddle here):
HTML:
<a href="javascript:img()">
<div id="EventButton">Click me to change the bg</div>
</a>
<div id="ContentPortfolio">I'm the content</div>
CSS:
#ContentPortfolio {
width: 200px;
height: 100px;
background: red;
}
#EventButton {
width: 100px;
height: 50px;
border: 1px solid grey;
}
Javascript:
function img() {
if (ContentPortfolio.style.backgroundImage == 'url(http://goo.gl/PMqslv)') {
ContentPortfolio.style.backgroundImage = 'url(http://goo.gl/AJm0rS)';
} else {
ContentPortfolio.style.backgroundImage = 'url(http://goo.gl/PMqslv)';
}
return false;
}
In this approach I changed your id names so I can refer to them directly, instead of using the document.getElementById, but if your name contains dashes - or if this doesn't work on your browser, you should use the before mentioned function.
try this
.content-portfolio{width:400px; height:400px; background:url(http://somdow.com/images/sitePortThumbs/saia-sushi-ft-lauderdale-sushi-bar.jpg);}
.content-portfolio:hover{width:400px; height:400px; background:url(http://somdow.com/images/sitePortThumbs/2882films-video-production.png);}
PS: here is the fiddle[ http://jsfiddle.net/somdow/d2Yf9/ ]
,the images are from my own website, obviously just change the url to your own.
Edit: Essentially, from the code i added, you dont need any of it, all you need to do is the same thing you did, just change the url on the hover and you are set to go.
Perhaps you want to change background image of .content-portfolio this is the way to do it:
.content-portfolio:hover {
background-image: url(../files/portfolio/event.jpg) no-repeat;
}
see this: http://jsfiddle.net/y8tRd/
You need jQuery.
Create two classes and add two jquery methods to your button. One css class with the hover image and another class without.
jQuery
$(document).ready(function() {
$("#your-button").on("mouseover", function(){
$("#content-portfolio").toggleClass("back2");
}).on("mouseout", function(){
$("#content-portfolio").toggleClass("back2");
});
});
CSS
.back1 {
background-image: url(../files/portfolio/event.jpg) no-repeat;
}
.back2 {
background-image: url(../files/portfolio/event2.jpg) no-repeat;
}
You can do something like this (You will need jquery):
html
<body>
<button id="button" >Change Background</button>
<div class="content-portfolio">your content</div>
</body>
css
.content-portfolio{
background-image: url('path/to/your/image.jpg') no-repeat;
}
js
$(document).on('mouseenter','#button',function(){
$('.content-portfolio').css('background','path/to/your/image.jpg');
});
$(document).on('mouseout','#button',function(){
$('.content-portfolio').css('background','path/to/your/otherimage.jpg');
});
Also you can create two classes with different backgrounds, and you can add or remove class through jquery
I have an anchor that changes its background image when hovered with a class class-btn that contains a background-image.
When hovered, it has
a.class-btn:hover
{
background-image('path/to/image-hovered.jpg');
}
When the page loads the first time and you hover this button the first time, it blinks (it takes about half a second to download the hovered image). How to avoid that blinking without JavaScript (only simple css and html is allowed)?
I tried to search Stack Overflow for the similar question, but with no luck.
Just added:
Should I "preload" the hovered image? How?
Should I play with z-index or opacity?
It happens with all browsers and thus the solution should work for all browsers.
Here is a simple and effective css image preloading technique I have used several times.
You can load several images by placing content: url() url() url()... etc.
body:after {
display: none;
content: url('path/to/image-hovered.jpg') url('path/to/another-image-hovered.jpg');
}
The easiest way to avoid this is to make use of image sprites. For a good overview, check out this CSS Tricks article.
That way, you not only solve the flicker problem you're seeing, but will also reduce the number of HTTP requests. Your CSS will look something like:
a.class-btn { background: url('path/to/image.jpg') 0 0 no-repeat; }
a.class-btn:hover { background-position: 0 -40px; }
The specifics will depend on your images. You can also make use of an online sprite generator to make the process easier.
A simple trick I use is to double up the original background image making sure to put the hovered image first
.next {
background: url(../images/next-hover.png) center center no-repeat;
background: url(../images/next.png) center center no-repeat;
&:hover{
background: url(../images/next-hover.png) center center no-repeat;
}
}
No performance hit and very simple
Or if you're not using SCSS yet:
.next {
background: url(../images/next-hover.png) center center no-repeat;
background: url(../images/next.png) center center no-repeat;
}
.next:hover{
background: url(../images/next-hover.png) center center no-repeat;
}
If you do this:
#the-button {
background-image: url('images/img.gif');
}
#the-button:before {
content: url('images/animated-img.gif');
width:0;
height:0;
visibility:hidden;
}
#the-button:hover {
background-image: url('images/animated-img.gif');
}
This will really help!
See here:
http://particle-in-a-box.com/blog-post/pre-load-hover-images-css-only
P.S - not my work but a solution I found :)
#Kristian's method of applying hidden 'content: url()' after the body didn't seem to work in Firefox 48.0 (OS X).
However, changing "display: none;" to something like:
body:after {
position: absolute; overflow: hidden; left: -50000px;
content: url(/path/to/picture-1.jpg) url(/path/to/picture-2.jpg);
}
... did the trick for me. Perhaps Firefox won't load hidden images, or maybe it's related to rendering(?).
You can preload images
function preloadImages(srcs, imgs, callback) {
var img;
var remaining = srcs.length;
for (var i = 0; i < srcs.length; i++) {
img = new Image();
img.onload = function() {
--remaining;
if (remaining <= 0) {
callback();
}
};
img.src = srcs[i];
imgs.push(img);
}
}
// then to call it, you would use this
var imageSrcs = ["src1", "src2", "src3", "src4"];
var images = [];
preloadImages(imageSrcs, images, myFunction);
This is a non-CSS solution: if the hover images are in one directory and have a common naming convention, for example contain a substring '-on.', it is possible to select the file names and put it into the HTML as a series of:
<img src='...' style='display: none' />
If they are the same dimensions, one possibility is to draw the two images directly on top of each other, with the CSS :hover class for the top image having display: none;
This way both images will be preloaded, but hovering will make the second visible.
The "double up the original background image" trick didn't work for me so I used another css trick:
.next {
background: url(../images/next.png) center center no-repeat;
}
.next:hover {
background: url(../images/next-hover.png) center center no-repeat;
}
.next:after {
content: url(../images/next-hover.png);
display: none;
}
This technique works nicely for me and ensures not only is the hover image pre-loaded, but it's also ready and waiting to be displayed. (Most other solutions rely on switching the background image on hover, which just seems to take the browser a bit of time to figure out, however much the image is pre-loaded.)
Create :before and :after pseudo elements on the container with the two images, but hide the one you want to see on hover. Then, on hover, switch the visibility.
So long as they both share the same size and positioning rules, you should see a neat swap.
.image-container {
&:before { display: block; background-image: url(uncovered.png); }
&:after { display: none; background-image: url(uncovered.png); }
}
.image-container:hover {
&:before { display: none; }
&:after { display: block; }
}
I had the same issue.
After trying everything related with css i can not solve the problem.
What finally solved the problem was simulating that someone hovers the element.
The css is the normal one.
CSS
#elemName{
/* ... */
}
#elemName:hover{
/* change bg image */
}
JS
var element = document.getElementById('elemName');
var event = new MouseEvent('mouseover', {
'view': window,
'bubbles': true,
'cancelable': true
});
element.dispatchEvent(event);
Just change the size of the background image, instead of the source of it! So...
a.class-btn {
background-image: url('path/to/image-hovered.jpg');
background-size: 0;
}
a.class-btn:hover {
background-size: auto;
}
The best way to do this is to just insert the images onto the webpage and set display to none.