I set the background image on a div and I set the javascript mouseover event to change the background image. When I mouseover, it changes to the other image but it appears to flicker the first time it is loaded and displayed in the browser. After that the image changes normally (without a flicker).
You need to preload the image in order to avoid the flicker. Using CSS one could do:
body::after {
content: url(preload-me-1.jpg) url(preload-me-2.jpg);
display: none;
}
But maybe you actually need image sprites to change background on mouse over, that way you need no preloading.
Related
I'm trying to add a transparent png image on top of the current image of my item.
I used onmouseover and onmouseout. they worked great, but the problem is I want the background not change, only a highlight(transparent) image draw on it when mouseover called.
In your CSS or maybe just the image,set the opacity as below when the mouse is hovered over it.I guess you have that working already as you said.
img { opacity: 0.3; }
I am using the following CSS code to display a "hot" (colored) icon when a user mouses over a "disabled" (grey) icon:
.pic a:link { background: url(http://www.mydomain.com/media/disabled/pic.png) top center no-repeat; }
.pic a:hover { background: url(http://www.mydomain.com/media/hot/pic.png) top center no-repeat; }
.pic a:active { background: url(http://www.mydomain.com/media/normal/pic.png) top center no-repeat; }
It works fine, but with one annoyance: The first time a user mouses over the "disabled" icon there is a slight delay before the "hot" icon appears. All subsequent mouse overs will show the "hot" icon without a delay. Is there a way I can prevent this delay from occurring on the first mouse over?
This is a common issue, there are three solutions:
Preload the file using JavaScript.
Preload the file using another visible element, but hidden with some tricks involving z-ordering.
Use CSS Sprites: http://css-tricks.com/css-sprites/
Use a technique to preload the background image. The delay you are seeing is caused by the browser not fetching the image until the user hovers over it.
Here's an article on a couple techniques for doing this
CSS Sprites is the correct way to solve this. It not only solves this but also speeds up the initial loading of your site by reducing the amount of images to download. Especially useful with mobile clients.
The website I'm working on has a list ul with above a 100 (li) bullet points. Each of them links to another html-site.
I would like to show an image preview, whenever you hover over one of the links. The image should slowly slide in from the left.
As each preview image is up to 40kb in size, I actually don't want to preload the images.
What would be the best way to prevent it?
I would like to do this only via CSS, without JS, if possible.
My ideas:
a) default-state: <img>-tag with display:none; hover-state: set it to display:inline . Problem: transition does not work with display :(.
b) simply use a div instead and write a CSS-rule for every li, so that on hover the corresponding background-image with the preview-image is assigned to it.
Does this prevent the preloading of the image?
If you add it as a background image, but only show it on hover the image won't load until the user hovers over whatever has the style. You should be able to set the background image inline instead of outputting the image file as an IMG
You can't do this with just CSS because your browser will load all contents (regardless of display:none). I would recomend javascript or server side like php.
Maby jquery load could be something?
http://api.jquery.com/load/
This is my issue.
I have a menu using an image sprite, the image has transparencies, but when I add a :hover, it works, but I am still able to see the original image at the end.
Is there a way to make the hover show the image that I want and REPLACE the original one?
Thanks,
Marco
You can replace an image by using it as a background-image instead of using the <img> tag.
But most of the times, this is slow and another way is maybe good practice:
Create an image that has the :hover image next to it [img|hoverImg]
Do a styling with background-position to change the background.
Like this:
.menuItem
{
background-image: url('hello.jpg');
width:100px;
height:30px;
}
.menuItem:hover
{
background-position: 100px; /* Or whatever measure your image is */
}
The problem with this, is that the image size is fixed. You really have to specify it, instead of just doing this with an image.
I like this as the best way. If you want to set the src in your <img>, this can be done with Javascript, but is much heavier most of the time, because you have to load an extra image from the server.
Can we use more than 2 images for single navigation. That means when we hover on that image it will shows 6 different images. Is it possible to make for a single navigation image? If possible means how?
I think you are all understand this
alt text http://img714.imageshack.us/img714/2786/mubeen.gif
If I understood you correctly, you want to continously change the position of your background image while you hover over one button.
If that's right, then I suggest making a static image as background image and changing the image to a GIF animated image on hover
You can (at the moment - cross browser) only set one bg image on an element. If you want to change it on hover or whatever, just add an a-tag with href set on #:
<a class="img" id="thatoneimg" href="#"></a>
And then in the css:
a.img {
width: 100px;
height: 100px;
}
a#thatoneimg {
backround-image: url(staticimg.jpg);
}
a#thatoneimg:hover {
backround-image: url(movingimg.gif);
}
That should work cross browser. You need the a-tag for it to work in IE.
Edit:
As Starx said, just make the second image a .gif with an animation. It will not use sprites but it will work.
If I get your question right, it's possible, but you will have to have 6 different HTML elements to contain the background image at 6 different positions.