How can i change image source on hover with only CSS
i tried but was able to find only answers with javascript.
this is my code:
<img src="">
i want to change image to 1.gif when user mouse hover it.
you can target the image first. and then from there when user mouser over the image you can change src attribute
target image.
const img = document.getElementById('imgId');
make mouser over event like this
img.addEventListener('mouserover', callback);
then you make your own function like this
function callback(event) {
if (img.src=== '1.gif') {
img.src = '2.gif';
}
}
return the 1.gif image when the mouseout
img.addEventListener("mouseout", anotherCallback);
function anotherCallback(event) {
if (img.src !== "1.gif") {
img.src = '1.gif';
}
}
Related
I'm working on a project where there are tiles of different pictures and I want to pass the value to another page when an image is clicked on. Since <img> doesn't have a value attribute, I tried to wrap an <a> tag around the image as follows, although it does the job, the format of the image is messed up. Is there a better way to do this that doesn't mess with the format of the image? Thank you for your help.
<a href="results.inc.php?value=gpu" onclick="post">
<img src="https://via.placeholder.com/200.jpg" alt="" class="cardImg">
</a>
Based on your comment, the most "harmless" way to do it would be JavaScript, adding a custom attribute to the image for the value you want it to pass in the onClick method.
document.addEventListener("DOMContentLoaded", function() {
var allCards = document.querySelectorAll(".cardImg");
for(i = 0; i < allCards.length; i++) {
var value = allCards[i].getAttribute("data-card-value");
allCards[i].addEventListener("click", function() {
document.location.href = "results.inc.php?value=" + value;
});
}
});
.cardImg {
cursor:pointer;
}
<img src="https://via.placeholder.com/200.jpg" data-card-value="gpu" alt="" class="cardImg">
I have a layout with a sequence of images overlapping.
I want to hide them one by them when clicking and after you hided all the pictures, show them in a reversed way until having them all – like a loop.
I have this simple piece of code where I manage to hide the images when clicking them, but can't figure how to show them again.
$('.overlap-img').on("click", function() {
$(this).hide();
})
Is there any way to accomplish that?
It's not mandatory to hide the image you click, it can work that you click anywhere and the images are closing, maybe that way you have more control of the sequence.
Thanks in advance!
1st: It will be good to add fake hide class to the hidden images
2nd: Need to get the number of the images and the number of hidden images
3rd: Loop through images using .each then you can use setTimeout to make a delay in show
$(document).ready(function(){
var interval,
time_to_hide = 500, // duration to fade/hide the image
time_to_show = 1000 // duration to fade/show the image
$(document).on("click",'.overlap-img:not(.showing)' , function() {
// add class hide to the clicked image and use hide([duration] , [callback])
$(this).addClass('hide').slideUp( time_to_hide , function(){
var All_images_Count = $('.overlap-img').length, // get the all images length
Hidden_images_Count = $('.overlap-img.hide').length; // get the hidden images length
if(Hidden_images_Count == All_images_Count){ // if the all images == the hidden images then
$('.overlap-img.hide').each(function(index){ // loop through the hidden images .. (index) is the index of the image
var This_image = $(this); // $(this) cannot work in setTimeout so you need to define it outside
interval = setTimeout(function(){
This_image.removeClass('hide').addClass('showing').slideDown(); // remove the class from the image and show it
if($('.overlap-img.showing').length == All_images_Count){ // if all images finish showing
$('.overlap-img.showing').removeClass('showing'); // remove the showing class from all
}
} , time_to_show * index); // time_to_show * index to make a delay between images on show
});
}
});
})
});
img{
position : absolute;
width : 100%;
height : 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img class="overlap-img" src="https://via.placeholder.com/100"/>
<img class="overlap-img" src="https://via.placeholder.com/150"/>
<img class="overlap-img" src="https://via.placeholder.com/200"/>
<img class="overlap-img" src="https://via.placeholder.com/250"/>
<img class="overlap-img" src="https://via.placeholder.com/300"/>
<img class="overlap-img" src="https://via.placeholder.com/350"/>
Also the .showing class I used it to prevent user to click till all images is shown
The OP Commented: I was simply wondering if it's possible, instead of making the images
appear automatically, to force the user to click in order to make them
appear. So the same process as to make them hide but making them
appear
$(document).ready(function(){
var interval,
time_to_hide = 500, // duration to fade/hide the image
time_to_show = 1000, // duration to fade/show the image
All_images_Count = $('.overlap-img').length; // get the all images length
$(document).on("click",'.overlap-img:not(.showing):not(:eq(0))' , function() {
// add class hide to the clicked image and use hide([duration] , [callback])
$(this).addClass('hide').slideUp( time_to_hide , function(){
var Hidden_images_Count = $('.overlap-img.hide').length; // get the hidden images length
if(Hidden_images_Count == All_images_Count - 1){ // if the all images == the hidden images then
$('.overlap-img:eq(0)').addClass('showing'); // Add the class showing to the first image
}
});
});
$(document).on("click",'.overlap-img.showing' , function() {
var ThisImage = $(this), // this image
NextImage = ThisImage.next('.overlap-img.hide'); // the next image
NextImage.removeClass('hide').addClass('showing').slideDown();
var showing_images_Count = $('.overlap-img.showing').length; // get the showing images length
if(showing_images_Count == All_images_Count){ // if the all images == the showing images then
$('.overlap-img.showing').removeClass('showing'); // remove the `showing` class from all the images
}
});
});
img{
position : absolute;
width : 100%;
height : 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img class="overlap-img" src="https://via.placeholder.com/100"/>
<img class="overlap-img" src="https://via.placeholder.com/150"/>
<img class="overlap-img" src="https://via.placeholder.com/200"/>
<img class="overlap-img" src="https://via.placeholder.com/250"/>
<img class="overlap-img" src="https://via.placeholder.com/300"/>
<img class="overlap-img" src="https://via.placeholder.com/350"/>
When I dynamically change img's src attribute, old image is displayed while loading a new one.
I have a component which displays some data: text and image. On click the underlying data is changed (i.e. new data from server). Once click, text is changed immediately, but component displays old image while new one is loaded. When new image is loaded, then it is visually displayed which can take noticeable amount of time.
In real application one can have product details and changing products on button click. All data is replaced immediately but not image.
Problem exists when the component is not destroyed (reused).
I've already tried clear image src after click, but it not worked.
I have simple binding in template
img [src]="img.url" style="width: 300px; height: 300px">
<p>{{ img.text }}</p>
and image change on click
this.img = this.images[1];
You can see sample app here https://stackblitz.com/edit/angular-cojqnf
Is this possible to take more control of this image change process? It would be great to clear image on click and wait for new one with empty background for example.
I hacked around a little with your stackblitz demo, I basically wrapped your code in an ImageGhostDirective to make it reusable. The directive listens to any changes on the src attribute using a MutationObserver to change the style. Using a HostListener on the 'load' event, it reverts the styles back to normal. I start with an opacity of 0 for the first load, followed by an opacity of 0.2 between successive image changes, but this is completely arbitrary and could be replaced by a spinner or any kind of placeholder...
Here is the link to the stackblitz: https://stackblitz.com/edit/angular-image-ghost-directive
<img [src]="'https://loremflickr.com/300/300?random=' + index"
style="width: 300px; height: 300px" imgGhost>
#Directive({
selector: 'img[imgGhost]'
})
export class ImageGhostDirective implements OnDestroy {
private changes: MutationObserver;
constructor(private elementRef: ElementRef) {
this.changes = new MutationObserver((mutations: MutationRecord[]) =>
mutations.filter(m => m.attributeName === 'src').forEach(() => this.opacity = 0.2)
);
this.changes.observe(this.elementRef.nativeElement, {
attributes: true,
childList: false,
characterData: false
});
}
ngOnDestroy(): void {
this.changes.disconnect();
}
#HostBinding('style.display') display = 'block';
#HostBinding('style.opacity') opacity = 0;
#HostListener('load')
onLoad(): void {
this.opacity = 1;
}
}
It is also possible to tell Angular to automatically attach this directive to every img element by using the img:not([imgGhost]) selector in the directive decorator. That way, you don't have to manually place the directive on every image in your app.
Hope this is useful.
Finally I achieved what I want by leveraging (load) event on img and [ngStyle].
In template I added load handler and style:
<img [src]="img.url" style="width: 300px; height: 300px" (load)="loaded()"
[ngStyle]="{'display': imgVisible ? 'block' : 'none'}">
In back-end:
imgVisible = true;
and when changing data, also hide image:
this.imgVisible = false;
next, when image is loaded, show the image (be careful! when old and new images have the same URL, this event is not raised; if it is the case you need to conditionally hide image)
loaded(): void {
this.imgVisible = true;
}
Complete code for solution: https://stackblitz.com/edit/angular-ewptj7
I'm not a big fan of this kind solutions. It could be difficult to apply when you have more images.
All better solution are welcome.
I just tried putting text over my video. The video autostarts when hovering it. With the Text on it the hover is "disabled". Is there any option to display the text without effecting the hover? Text is absolute.
I use a js to start the video. The Text is in a div on top.
window.onload = function() { //executes this code after the DOM loads
//--- this is the selector element. Feel free to change this if you don't want all video objects targeted.
const vids = document.getElementsByTagName(`video`)
//--- Now we loop over all of the selected elements and add event listeners
for (let i = 0; i < vids.length; i++) {
vids[i].addEventListener( `mouseover`, function(e) {
vids[i].play()
})
vids[i].addEventListener( `mouseout`, function(e) {
vids[i].pause()
})
}
}
Image from Webinspector
So you can add the two following css properties to the text object so that the user cannot interact with them.
.text-class {
user-select: none;
pointer-events: none;
}
If you still want the users to be able to select the text, say if copy & pasting the text is important you can just do.
.text-class {
pointer-events: none;
}
I am looking to contain my image sizes once they have been clicked on,
currently they are shown larger than I wish for them to appear.
Example: http://messaages.com/post/144951542174
HTML: https://gist.github.com/anonymous/4f09e3306f9b28ee0dce286342c51c7e
I have played around with various sizes within the code but I can't seem to be able to change it.
If you want to change the image sizes once they are clicked on you will want to use javascript to change the css.
<img onclick="imageChange(this)" style="width: 200px; cursor: pointer;" src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png">
<script>
window.imageChange = function(image) {
if (image.style.width === "200px") {
image.style.width = "100px";
} else {
image.style.width = "200px";
}
}
</script>
JS Fiddle: https://jsfiddle.net/ws12fqzc/