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!
Related
I'm trying to develop an overwolf app and am having issues receiving mouseLeave events.
Overwolf App:
<div id="menu" onMouseDown="dragMove();">
<div id="close" onclick="closeWindow();"></div>
</div>
<iframe src="URL_to_Webpage"></iframe>
<div id="scale" onmousedown="dragResize('BottomLeft');"></div>
<div id="sliderBg">
<div id="slider"></div>
</div>
The menu, close, scale and slider elements are overlayed ("position: absolute; left:...") over the iframe and work as window control elements (scaling, closing,...)
Webpage (iframe content):
$('html').hover(function() {
$(this).addClass('hover');
}, function() {
$(this).removeClass('hover');
});
I always get the hover class applied to my iframe as expected. CSS :hover selectors get applied as well.
The mouseLeave event though is only triggered, when leaving the iframe without "touching" the overlayed window control elements.
So if I touch those elements on my way out with my mouse, the "hover" class isn't removed (event simply not triggered) and all things applied with a css ":hover" selector aren't removed either.
Any help would be appreciated
Try add 'id' name on the iframe and imstead of directly using html.
I would like to see how it works to fully picture what you want to do.
Could you please paste your code at http://jsbin.com and let me know the link?
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/
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");
});
After discovering and using keyframe, I can add some animation on page loading. Like this http://jsbin.com/orusup/1/edit or like this on graphicfusiondesign.com (demo)
Now I want the inverse: add some animation on "page disappear".
So when I click on any link, I got the same animation just before the next page/link loads.
I know it's easy in JavaScript but I want it in CSS only.
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.