Image change when hovered over? [duplicate] - javascript

This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
change image on mouseover
Can anyone tell me how I could get pic1_s to pic9_s images in the following code to change to a different pic when they are hovered over? I have different versions of each picture which are darkened with an opacity layer and have writing. They already have a jquery lightbox effect on them and a carousel effect. Can find here: http://www.meanbeangames.com/ (under the main image three abreast).
<div class="image_carousel">
<div id="foo2">
<a href="img/pic1_b.jpg" rel="gallery" title="Death From Above">
<img src="img/pic1_s.jpg" class="fancy_thumb" width="320" height="198" />
</a>
<a href="img/pic2_b.jpg" rel="gallery" title="Tree Under Attack">
<img src="img/pic2_s.jpg" class="fancy_thumb" width="320" height="198" />
</a>
<a href="img/pic3_b.jpg" id="pic3" rel="gallery" title="World Map">
<img src="img/pic3_s.jpg" class="fancy_thumb" width="320" height="198" />
</a>
<a href="img/pic4_b.jpg" rel="gallery" title="Combo Attack">
<img src="img/pic4_s.jpg" class="fancy_thumb" width="320" height="198" />
</a>
<a href="img/pic5_b.jpg" rel="gallery" title="Robots Strike">
<img src="img/pic5_s.jpg" class="fancy_thumb" width="320" height="198" />
</a>
<a href="img/pic6_b.jpg" rel="gallery" title="Back Stab">
<img src="img/pic6_s.jpg" class="fancy_thumb" width="320" height="198" />
</a>
<a href="img/pic7_b.jpg" rel="gallery" title="Critical Hit">
<img src="img/pic7_s.jpg" class="fancy_thumb" width="320" height="198" />
</a>
<a href="img/pic8_b.jpg" rel="gallery" title="All Out War">
<img src="img/pic8_s.jpg" class="fancy_thumb" width="320" height="198" />
</a>
<a href="img/pic9_b.jpg" rel="gallery" title="Air Defense">
<img src="img/pic9_s.jpg" class="fancy_thumb" width="320" height="198" />
</a>
</div>
<a class="prev" id="foo2_prev" href="#"><span>prev</span></a>
<a class="next" id="foo2_next" href="#"><span>next</span></a>
</div>

set them as a background image for the <a>:
And on hover switch them.
a:link, a:visited {
display: block;
background: url(image-light.jpg) no-repeat 0 0;
width: width of image;
height: height of image;
}
a:hover, a:active, a:focus {
background-image: url(image-dark.jpg);
}

Related

Target all link by parent class, add "rel" attribute to link (without jQuery)

I have this Codepen demonstrating how to do it with jQuery. I tried to do it with vanilla Javascript but couldn't get it to work. How would you go about this in plain ES6?
HTML:
<div class="external">
<figure>
<a href="https://via.placeholder.com/150" target="_blank">
<img src="https://via.placeholder.com/150" class="vc_single_image-wrapper" width="150" height="150">
</a>
</figure>
</div>
<div class="external">
<figure>
<a href="https://via.placeholder.com/150" target="_blank">
<img src="https://via.placeholder.com/150" class="vc_single_image-wrapper" width="150" height="150">
</a>
</figure>
</div>
<p>Placeholder images courtesty of Placeholder.com</p>
Javascript:
$(document).ready(function () {
// Scan the webpage for all class names of 'external'.
$(".external").each(function () {
// For each class name of 'external' found, find descendant tag "a" of that div and apply the rel attribute.
$(".external a").attr("rel", "external noopener");
});
});
You can just do document.querySelectorAll('.external a').forEach to iterate over all of them:
document.querySelectorAll('.external a').forEach((el) => {
el.setAttribute('rel', 'external noopener');
});
<div class="external">
<figure>
<a href="https://via.placeholder.com/150" target="_blank">
<img src="https://via.placeholder.com/150" class="vc_single_image-wrapper" width="150" height="150">
</a>
</figure>
</div>
<div class="external">
<figure>
<a href="https://via.placeholder.com/150" target="_blank">
<img src="https://via.placeholder.com/150" class="vc_single_image-wrapper" width="150" height="150">
</a>
</figure>
</div>
<p>Placeholder images courtesty of Placeholder.com</p>

