If i set a GIF image as Hover effect on an anchor, it will still remain animating even if not showed (not set as a background) so this causes that the animation starts in the middle of itself for example but this kills the nice effects its used for..
any suggestions?
thanks in advance
You can't control animation of gif images in html.
but work around of this can be is you replace the gif image with the static image on mouseover or with other event using jquery or javascript. Only by CSS it is not possible.
Example:
$("#imageGif").hover(
function() {
$(this).attr("src", "/image.gif");
},
function() {
$(this).attr("src", "/image.png");
});
Related
I have an interactive background that uses css to change opacity on hover. On top of this (absolute positioned) is a text layer. In order to allow for the background to react even with the text on top I have added css pointer-event:none to the div containing text.
This works well, but it would be better if I could still keep the ability to highlight the text.
Does anyone know away to limit which pointer-events are suppressed?
Actually you can't do what you want. If you disable pointer-event, text can't be selected. But you can do this functional by some jquery magic.
first you put background hover effects into some class:
.hov{background: black !important;} //just example
then assign it to hover effect:
$('#wrap').hover(function() {
$('#wrap').toggleClass("hov");
});
and translate hover event from you block into you background:
$('#block').hover(function(e) {
$('#wrap').trigger(e.type);
});
So look into fiddle and you'll understand
EXAMPLE
I have tried many different codes but I cant seem to make any of them work or i'm uncertain where to place the code. (I am doing this through html on a tumblr theme)
I am trying to animate a header gif on hover. I have a static gif http://i.imgur.com/K3sHfIF.gif & an animated one http://i.imgur.com/fbiY7A0.gif.
Could someone please show me how to do this to fit into a tumblr.
You cannot animate a gif file on hover; or start a hover animation etc.
What you can do here is to add an image on the main page and change it when there is a hover event.
Here would be the example
<img src="/link_of/image.png" alt="photo" class="header" />
Then the jQuery code would take the action and handle a mouse hover event as
$('.header').hover(function () {
$(this).attr('src', '/link_of/animation.gif');
});
Now when you'll hover over the element. It would get the source attribute of its changed upon a hover event. Remember to always include the jquery source file in your project.
Try making a div (with the static gif inside) where you want the images to be on the site. Then, use an onmouseover call to set the innerHTML of the div to the animated gif and an onblur call to set it back to the static one.
HTML:
<div id="div_name" onmouseover="showAnimated();" onblur="showStatic();">
<img src="source of static gif">
</div>
JavaScript:
function showAnimated(){
document.getElementById('div_name').innerHTML = "<img src=\"source of animated gif\">";
}
function showStatic(){
document.getElementById('div_name').innerHTML = "<img src=\"source of static gif\">";
}
Hope that helps!
I want to change the position of the image that shows while hovering in another image.
How can I do this...
here is my code
http://jsfiddle.net/bulina/aGX5J/1/
<div id="img1">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT5ckS6M6g5q7FgL1dx0gxUFudPbBA46cHUN2JhGUajD_suIOah" onmouseover="this.src='http://motherhoodtalkradio.files.wordpress.com/2010/03/pink-daisy-motherhood-incorporated2.jpg'" onmouseout="this.src='https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT5ckS6M6g5q7FgL1dx0gxUFudPbBA46cHUN2JhGUajD_suIOah'"/>
</div>
and css:
#img1{
position:absolute;
left:20%;
bottom:50%;
}
Not sure,might be helpful to you.
If you were not animating the transitions — and given the kinds of images I've grouped as sprites, I don't know why you'd ever do that — then you'd want something like this:
$(document).ready(function(){
$('#home a')
// On mouse over, move the background on hover
.mouseover(function() {
$(this).css('backgroundPosition', '0 -54px');
})
// On mouse out, move the background back
.mouseout(function() {
$(this).css('backgroundPosition', '0 0');
})
});
Now, if you are trying to animate that, then you've got bad syntax for the CSS and for the calls to "animate".
$(document).ready(function(){
$('#home a')
// On mouse over, move the background on hover
.mouseover(function(){
$(this).stop().animate({backgroundPosition: "0 -54px"}, 500);
})
// On mouse out, move the background back
.mouseout(function(){
$(this).stop().animate({backgroundPosition: "0 0"}, 500);
})
});
Again, I am doubtful that jQuery is going to be able to animate "backgroundPosition" for you, but then I don't do "animate()" very often and jQuery always manages to surprise me.
here's a page: http://snook.ca/archives/javascript/jquery-bg-image-animations/
I think this is not possible with normal css.
Consider using either javascript or a CSS Framework like YAML check this page if you're interested http://www.yaml.de/
I have some tabs for my website where the background-image changes when you click on them.
However when I hover over the tabs the first time after the DOM has loaded, there's a slight delay before the hover-image show, resulting in a jarring effect.
I don't know how to troubleshoot this, any ideas? :)
Live example here: http://jsfiddle.net/timkl/fjupq/ - the delay is not as long on JSFiddle's server - but it's still there.
The solution to this is to use sprites instead of separate images.
http://css-tricks.com/css-sprites/
You use a single image, and instead of changing the background source on :hover, you simply change the background position. This way, the entire image is loaded in advance.
For example, check out Stack Overflow's sprite sheet:
http://cdn.sstatic.net/stackoverflow/img/sprites.png?v=4
You don't have to take it to this extreme, you can just have one image that has both the normal and :hover states, and move it to the left/right or up/down.
A simple solution is to use javascript to pre-load the image. Include this in the HEAD of the page:
<script type="text/javascript">
var img = new Image();
img.src = "http://dummyimage.com/200x10/000000/fff"; // background image
</script>
Another way to do this is to have that image somewhere else displayed, preferably at the end of the page, as a 1px to 1px image, and have it placed outside the page layout. This will preload the image.
I've created an example of the problem here:
http://jsfiddle.net/jXLSW/
Notice that when you hover over the image a div shows up at the top of the image. When you leave the image, it goes away. The problem is when you move your mouse over the div at the top. It goes into this show/hide cycle because the mouse is entering/leaving.
This div that shows up at the top is going to contain icons that act as a toolbar. How can I keep the toolbar visible when I hover over it? More importantly, how can I get the hover event to stop cycling?
UPDATE: The interesting thing is the following code works as desired. The problem is that there seem to be livequery issues in that often times, it doesn't actually kick in. Therefore, no div shows up, which is a major problem as well.
$('.has-menu').livequery(function() {
$(this).hover(function() {$(this).find('div.img-menu').slideToggle();}, function() {$(this).find('div.img-menu').slideToggle();});
});
Well, I changed the code to this:
$('.has-menu').live('hover', function(e) {
if (e.type == 'mouseover') {
$(this).find('div.img-menu').slideToggle();
}else{
$(this).find('div.img-menu').slideToggle();
}
});
and now all is well.