I'm trying to replace an image with another image.
Since the webpage, that i'm building, has to be viewable in IE8, then CSS based solutions played out quircky.
I tried the
display: none; and display: block; trick
opacity: 0; and opacity: 1; trick
But they both don't function as I want to (centered inside a div, because IE8 plays some stuff differently, then I thought that may-be a simple src="" swaping will do the trick.
I started with jquery, but since I'm pretty bad with understanding the $(this) and DOM, then it isnt working at all, but i think I got my logic right.
So, HTML is here:
<div class="wrapper">
<a href="#">
<img class="original" src="http://placekitten.com/200/200">
<img class="overlay" src="http://placekitten.com/g/200/200">
</a>
…
…
So I have numerous a tags inside a wrapper, each containing two images. As they are responsive and having the same ratio, then no sizes are needed.
And my started jquery:
$('.wrapper a').hover(
function () {
var original = $(this).attr('src');
var overlay = $(this).next().attr('src');
$(this).children('.original').attr('src', overlay);
},
function () {
$(this).children('.original').attr('src', original);
}
);
And here's the JSFiddle .
So, I'm really after this, that each a tag I have inside a wrapper would change the image according to the images inside of that tag.
You don't need javascript here at all. Really. Use CSS:
.wrapper a:hover .original {
display: none;
}
.wrapper a:hover .overlay {
display: inline-block;
}
Demo: http://jsfiddle.net/hHyh6/10/
You should simply show overlay image on hover and hide original image
$('.wrapper a').hover(function () {
$(this).find('.original').toggle();
$(this).find('.overlay').toggle();
}, function () {
$(this).find('.original').toggle();
$(this).find('.overlay').toggle();
});
DEMO
Instead you can try this:
$('.overlay').hide(); //<----------first hide the overlay image
$('.wrapper a').hover(function () {
$(this).find('.overlay').show().add(this).find('.original').hide();
// here find the overlay and show it and hide the original
}, function () {
$(this).find('.overlay').hide().add(this).find('.original').show();
// here find the overlay and hide it and show the original
});
Demo # Fiddle using .end()
Demo # Fiddle using .add(this)
try this js i also tried in your fiddle too it works
var current_cash;
$('.wrapper a').hover(
function () {
current_cash = $(this).find('.original').attr('src');
var overlay = $(this).find('.overlay').attr('src');
$(this).children('.original').attr('src', overlay);
},
function () {
$(this).children('.original').attr('src', current_cash);
}
);
Related
I want to create a website with background images that change over time with a fade in/fade out effect, but I don't want to use the existing jQuery fade in/fade out effect because with when one image faded out, a white background appeared before other image faded in. I found a plugin named Maximage that suits my request but it uses img tags while I want to work with background-image CSS (I have a good reason for doing this). Does anyone know how to do this?
Here's my HTML code:
<div id="wrapper">
//My contain here
</div>
Here's my JavaScript code so far:
//Auto change Background Image over time
$(window).load(function() {
var images = ['img/top/bg-1.jpg','img/top/bg-2.jpg','img/top/bg-3.jpg'];
var i = 0;
function changeBackground() {
$('#wrapper').fadeOut(500, function(){
$('#wrapper').css('background-image', function () {
if (i >= images.length) {
i = 0;
}
return 'url(' + images[i++] + ')';
});
$('#wrapper').fadeIn(500);
})
}
changeBackground();
setInterval(changeBackground, 3000);
});
Example: http://www.aaronvanderzwan.com/maximage/examples/basic.html
AHH ! Finally ! I found a nice technique ! I'm using a double wrapper.
The problem in your code is a bit logical. You can't fadeOut and fadeIn at the same time a single wrapper.
So the idea is to create two wrapper and to switch between them back and forth. We have one wrapper called: "wrapper_top" that encapsulate the second wrapper called: "wrapper_bottom". And the magic was to put beside the second wrapper: your content.
Thus having the structure ready which is the following:
<div id='wrapper_top'>
<div id='content'>YOUR CONTENT</div>
<div id='wrapper_bottom'></div>
</div>
Then a bit of JS+CSS and voilà ! It will be dynamic with any amount of images !!!
Here is the implementation: http://jsbin.com/wisofeqetu/1/
<html>
<head>
<script src="http://code.jquery.com/jquery-1.10.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(window).load(function() {
var i =0;
var images = ['image2.png','image3.png','image1.png'];
var image = $('#slideit');
//Initial Background image setup
image.css('background-image', 'url(image1.png)');
//Change image at regular intervals
setInterval(function(){
image.fadeOut(1000, function () {
image.css('background-image', 'url(' + images [i++] +')');
image.fadeIn(1000);
});
if(i == images.length)
i = 0;
}, 5000);
});
</script>
</head>
<body>
<div id="slideit" style="width:700px;height:391px;">
</div>
</body>
</html>
If it doesn't have to be background-image, you can place all the images in your #wrapper, in <img>, it will work like a charm:
<div id="wrapper">
<img src="firstImage" class="imageClass"></img>
<img src="secoundImage" class="imageClass"></img>
<img src="thirdImage" class="imageClass"></img>
</div>
then some style. Every image has to be in same spot, so add position relative to #wrapper, and position absolute to .imageClass:
#wrapper{
position: relative;
}
.imageClass{
position: absolute;
top: 0;
left: 0;
display: none;
}
display: none; will hide every image.
Now some JQuery. To appear first image when window load write this:
$(window).load(function() {
$('.imageClass').eq(0).show();
});
by the .eq() "command" you can specify which one element with class '.imageClass' you want to use exactly. Starts with 0. After that just do something like that:
function changeBackground() {
var current = 0;
//tells which image is currently shown
if(current<$('.imageClass').length){
//loop that will show first image again after it will show the last one
$('.imageClass').eq(current).fadeOut(500);
current++;
$('.imageClass').eq(current).fadeIn(500);
} else {
$('.imageClass').eq(current).fadeOut(500);
current=0;
$('.imageClass').eq(current).fadeIn(500);
}
}
changeBackground();
setInterval(changeBackground, 3000);
});
That should work, hope you will like it.
You may also use jQuery plugin backstretch.
I have a DIV with 9 images and I would like to change CSS property of 8 images unlike one that user is hovering.
Here is what I have:
HTML:
<div class="gallery">
<img src="http://i.utdstc.com/icons/256/google-chrome-mac.png" class="image-hover" onmouseover="return hoverPics()" onmouseout="return changeMeBack()" />
<img src="http://i.utdstc.com/icons/256/google-chrome-mac.png" class="image-hover" onmouseover="return hoverPics()" onmouseout="return changeMeBack()" />
</div>
JS:
function hoverPics() {
$(".image-hover").css("filter", "gray").css("-webkit-filter", "grayscale(100%)");
$(this).css("-webkit-filter", "grayscale(0%)");
}
function changeMeBack() {
$(".image-hover").css("-webkit-filter", "grayscale(0%)");
}
Actual page
The best example of what I'm looking for is Gallery at the bottom of the page after age validation. Here
Cheers
I strongly recommend against using inline JS. Since you're already using jQuery, you can simply listen to the .hover() event (which is basically a shorthand for .mouseenter() and .mouseleave()), and use DOM traversal methods:
$(function() {
$('.image-hover').hover(function() {
$(this).css({
'-webkit-filter': 'grayscale(0%)'
}).parent().siblings().find('.image-hover').css({
'-webkit-filter': 'grayscale(100%)'
});
}, function() {
$('.image-hover').css({
'-webkit-filter': 'grayscale(0%)'
});
});
});
See proof-of-concept fiddle here: http://jsfiddle.net/teddyrised/5kw2hs7f/
There is also a pure CSS method (slightly hackier), although it allows less granularity over control compared to the jQuery solution. The way is to set all .image-hover to grayscale, but only allow colour on the specific .image-hover:hover.
The only problem is that we are setting all images to greyscale as long as the parent container .gallery is hovered upon, and this might not be the desired behavior. See fiddle here: http://jsfiddle.net/teddyrised/88v8ga5z/
.gallery:hover .image-hover {
-webkit-filter: grayscale(100%);
}
.gallery:hover .image-hover:hover {
-webkit-filter: grayscale(0%);
}
Pass this in function to access them
onmouseover="return hoverPics(this)" onmouseout="return changeMeBack()"
in js
function hoverPics(obj) {
$(".image-hover").css("filter", "gray").css("-webkit-filter", "grayscale(100%)");
$(obj).css("-webkit-filter", "grayscale(0%)");
}
function changeMeBack() {
$(".image-hover").css("-webkit-filter", "grayscale(0%)");
}
try to verify if is hover, like this:
function hoverPics() {
if( ! $('.image-hover').is(':hover') ) {
$(".image-hover").css({ "filter": "gray", "-webkit-filter": "grayscale(100%)" });
}
}
function changeMeBack() {
$(".image-hover").css("-webkit-filter", "grayscale(0%)");
}
I do not have much experience with jQuery however if attempting this I would pass through the id of the current element when the function is called, on hover. I would then use a loop to run through the images, within this loop I would check the id against the current image and if true would not change the grey scale.
I have an image map that I want to show a new div when I hove over the hotspots. It starts with a default listing of text but once I mouseover the hotspots, I want that to change out to the corresponding div's. I'm using the following code and am getting no joy:
$(".office-default").mouseover(function () {
var elementId = "#office-" + $(this).attr("id").split("-")[1];
$(elementId).removeClass("hidden");
});
$(".office-default").mouseout(function () {
var elementId = "#office-" + $(this).attr("id").split("-")[1];
$(elementId).addClass("hidden");
});
Here's the entire code:
http://jsfiddle.net/leadbellydesign/jR6pa/1/
I've done tons of searches and have come up with nothing helpful. I don't want to change images, I just want to show div's.
You still need to fix the space below the divs, but this should work
DEMO
$("area").hover(function () {
$office = $(this).attr("href");
$(".office-default > div").addClass("hidden");
$($office).removeClass("hidden");
}, function(){
$(".office-default > div").addClass("hidden");
$("#office-1").removeClass("hidden");
});
UPDATE
To fix the spacing issue, update your .office-default CSS:
DEMO
.office-default {
background:#444;
padding:5px 15px 0;
width: 80%;
height:150px;
}
I am still trying to get the hang of the next() function in jQuery. I have created a hover function, when you hover the image, a transparent overlay appears per image
Click here for an example
For some reason my next() is not working, I am assuming my jQuery set up is incorrect. Below is an a snippet of my code:
$(document).ready(function () {
var $this = $(this);
$('.dummy').removeClass('overlay2');
$this.parent().next('.dummy').addClass('overlay2');
});
});
Can someone correct where I have gone wrong?
This can be easily accomplished without using any javascript:
.dummy {
height: 100%;
width: 100%;
position: absolute;
top:0;
background: #000;
opacity: 0.50;
display: none;
}
.figure-item:hover .dummy{
display: block;
}
I just changed .overlay2 to .dummy in your stylesheet and added display: none;, then made it so hovering over .figure-item sets .dummy to display: block;.
Here it is working: http://jsfiddle.net/zaX5U/6/
Old JS Solution:
This should work for you:
$(document).ready(function () {
$('.figure-img').on('mouseenter mouseleave', function(e){
var $this = $(this),
toggle = e.type === 'mouseenter';
$('.dummy').removeClass('overlay2');
$this.find('.dummy').toggleClass('overlay2', toggle);
});
});
The reason your previous code wasn't working was because it looked like you'd forgotten to include the line with the event handler in (there was an unmatched }): in the fiddle). This meant that $(this) was actually document and so the code didn't work.
.hover() interally maps to .on( "mouseenter mouseleave" and in this case it makes the code smaller to use the full version. This also use the .toggleClass() function with the optional switch argument to either remove or add the class depending on the type of event.
Fiddle: http://jsfiddle.net/zaX5U/4/
I have this segment of code here, which I seem to use something similar all the time:
$(".fieldv").live('mouseenter', function() {
$(this).children('.edit-icon').show();
}).live('mouseleave', function() {
$(this).children('.edit-icon').hide();
});
Is there an easier, simpler, or cleaner way to show / hide an element on a mouse action whether it be hovering or clicking an element? Or something of the like...
Why use JavaScript?
You will need to hide the icon by default:
.fieldv .edit-icon { display: none; }
Then this CSS applies on hover (and ONLY on hover)
.fieldv:hover .edit-icon { display: block; /* or inline, etc. */ }
You could try this:
$(".fieldv").hover(function(){
//mouseover
,function(){
//mouseout
});
$(".fieldv").hover(function() {
$(this).children('.edit-icon').show();
}, function() {
$(this).children('.edit-icon').hide();
});
use $(".class").hover(function(){}, function(){});