How to add an <a> tag to Flickity?

I was wondering if anyone knew of a way to add a tag to a Flickity image slider? Here's what I have for my slider but it messes with the functionality of the slider itself:
<div class="carousel" data-flickity='{ "imagesLoaded": true, "percentPosition": false, "autoPlay": true, "wrapAround": true}'>
<a id="firstpic" class="scrollTo" data-scrollTo="first" href="#">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/orange-tree.jpg" alt="orange tree" />
</a>
<a id="firstpic" class="scrollTo" data-scrollTo="first" href="#">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/submerged.jpg" alt="submerged" />
</a>
<a id="firstpic" class="scrollTo" data-scrollTo="first" href="#">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/look-out.jpg" alt="look-out" />
</a>
<a id="firstpic" class="scrollTo" data-scrollTo="first" href="#">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/one-world-trade.jpg" alt="One World Trade" />
</a>
<a id="firstpic" class="scrollTo" data-scrollTo="first" href="#">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/drizzle.jpg" alt="drizzle" />
</a>
<a id="firstpic" class="scrollTo" data-scrollTo="first" href="#">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/cat-nose.jpg" alt="cat nose" />
</a>
</div>
I have another JS file with some basic scrollTo jQuery code, but other than that I just need to figure out how to get the links on the images to work. Any ideas?
I fear that you can't have both touch response and link. But you can add an element to link inside of the element that you are sliding.
<div class="hero-carousel__cell hero-carousel__cell--2 is-selected" style="position: absolute; left: 100%;">
<div class="hero-carousel__cell__content">
<p class="slogan slogan--easy">Easy to use.</p>
<p class="slogan slogan--fun">Fun to flick.</p>
<p class="slogan slogan--tagline">Flickity makes carousels, galleries, & sliders that feel lively and effortless.</p>
</div>
</div>
This is a piece of the example of Flickity web, you can see I added a link to a element. If you need to have images you can set them as background-image in the wrapper div, and put a clickable link inside not covering the whole div.

Hover Icons in Justified Gallery

