I have 3 <a> tags in my html and they each contain 2 images. Only the grescale images are displayed and the other ones are set to none.
I want to hide the greyscale image when I hover the mouse over the grescale image and display the colored one. And when I un-hover I want the colored image to be hidden again. How can I do that using jquery?
<a class="mylink" href="">
<img src="img/thumbnails/colored-1.jpg" class="color-image"/>
<img src="img/thumbnails/greyscale-1.jpg" class="greyscale-image"/>
</a>
<a class="mylink" href="">
<img src="img/thumbnails/colored-2.jpg" class="color-image"/>
<img src="img/thumbnails/greyscale-2.jpg" class="greyscale-image"/>
</a>
<a class="mylink" href="">
<img src="img/thumbnails/colored-3.jpg" class="color-image"/>
<img src="img/thumbnails/greyscale-3.jpg" class="greyscale-image"/>
</a>
.color-image
{
display:none
}
Why use jQuery and not pure CSS?
You can use :hover and toggle the display of the images.
a.mylink:hover .color-image,
a.mylink .greyscale-image {
display: inline;
}
a.mylink .color-image,
a.mylink:hover .greyscale-image {
display: none;
}
In jQuery it is just
function swap(evt) {
var isOver = evt.type === "mouseenter";
link.find(".color-image").toggle(isOver);
link.find(".greyscale-image").toggle(!isOver);
}
$("a.mylink").hover(swap, swap);
NO Jquery needed. Use the :hover css pseudo on the .myLink anchor, like:
.color-image {
display:none;
}
a.myLink:hover .color-image {
display: block;
}
a.myLink:hover .greyscale-image {
display: none;
}
My way :p
a[class="mylink"]:not(:hover) img[class*="greyscale"],
a[class="mylink"]:hover img[class*="color"] {
display: inline-block;
}
a[class="mylink"]:not(:hover) img[class*="color"],
a[class="mylink"]:hover img[class*="greyscale"] {
display: none;
}
Here is a demo JSFiddle
http://jsfiddle.net/agaex70r/
Here is another JSFiddle with a transition.
http://jsfiddle.net/agaex70r/2/
You could do this with css:hover. Hover on gray scale image, display:none and the reverse for the colored image. This has the benefit of working when JS is disabled. Otherwise, you could look into Jquery UI
Related
I wrote the following code:
<div class="slider-button-next slider-btn"> < </div>
<img src="images/pic02.jpg" alt="" data-position="center center" />
<div class="slider-button-prev slider-btn"> > </div>
I want the users to click on the left/right buttons in order to switch between images. Currently I have only one image pic02.jpg. How can I change the image displayed, without JS? (For example, changing to pic03.jpg when pressing right and changing to pic01.jpg when pressing left and so on). I'm planning to use hosting services to host my static website so as I understand, I can't use JS.
If you're careful about where you position your elements you can do this:
#mycheckbox~.images img:first-child {
display: none;
}
#mycheckbox:checked+.images img:last-child {
display: none;
}
#mycheckbox:checked+.images img:first-child {
display: unset;
}
<input id='mycheckbox' type='checkbox'> Click me
<div class='images'>
<img src='https://picsum.photos/id/237/200/300'>
<img src='https://picsum.photos/id/433/200/300'>
</div>
The :has() pseudo class is on it's way (it's not in Firefox yet - check caniuse.com but it's coming) and this allows you lots of flexibilty:
.images img:first-child {
display: none;
}
body:has(#mycheckbox:checked) .images img:last-child {
display: none;
}
body:has(#mycheckbox:checked) .images img:first-child {
display: unset;
}
<input id='mycheckbox' type='checkbox'> Click me
<p> Lots of content here</p>
<div class='images'>
<img src='https://picsum.photos/id/237/200/300'>
<img src='https://picsum.photos/id/433/200/300'>
</div>
You'd have to look at your slider element to see how it's been rendered in the DOM to see if it's an underlying check box or other input and change the rules accordingly.
I'm using this free HTML template https://html5up.net/ethereal
In the portfolio section, when you click on an image, the image appears bigger for a better view.
I want to add some info or some text along with the popup image but somehow cannot add it to this code
<img src="https://html5up.net/uploads/demos/ethereal/images/gallery/thumbs/01.jpg" alt="" />
Edit based on your comments: There are many approaches to toggling hidden content, below you will find a basic example. We are hiding the element with the class "hidden" and wiring up an event listener on the default image. Once the default image is clicked on it will fire a function that gets the parent element and applies a new class. In our CSS we are then hiding the default image and showing the previously hidden content. This is a rough example and by expanding on the styling you can do all sorts of things such as fading the hidden content in by setting a transition on the element's opacity or sliding the hidden content into view by transitioning the transform properties as a couple of examples.
var target = document.querySelector(".parent .default");
target.addEventListener("click", function(){
var parent = document.querySelector(".parent");
parent.classList.add("show-hidden");
});
.parent {
padding: 15px;
}
.parent p {
color: black;
font-size: 16px;
}
.hidden {
display: none;
}
.parent.show-hidden .hidden {
display: block
}
.parent.show-hidden .default {
display: none;
}
<div class="parent">
<img class="default" src="https://html5up.net/uploads/demos/ethereal/images/gallery/thumbs/01.jpg" alt="" />
<div class="hidden">
<img src="https://html5up.net/uploads/demos/ethereal/images/gallery/thumbs/01.jpg" alt="" />
<p>I am the text element</p>
</div>
</div>
I'd like to implement (in pure Javascript, not jQuery) a simple slider/carrousel such that each time I click on an image, it hides it, and show the next image.
The following code nearly works, except that when we arrive at the end, it doesn't loop. I thought about using a if ... in the case, but it would not be very elegant.
How to make this carousel loop?
Array.from(document.getElementsByClassName("imgslider")).forEach(function(element) {
element.addEventListener('click', function(e) {
element.nextElementSibling.classList.toggle("visible");
element.classList.toggle("visible");
});
});
.imgslider { display: none; }
.visible { display: block; }
<div id="carousel">
<img src="https://www.w3schools.com/w3css/img_snowtops.jpg" class="imgslider visible">
<img src="https://www.w3schools.com/w3css/img_mountains.jpg" class="imgslider">
<img src="https://www.w3schools.com/w3css/img_forest.jpg" class="imgslider">
</div>
NB: if the div #carousel contains only one image, nothing should happen when we click on the image.
I found a solution with (element.nextElementSibling || element.parentNode.firstElementChild): when there is no "next" sibling, then element.nextElementSibling is null, and element.parentNode.firstElementChild gives the first sibling. This allows the carousel to loop at the end:
Array.from(document.getElementsByClassName("imgslider")).forEach(function(element) {
element.addEventListener('click', function(e) {
(element.nextElementSibling || element.parentNode.firstElementChild).classList.toggle("visible");
element.classList.toggle("visible");
});
});
.imgslider { display: none; }
.visible { display: block; }
<div id="carousel">
<img src="https://www.w3schools.com/w3css/img_snowtops.jpg" class="imgslider visible">
<img src="https://www.w3schools.com/w3css/img_mountains.jpg" class="imgslider">
<img src="https://www.w3schools.com/w3css/img_forest.jpg" class="imgslider">
</div>
HTML
<div module="product_listnormal">
<ul>
<li>
<input type="checkbox" class="{$product_compare_class} {$product_compare_display|display}">
<div id="prdImgWrapper">
<img src="{$image_medium}" alt="" class="prdImgImg"/>
</div>
.....
So i Add onmouseover in img tag
<img src="{$image_medium}" onmouseover="this.src={$image_medium} + 'aaa'" alt="" class="prdImgImg"/>
but it doesn't call {$image_medium}aaa link what's wrong?
ex) if $image_medium = 111.png
$image_medium + aaa = 111aaa.png
I use on mouse over and on mouse leave function like this
onmouseover='this.src = this.src.replace(".jpg","_2.jpg")' onmouseleave='this.src = this.src.replate("_2.jpg", ".jpg")'
this source can use every picture
You have two links image_medium and image_medium2.
Say image_medium="a.jpg" and image_medium_2="a_2.jpg";
Using pure JavaScript
1) You can add listener for the same using mouseenter and mouseleave events if you know values
var divToBeHovered=document.getElementById("prdImgWrapper");
//add listener
divToBeHovered.addEventListener("mouseenter",function(){
var imgEle=document.querySelector("#"+this.id+" img");
imgEle.src="a_2.jpg"; //image_medium_2
},false);
divToBeHovered.addEventListener("mouseleave",function(){
var imgEle=document.querySelector("#"+this.id+" img");
imgEle.src="a.jpg"; //image_medium
},false);
2)If you don't know values i.e src of image is dynamic then you can create one function and call it both on mouseenter and mouseleave event.
<a href="/product/detail.html{$param}" class="prdImg">
<img src="{$image_medium}"
onmouseenter="changeURLOfImage(this,'{$image_medium}aaa')"
onmouseleave="changeURLOfImage(this,'{$image_medium}')"
mouseralt="" class="prdImgImg"/></a>
function changeURLOfImage(imageElem,url){
imageElem.src="url"
}
3)Assign direct values to src
<img onmouseenter='this.src ={$image_medium}aaa' onmouseleave='this.src ={$image_medium}'/>
This can be done using pure CSS by using two images and changing the display on hover state.
a.prdImg > img {
display: inline-block;
}
a.prdImg > img + img {
display: none;
}
a.prdImg:hover > img {
display: none;
}
a.prdImg:hover > img + img {
display: inline-block;
}
<div module="product_listnormal">
<ul>
<li>
<input type="checkbox" class="{$product_compare_class} {$product_compare_display|display}">
<div id="prdImgWrapper">
<img src="http://media-cache-ak0.pinimg.com/736x/65/7e/a2/657ea254eb522135fbd59e0656a2e1dd.jpg" alt="" class="prdImgImg"/><img src="http://baconmockup.com/400/300" alt="" class="prdImgImg"/>
</div>
.....
By the way; wouldn't cause this.src={$image_medium} + 'aaa' the src to change from 111.png to 111.pngaaa?
While changing image src is not possible with css you can have 2 images(one hidden) and a container and on container mouse hover hide first image and show the second image.
something like this:
Html:
<div>
<span>This could be an image</span>
<span>This could be an image</span>
</div>
CSS:
div{
float:left;
width:200px;
height:200px;
}
div span{
width:100%;
height:100%;
display:none;
background-color:red;
}
div span:first-child{
display:block;
background-color:lime;
}
div:hover span:first-child{
display:none;
}
div:hover span:nth-child(2){
display:block;
}
have a look:
http://jsfiddle.net/mzvaan/fs6mc952/
html code like
<img src="sample1.png" id="newimg">
script like this
$(document).ready(function(e) {
$("#newimg").hover(function() {
$("#newimg").attr('src', 'sample2.png');
})
});
Here is the exact thing i've got to do:
Appropriate JavaScript and html so that when the user moves the mouse
over a thumbnail image of one particular type of room that is on
special offer, a full size (larger) image relating to it is displayed
(note that the display of a larger image should not cause other page
elements to move). When the user moves the mouse away from the
thumbnail image, the larger image should disappear.
Here is my website.
I just want to be able to hover over those image and get them to appear above the page, without altering how the page looks now.
This is my javascript section at the moment;
div = {
show: function(elem) {
document.getElementById(elem).style.visibility = 'visible';
},
hide: function(elem) {
document.getElementById(elem).style.visibility = 'hidden';
}
}
But i'm unsure if that is right or now for what i want,
Then this is the html;
<img src="images/garden2.jpg" width="201" height="143" alt="Garden Room" onMouseOver="div.show('div1')" onMouseOut="div.hide('div1')"/>
<div id="div1"><img src="images/garden2.jpg" alt="Garden Room" /></div>
but that creates a div below the image and alters the my elements which is not what i want to happen.
If you want some element to appear over other elements this element need to be positioned - the best way in your case is to set all containers element - meaning elements that contains the original shown image and the hidden image - in style position relative - and the hidden image set absolute position and when you hover on the original image just show the hidden image as your coded already:
I made a simple jsfiddle for you to understand
html:
<div class="container">
<img src="http://www.numyspace.co.uk/~unn_w12001251/images/fellside22.jpg" onMouseOver="div.show('div1')" onMouseOut="div.hide('div1')" />
<div id="div1" class="hid-img"><img src="http://www.numyspace.co.uk/~unn_w12001251/images/fellside22.jpg" /></div>
<div>
<div class="container">
<img src="http://www.numyspace.co.uk/~unn_w12001251/images/garden2.jpg" onMouseOver="div.show('div2')" onMouseOut="div.hide('div2')" />
<div id="div2" class="hid-img"><img src="http://www.numyspace.co.uk/~unn_w12001251/images/garden2.jpg" /></div>
<div>
css:
.container{
position: relative;
}
.container .hid-img{
position: absolute;
display:none;
z-index:1;
}
js:
var div = {
show: function(elem) {
document.getElementById(elem).style.display = 'block';
},
hide: function(elem) {
document.getElementById(elem).style.display = 'none';
}
}
EDIT:
just add width,height to img tag http://jsfiddle.net/MKPgv/2/
I would use a simpler code like this:
HTML:
<a href="http://www.numyspace.co.uk/~unn_w12001251/images/fellside22.jpg">
<img width="100" src="http://www.numyspace.co.uk/~unn_w12001251/images/fellside22.jpg" />
<img class="fullsize" src="http://www.numyspace.co.uk/~unn_w12001251/images/fellside22.jpg" />
</a>
<a href="http://www.numyspace.co.uk/~unn_w12001251/images/garden2.jpg">
<img width="100" src="http://www.numyspace.co.uk/~unn_w12001251/images/garden2.jpg" />
<img class="fullsize" src="http://www.numyspace.co.uk/~unn_w12001251/images/garden2.jpg" />
</a>
CSS:
a {
position: relative;
display: inline-block;
}
a .fullsize {
position: absolute;
top: 100%;
left: 0;
display: none;
z-index: 1;
}
a:hover .fullsize {
display: inline;
}
JS:
-NONE-
Fiddle: http://jsfiddle.net/84anu/
Preview http://jsfiddle.net/84anu/show/