Menu
I am new to html.I need a delete button with animated style. I have used a gif image for animation. I want this image to be run when the user place the mouse over it. Currently, the gif image is running infinite.
How to make the image run when the user move the mouse over it. Help me with some solutions.
If you have any other transparent delete image, please provide, it can help me.
Here's the markup I tried:
<html>
<body>
<a>
<img src="https://i.postimg.cc/1RGh8PpK/delete.gif"
alt="Delete image" width="100" height="100" />
</a>
</body>
</html>
513
Head on over EZGIF to crop your gif and make it an appropriate size for a button:
Use your computer to take a static screenshot of the gif (you'll have to time it right):
Use HTML to hold both the static and animated image elements:
<img class='static_trash' id = 'static_btn' src='https://collaboratescience.com/stack/googs/trash_static.png' alt='Delete image' width='100' height='100' />
<img class='live_trash' id = 'live_btn' src='https://i.postimg.cc/1RGh8PpK/delete.gif' alt='Delete image' width='100' height='100' />
Use CSS to set live_trash to "display: none"
. live_trash {
"display" : "none"
}
Use JavaScript to change image source on hover:
Vanilla JavaScript:
let static_elem = document.getElementById("static_btn")
let live_elem = document.getElementById("live_btn")
static_elem.addEventListener("mouseenter", function( event ) {
event.target.style.display = "none";
live_elem.style.display = "block"
})
static_elem.addEventListener("mouseleave", function( event ) {
event.target.style.display = "block";
live_elem.style.display = "none"
})
Result:
You can play with crop sizing to get it better.
121
You can achieve this with JavaScript or CSS. All you need is a static frame from the gif.
You can utilize the mouseenter and mouseleave mouse events to alter the src of the image.
const states = {
'default': "https://i.sstatic.net/mJHTA.png",
'hover': "https://i.sstatic.net/WwxRR.gif"
};
let img = document.querySelector('#hover-img');
img.addEventListener('mouseenter', function(e) {
img.setAttribute('src', states.hover);
});
img.addEventListener('mouseleave', function(e) {
img.setAttribute('src', states.default);
});<a>
<img src="https://i.sstatic.net/mJHTA.png" id="hover-img" alt="Delete image" width="100" height="100" />
</a>Or, you can determine if the user if hovering over the element using the CSS pseudo-class :hover, but you will probably want to use a <div> or a <span> instead of a <img>.
.hoverable {
display: inline-block;
width: 100px;
height: 100px;
background: center url('https://i.sstatic.net/mJHTA.png') no-repeat;
background-size: contain;
}
.hoverable:hover {
background-image: url('https://i.sstatic.net/WwxRR.gif');
}<a><span class="hoverable"></span></a>Alternatively, you can associate the default and hover state with the element via data-* attributes.
You can utilize the mouseenter and mouseleave mouse events to alter the src of the image.
let img = document.querySelector('#hover-img');
img.addEventListener('mouseenter', function(e) {
img.setAttribute('src', e.target.getAttribute('data-hover-src'));
});
img.addEventListener('mouseleave', function(e) {
img.setAttribute('src', e.target.getAttribute('data-default-src'));
});<a>
<img id="hover-img" alt="Delete image" width="100" height="100"
src="https://i.sstatic.net/mJHTA.png"
data-default-src="https://i.sstatic.net/mJHTA.png"
data-hover-src="https://i.sstatic.net/WwxRR.gif" />
</a>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