I am creating images grid and I am using the following library Justified Gallery. The hover effect is working fine for the img-alt attribute. but I want to display some icons with links on the hover.
Just like the following picture
Take a look the the following Fiddle
https://jsfiddle.net/zvj2o7fy/1/embedded/result/
<div id="justifiedGallery">
<a href="#" title="What's your destination?">
<img alt="What's your destination?" src="http://lorempixel.com/340/227/?1" />
</a>
<a href="#" title="Just in a dream Place">
<img alt="Just in a dream Place" src="http://lorempixel.com/340/227/?1" />
</a>
<a href="#" title="Il Capo at Palermo">
<img alt="Il Capo at Palermo" src="http://lorempixel.com/300/226/?1" />
</a>
<a href="#" title="Erice">
<img alt="Erice" src="http://lorempixel.com/340/227/?1" />
</a>
<a href="#" title="Truthful Innocence">
<img alt="Truthful Innocence" src="http://lorempixel.com/240/227/?1" />
</a>
<a href="#" title="Truthful Innocence">
<img alt="Truthful Innocence" src="http://lorempixel.com/127/300/?1" />
</a>
<a href="#" title="Truthful Innocence">
<img alt="Truthful Innocence" src="http://lorempixel.com/440/227/?1" />
</a>
<a href="#" title="Truthful Innocence">
<img alt="Truthful Innocence" src="http://lorempixel.com/140/227/?1" />
</a>
<a href="#" title="Truthful Innocence">
<img alt="Truthful Innocence" src="http://lorempixel.com/340/227/?1" />
</a>
<a href="#" title="Truthful Innocence">
<img alt="Truthful Innocence" src="http://lorempixel.com/240/227/?1" />
</a>
<a href="#" title="Truthful Innocence">
<img alt="Truthful Innocence" src="http://lorempixel.com/340/227/?1" />
</a>
<a href="#" title="Truthful Innocence">
<img alt="Truthful Innocence" src="http://lorempixel.com/340/227/?1" />
</a>
<a href="#" title="Truthful Innocence">
<img alt="Truthful Innocence" src="http://lorempixel.com/227/340/?1" />
</a>
<a href="#" title="Truthful Innocence">
<img alt="Truthful Innocence" src="http://lorempixel.com/340/227/?1" />
</a>
<a href="#" title="Truthful Innocence">
<img alt="Truthful Innocence" src="http://lorempixel.com/140/227/?1" />
</a>
<a href="#" title="Truthful Innocence">
<img alt="Truthful Innocence" src="http://lorempixel.com/340/227/?1" />
</a>
<a href="#" title="Truthful Innocence">
<img alt="Truthful Innocence" src="http://lorempixel.com/340/227/?1" />
</a>
</div>
Please help me to create this.
as per documentation(http://miromannino.github.io/Justified-Gallery/captions/)
remove title attribute and add a div with class caption
just like
<a href="#">
<img alt="What's your destination?" src="http://lorempixel.com/340/227/?1" />
<div class="caption">
<div class="icon-cart">
<img src="https://cdn1.iconfinder.com/data/icons/flat-artistic-shopping-icons/32/shopping-32.png"/>
</div>
</div>
</a>
in this div you can add any thing.
If you need links on caption, need a small structure change like
<div id="justifiedGallery">
<div>
<a href="http://lorempixel.com/340/227/?1">
<img alt="Title 1" src="http://lorempixel.com/340/227/?1" />
</a>
<div class="caption">
<a href="#">
<i class="fa fa-shopping-cart"></i>
</a>
<a href="#">
<i class="fa fa-cloud-download"></i>
</a>
</div>
</div>
<div>
<a href="http://lorempixel.com/340/227/?1">
<img alt="Title 1" src="http://lorempixel.com/340/227/?1" />
</a>
<div class="caption">
<a href="#">
<i class="fa fa-shopping-cart"></i>
</a>
<a href="#">
<i class="fa fa-cloud-download"></i>
</a>
</div>
</div>
</div>
Justified Gallery recommends using the Colorbox jQuery library inside of a callback to achieve what you are trying to do. Colorbox controls a caption lightbox div that gets shown on hover.
If you look at the Colorbox 'multiple galleries with one call' demo, you'll see you can add custom icons for each image by adding a hidden div called caption inside of the gallery container:
<div class="container">
<a href="image.jpg" class="jg-entry cboxElement">
<img alt="Alt Message" src="image.jpg">
<div class="caption">
<div class="icon1"></div>
<div class="icon2"></div>
<div class="icon3"></div>
</div>
</a>
</div>
To invoke the captions and make them appear via JS, you'll make your call to Colobox inside of justified gallery's callback via the .jg-complete class. Inside of the callback, the colorbox library is invoked with the necessary parameters (like opacity and transition shown in the code sample below) to get your icons fading into view exactly you would like.
JS:
$('.container').justifiedGallery({
rowHeight : 50
}).on('jg.complete', function () {
$(this).find('a').colorbox({
maxWidth : '80%',
maxHeight : '80%',
opacity : 0.8,
transition : 'elastic',
current : ''
});
});
You can dynamically replace the caption with whatever you like. Here's a quick solution.
$("img").mouseenter(function(){
$(this).siblings(".caption").html("<div><a href='#'><img src='source'></a>");
});
Use jquery hover selector to set the display of icons
The default display of icons should be none in css
This should help
https://codeshare.io/IGavT

Javascript with images

I am currently trying to insert image with Javascript attached to it and for some reason it works on Firefox but the images or icons do not display on IE.
I have done the coding like this:
<a href="javascript:changesize('xxx')">
<img src="Images/changesize.jpg" title="Change Text Size">
</a>
<a href="javascript:changefont('xxx')">
<img src="Images/changefont.jpg" title="Change Font">
</a>
<a href="javascript:changeline('xxx')">
<img src="Images/changeline.jpg" title="Change Line Spacing">
</a>
<a href="javascript:changecolors('xxx')">
<img src="Images/changecolors.jpg" title="Change Text/Backgroud Colors">
</a>
You could try:
<img src="Images/changeline.jpg" title="Change Line Spacing" onclick="changeline('xxx')">

Fancybox index reset when opened from hidden div

I have a project with thumbnails that when moused over show the full-sized version in a display area div. This is done using jQuery to pull the HTML for the full-sized images from a hidden div and display it in the visible display div.
I currently have Fancybox (ver 2.1.5) configured to work on document load. Each of the hidden full-sized images includes a link that has the fancybox class and a rel group with the same name.
When the display area is clicked on, Fancybox opens the image as desired. However, when the next button is clicked it always goes to the first image (including when it is the first image), and the previous button always goes to the last image (including when it is the last image). Of course my desise would be for it to maintain the order of the images (as the links are ordered in the HTML).
Does anyone have any suggestions how this might work as I am hoping (either with jQuery or Fancybox)?
My thanks in advance to all you brilliant folks out there who generously volunteer your time and expertise!
HTML:
<div class="report_container">
<div class="report_thumbnails_container">
<div class="report_thumbnails">
<img src="images/contents/page1_thumbnail.jpg"/>
<img src="images/contents/page2_thumbnail.jpg"/>
<img src="images/contents/page3_thumbnail.jpg"/>
<img src="images/contents/page4_thumbnail.jpg"/>
<img src="images/contents/page5_thumbnail.jpg"/>
<!--a href"#" page="page6"><img src="images/contents/page6_thumbnail.jpg"/></a-->
<img src="images/contents/page7_thumbnail.jpg"/>
<img src="images/contents/page8_thumbnail.jpg"/>
<img src="images/contents/page9_thumbnail.jpg"/>
<img src="images/contents/page10_thumbnail.jpg"/>
<img src="images/contents/page11_thumbnail.jpg"/>
<img src="images/contents/page12_thumbnail.jpg"/>
<!--a href="#" page="page13"><img src="images/contents/page13_thumbnail.jpg"/></a-->
<img src="images/contents/page14_thumbnail.jpg"/>
<img src="images/contents/page15_thumbnail.jpg"/>
<img src="images/contents/page16_thumbnail.jpg"/>
<img src="images/contents/page17_thumbnail.jpg"/>
</div>
</div>
<div class="report_page_container">
<div class="page_contents"></div>
</div>
<div class="clear_both"></div>
</div>
<div class="page_container_contents">
<div class="page_contents" id="page1">
<a class="fancybox" rel="group" href="images/contents/page1_preview.jpg"><img src="images/contents/page1_display.jpg" width="900" height="1150" /></a>
</div>
<div class="page_contents" id="page2">
<a class="fancybox" rel="group" href="images/contents/page2_preview.jpg"><img src="images/contents/page2_display.jpg" width="900" height="1098" /></a>
</div>
<div class="page_contents" id="page3">
<a class="fancybox" rel="group" href="images/contents/page3_preview.jpg"><img src="images/contents/page3_display.jpg" width="900" height="1207" /></a>
</div>
<div class="page_contents" id="page4">
<a class="fancybox" rel="group" href="images/contents/page4_preview.jpg"><img src="images/contents/page4_display.jpg" width="900" height="1091"/></a>
</div>
<div class="page_contents" id="page5">
<a class="fancybox" rel="group" href="images/contents/page5_preview.jpg"><img src="images/contents/page5_display.jpg" width="900" height="1102"/></a>
</div>
<!--div class="page_contents" id="page6">
<a class="fancybox" rel="group" href="images/contents/page6_preview.jpg"><img src="images/contents/page6_display.jpg" width="900" height=""/></a>
</div-->
<div class="page_contents" id="page7">
<a class="fancybox" rel="group" href="images/contents/page7_preview.jpg"><img src="images/contents/page7_display.jpg" width="900" height="1154"/></a>
</div>
<div class="page_contents" id="page8">
<a class="fancybox" rel="group" href="images/contents/page8_preview.jpg"><img src="images/contents/page8_display.jpg" width="900" height="1145"/></a>
</div>
<div class="page_contents" id="page9">
<a class="fancybox" rel="group" href="images/contents/page9_preview.jpg"><img src="images/contents/page9_display.jpg" width="900" height="1159"/></a>
</div>
<div class="page_contents" id="page10">
<a class="fancybox" rel="group" href="images/contents/page10_preview.jpg"><img src="images/contents/page10_display.jpg" width="900" height="1141"/></a>
</div>
<div class="page_contents" id="page11">
<a class="fancybox" rel="group" href="images/contents/page11_preview.jpg"><img src="images/contents/page11_display.jpg" width="900" height="1138"/></a>
</div>
<div class="page_contents" id="page12">
<a class="fancybox" rel="group" href="images/contents/page12_preview.jpg"><img src="images/contents/page12_display.jpg" width="900" height="1162"/></a>
</div>
<!--div class="page_contents" id="page13">
<a class="fancybox" rel="group" href="images/contents/page13_preview.jpg"><img src="images/contents/page13_display.jpg" width="900" height=""/></a>
</div-->
<div class="page_contents" id="page14">
<a class="fancybox" rel="group" href="images/contents/page14_preview.jpg"><img src="images/contents/page14_display.jpg" width="900" height="1110"/></a>
</div>
<div class="page_contents" id="page15">
<a class="fancybox" rel="group" href="images/contents/page15_preview.jpg"><img src="images/contents/page15_display.jpg" width="900" height="1101"/></a>
</div>
<div class="page_contents" id="page16">
<a class="fancybox" rel="group" href="images/contents/page16_preview.jpg"><img src="images/contents/page16_display.jpg" width="900" height="1152"/></a>
</div>
<div class="page_contents" id="page17">
<a class="fancybox" rel="group" href="images/contents/page17_preview.jpg"><img src="images/contents/page17_display.jpg" width="900" height="1154"/></a>
</div>
<!--div class="page_contents" id="page18">
<a class="fancybox" rel="group" href="images/contents/page18_preview.jpg"><img src="images/contents/page18_display.jpg" width="900" height=""/></a>
</div-->
</div>
Code:
$(document).ready(function() {
$(".fancybox").fancybox();
var page = '.page_contents#page1';
var htmlCode = $(page).html();
$('.report_page_container .page_contents').html(htmlCode);
var notClicked = true;
$('.report_thumbnails a').mouseover(function(){
if (notClicked) {
var page = '.page_contents#' + $(this).attr('page');
var htmlCode = $(page).html();
$('.report_page_container').fadeOut(0, function(){
$('.report_page_container .page_contents').html(htmlCode);
$('.report_page_container').fadeIn(0);
});
}
});
$('.report_thumbnails a').click(function(e){
// Disables standard link behavior
e.preventDefault();
if (!$(this).hasClass('selected')) {
$('.report_thumbnails a').removeClass('selected');
$('.report_thumbnails a').children().css('opacity', '1');
$(this).addClass('selected');
$(this).children().css('opacity', '.5');
notClicked = false;
} else {
$(this).removeClass('selected');
$('.report_thumbnails a').removeClass('selected');
$('.report_thumbnails a').children().css('opacity', '1');
notClicked = true;
}
var page = '.page_contents#' + $(this).attr('page');
var htmlCode = $(page).html();
$('.report_page_container').fadeOut(0, function(){
$('.report_page_container .page_contents').html(htmlCode);
$('.report_page_container').fadeIn(0);
});
});
});

Categories