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>
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.
You can achieve this with JavaScript or CSS. All you need is a static frame from the gif.
JavaScript
You can utilize the mouseenter and mouseleave mouse events to alter the src of the image.
const states = {
'default': "https://i.stack.imgur.com/mJHTA.png",
'hover': "https://i.stack.imgur.com/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.stack.imgur.com/mJHTA.png" id="hover-img" alt="Delete image" width="100" height="100" />
</a>
CSS
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.stack.imgur.com/mJHTA.png') no-repeat;
background-size: contain;
}
.hoverable:hover {
background-image: url('https://i.stack.imgur.com/WwxRR.gif');
}
<a><span class="hoverable"></span></a>
JavaScript using data tags
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.stack.imgur.com/mJHTA.png"
data-default-src="https://i.stack.imgur.com/mJHTA.png"
data-hover-src="https://i.stack.imgur.com/WwxRR.gif" />
</a>
a {
background-image: url("https://i.postimg.cc/1RGh8PpK/static-delete.png")
}
a:hover {
background-image: url("https://i.postimg.cc/1RGh8PpK/delete.gif")
}
Related
I want to make buttons with image icons on WeChat mini-program. For example, play/pause, next, previous buttons in media player.
I tried as html:
<button>
<image src="../image/play.svg"></image>
</button>
But I cannot see any image on button.
How to make an image button?
For image buttons, just use <image> tag.
For example:
<image src="../image/play.svg" bindTap="play()"></image>
And set some button-like styles using WXSS.
image {
background: lightblue;
}
image:hover {
background: lightgrey;
}
Of course, your icon image should have transparent background.
I have achieved it with
<button bindtap = "mytap">
<image src = '../../image/search-icon.png' style=" width: 35rpx;height: 35rpx;"></image>
Search
</button>
You can also put inside the button only the image element
<button bindtap = "mytap">
<image src = '../../image/search-icon.png' style=" width: 35rpx;height: 35rpx;"> </image>
</button>
In javascript or typescript files put:
Page({
//...
mytap(){
console.log("clic")
}
})
For more details you can consult: Implement picture button in WeChat Mini Program
I am building an Ionic app and I want to click on the image and change it with a different image. It is a toggle functionality.
I have the following class:
img{
&.default {
background-image: url("img/726-star.png");
&.activated{
background-image: url("img/726-star-selected.png");
}
}
And I apply the class as shown below:
<img class="default" style="width:38px;height:38px;margin-top:30px;"/>
But when I see in the Chrome Debugger tools I don't see the default class being applied. What am I doing wrong?
UPDATE: So, I am using DIV now instead of an image but I don't see the image displayed in the div:
#favImage {
&.default {
background-image: url("img/726-star.png");
}
&.activated {
background-image: url("img/726-star-selected.png");
}
}
<div id="favImage" class="default" style="width:38px;height:38px;margin-top:30px;"></div>
first of all i recommened you to sparate your style in the html to a css file.
second if you are using img tag don't forget to insert src attribute to the img tag other wise the img won't show.
to change the image by clicking on it i use JavaScript function that activated by write an attribute on the img tag "onclick" and call the JavaScript function.
the function take image id into a variable and with the use of a match method check if the image src contains string "726-star-not" if its not the image src changes to "726-star-selected" and vice versa.
to learn more about the match method
function myFunction() {
var image = document.getElementById('favImage');
if (image.src.match("726-star-not")) {
image.src = "img/726-star-selected.png";
} else {
image.src = "img/726-star-not.png";
}
}
#favImage{
width:38px;
height:38px;
margin-top:30px;
}
<html>
<head>
<link rel="stylesheet" href="css/style.css"/>
<script src="js/javascript.js"></script>
</head>
<body>
<img id="favImage" src="img/726-star-not.png" onclick="myFunction()">
</body>
</html>
I'm following this tutorial (Removed link as YouTube videos are not allowed on SO).
I can't understand why the banner wont flick through as it should, I have 4 images I intend it to flick through.
Also if anyone does solve this how can I make the images link to another page, e.g is it as simple as adding <a href=.......> in the HTML code?
HTML:
<script type="text/javascript" src:"jquery.js"></script>
<div id="banner">
<img src="images/banner1.jpg" class="active" />
<img src="images/banner4.jpg" />
<img src="images/banner2.jpg" />
<img src="images/banner3.jpg" />
</div>
javascript/jQuery
$(document).ready(function () {
setInterval(function () {
//Get current active image
var active = $('#banner .active');
// If there is another image(object) left then make that image next
// If not, go back to the first image of the banner div
if (active.next().length > 0) var next = active.next();
else var next = $('#banner img:first');
//Get the next image ready by modifying the z-index
next.css('z-index', '2');
//Fade out the active image, then
active.fadeOut(1000, function () {
});
//Move the active image to the back of the pile, show it and remove the active class
active.css('z-index', '1').show().removeClass('active');
//Make the next image the active one
next.css('z-index', '3').addClass('active');
});
}, 3000);
});
CSS
#banner {
position: relative;
margin-left: auto;
margin-right: auto;
height: 350px;
width: 950px;
margin-top: 10px;
}
#banner img {
position:absolute;
z-index:1;
}
#banner img.active {
z-index:3;
}
Right so to start with you don't have your script linked up.
You have:
<script type="text/javascript" src:"jquery.js"></script>
It should be:
<script type="text/javascript" src="jquery.js"></script>
As you have just put jquery.js that means if you homepage (whatever page is using it) is in C:\Users\Me\Documents\Website then jquery.js also needs to be in that same folder.
Then we move to the jQuery, its all ok untill the end of it. You close it with }, 3000);
but then try to close it again using });. The indentation also gives it away.
So when we fix that we get this DEMO HERE
Im currently in the process of building a website for my graphic design work. On my home page Ive got a selection of images showing my work. I want to be able to hover over the images so they have an overlay showing the name of the project and what category it comes under. Ive researched that you can do this using html, using the following code -
<a href="TARGET URL GOES HERE">
<img src="URL OF FIRST IMAGE GOES HERE"
onmouseover="this.src='URL OF SECOND IMAGE GOES HERE';"
onmouseout="this.src='URL OF FIRST IMAGE GOES HERE';">
</img>
</a>
however when i tried this, it didn't work on the preview, I've already heard that this method can cause problems and is pretty old school.
Ive also read that you can use CSS method by creating an image with the two images you want rolling over next to each other.
However if i do it this way will it be easy to put text over the rollover, as well as links. For example on the roller over image I will make the text using HTML and links, but is this easy to do using the CSS method?
Here is a website that uses this method -
http://www.equisgarcia.com
There are multiple approaches to this issue, depending always on your needs.
I made a fiddle using only CSS with one of the approaches, you can see it working here.
All you you need is:
1) Define a parent element "parentExample" containing the image and the text with a size.
2) Define image "imageExample" and text "textExample" to cover all the parent size and set the text to be hidden by default.
3) Define a hover "parentExample:hover" in which image is hidden and text display.
.parentExample {
height: 400px;
width: 400px;
}
.imageExample {
height: 100%;
width: 100%;
}
.textExample {
height: 100%;
width: 100%;
display: none;
}
.parentExample:hover .imageExample {
display: hidden;
}
.parentExample:hover .textExample {
display: block;
}
An image
div { background:url('http://www.placehold.it/200x200/f2f2f2') no-repeat; }
On hover display a different image
div:hover { background:url('http://www.placehold.it/200x200/666666') no-repeat; }
If the element is an anchor or has some onclick function defined with it.. display a different image on select with a new class
div.selected { background:url('http://www.placehold.it/200x200/000000') no-repeat; }
This is how the first figure image on the site is done in HTML:
<html>
<head>
<title></title>
</head>
<body>
<div id="pr_contain_item_7129129">
<a class="nohover" href="/New-Year-s-Card" id="p7129129" name=
"equisgarcia" onfocus="this.blur()" onmouseout=
"this.className='nohover';" onmouseover="this.className='hover';" rel=
"history"></a>
<div class="loader_holder" id="load_7129129"><img src=
"/_gfx/loadingAnim.gif"></div>
<div class="cardimgcrop" id="cardthumb_7129129"><img border="0"
data-hi-res=
"http://payload241.cargocollective.com/1/8/281332/7129129/prt_300x169_1390152506_2x.jpg"
height="169" src=
"http://payload241.cargocollective.com/1/8/281332/7129129/prt_300x169_1390152506.jpg"
width="300"></div>
<div class="thumb_title">
<span class="text">New Year's Card</span>
</div>
<div class="excerpt">
Fig.ω
</div>
<div class="thumb_tag">
<span class="text"><a href=
"http://www.equisgarcia.com/filter/Lettering">Lettering</a>,
<a href=
"http://www.equisgarcia.com/filter/Print">Print</a> </span>
</div>
</div>
</body>
</html>
you can simply do this with javascript and html and also with css and as follows:
<html>
<style type="text/css">
#sam{
height: 100px;
width: 100px;
background-color:#ccc;
}
#sam:hover{
background-color: #eee;
}
</style>
<head>
<script type="text/javascript">
var change = function(){
var x = document.getElementById("sam");
x.innerHTML = "this is new";
}
var changeanother = function(){
var x = document.getElementById("sam");
x.innerHTML = " ";
}
</script>
</head>
<body>
<div id="div2"></div>
<div id="sam" onmouseover="change();" onmouseout="changeanother();"> </div>
</body>
</html>
futrher using innerHTML helpes you to gave more controls over your tag.
you can also use img tage insted of a div tag.
as you wish
You an use sprites; in CSS using background-position-x, -y properties.
<div class="image"></div>
CSS:
div.class {
background-image: url('../img/image.jpg');
}
div.class:hover {
background-x: -100px;
}
Providing you have a sprite image created (two or more images in one). On hover you are actually offsetting your image by 100px to show the other image.
Im hoping somebody on here can help me. I am currently building a website for a client and on the index page will be an image slider/fader that will display a sequence of images. What the client has asked for is for on the transition from one image to another for the next image in the sequence to fade in as grayscale and slowly turn to color and the pause for a few seconds before loading in the next image.
I have been using an image fader that works fine for the transition but would like to modify it for the grayscale feature. Being new to jQuery and there doesn't appear to be any 'ready built' on the internet so i'm struggling a bit.
My CSS is a follows:
.index_slideshow { position:relative; height:340px; width:980px; margin:auto; }
.index_slideshow IMG { position:absolute; top:0; left:0; z-index:8; }
.index_slideshow IMG.active { z-index:10; }
.index_slideshow IMG.last-active { z-index:9; }
My jQuery is as follows:
function slideSwitch() {
var $active = $('.index_slideshow IMG.active');
if ( $active.length == 0 ) $active = $('.index_slideshow IMG:last');
var $next = $active.next().length ? $active.next()
: $('.index_slideshow IMG:first');
$active.addClass('last-active');
$next.css({opacity: 0.0 })
.addClass('active')
.animate({opacity: 1.0}, 1000, function() {
$active.removeClass('active last-active');
});
}
$(function() {
setInterval( "slideSwitch()", 5000 );
});
And my HTML is:
<div class="index_slideshow" id="index_slideshow">
<img src="images/img2.jpg" alt="" />
<img src="images/img.jpg" alt="" />
</div>
Hope some one can help me! :-)
A simple way to do it would be to insert greyscale versions of the images into the slideshow:
<div class="index_slideshow" id="index_slideshow">
<img src="images/img2.jpg" alt="" />
<img src="images/img2grey.jpg" alt="" />
<img src="images/img1.jpg" alt="" />
<img src="images/img1grey.jpg" alt="" />
</div>
(I assume from your img order that the images that appear lower in the code display first... but just swap the position of imgX.jpg and imgXgrey.jpg if that's an incorrect assumption.)
Apart from that, you're looking at a combination of the Canvas element and IE filters: http://www.ajaxblender.com/howto-convert-image-to-grayscale-using-javascript.html
(Ignore the tags that say the code is PHP. It's Javascript. The tags are probably leftover cruft from an old CMS.)
You'd have to extend that to animate each step of the way between grayscale and color, so as long as you're not dealing with massive images, the first method is the easiest.