Develop Reference

How to change image when I hover then return to original image only when I hover again

I have two images, what I want to happen is that when I hover on the image, the image will change to the second image, and then when I hover on the image again, the image will change to the first image.
How do I do that using JavaScript?

This is a Javascript solution. I highly suggest you look into Jquery once you understand the below. In your case you don't seems to need the onmouseout.
HTML
<img src="urImg.png" onmouseover="chgImg(this)" onmouseout="normalImg(this)">
Javascript
function chgImg(x) {
x.src = "newImg.png";
}
function normalImg(x) {
x.src = "urImg.png";
}

HTML
<div class="image_container">
<img src="foo.png" class="first"/>
<img src="bar.png" class="last"/>
</div>
jQuery
$(".image_container").hover(function(){
$(this).toggleClass("switch");
});
CSS
.image_container .last{display:none;}
.image_container.switch .last{display:block;}
.image_container.switch .first{display:none;}

You can do this!
<a href="#" id="name">
<img title="Hello" src="images/view2.jpg>
</a>
$('#name img').hover(function() {
$(this).attr('src', 'images/view1.jpg');
}, function() {
$(this).attr('src', 'images/view2.jpg');
});

For anyone who do not want to use Javascript, just HTML, CSS.
You just need create second image with position: absolute; and put it with original image into a div (with position: relative;)
After that, you can use CSS to control opacity of second image when you hover it.
Below is my sample code using TailwindCSS
<div className="relative">
<img
src="/image1.png"
className="w-[100px] h-[100px]"/>
<img
src="/image1.png"
className="w-[100px] h-[100px] absolute opacity-[0] hover:opacity-[1]"/>
</div>

Trying to build a gallery, how to fade out currently displayed div and fade in the next one?

I'm currently working on a new personal portfolio site using very basic html/css/jquery code. I'm trying to build my own gallery to display my work (instead of using an already existing one like lightbox) but I've run into an annoying issue: I've tried to make the "forward-button" display the immediate following div but instead it fades in all the following divs. Here's my (condensed) code:
HTML:
<!--navigation buttons for gallery-->
<a id="back-button"><img src="image.png" /></a>
<a id="forward-button"><img src="image.png"/></a>
<!--gallery begins here-->
<div id="gallery">
<div id="first-div" class="work-display">
<img src="images/albumust-display.png" class="work-image" />
<div class="caption" id="wd1c">
<p class="caption-text">caption</p>
</div>
</div>
<div id="second-div" class="work-display">
<img src="images/ce-display.png" class="work-image" />
<div class="caption">
<p class="caption-text">caption</p>
</div>
</div>
<div id="third-div" class="work-display">
<img src="images/display.png" class="work-image" />
<div class="caption">
<p class="caption-text">caption</p>
</div>
</div>
CSS (all divs inside gallery are hidden by default):
.work-display {
display:none;
position:absolute;
}
What I'm trying to do with Jquery is that everytime someone opens a thumbnail, give the corresponding div that displays the image on full size a "true" state of "active" and then fade in, like this:
$( "#thumb-1" ).click(function(){
$( "#first-div" ).prop("active",true);
$( "#first-div" ).fadeIn();
});
all divs originally have a state of "active" = false:
$( "#gallery" ).children("div").prop("active",false);
then this is what I've tried to do with the "forward-button":
$("#forward-button").click(function () {
$("#gallery").find( $("div").prop("active",true) )
.prop("active",false)
.fadeOut()
.next().fadeIn();
$(".caption").fadeIn();
});
But then what it does is that instead of fading in only the next div, it fades all the divs that come after. what am I doing wrong?
I'm very new to Javascript/Jquery so probably this isn't the smartest way to go about this, if you have a simpler solution, do tell me.

I couldn't test it properly, because I don't have the whole code (and the images either). But this should do the trick:
$(function () {
$("#gallery div").attr("active", false);
$("#thumb-1").click(function () {
$("#first-div").attr("active", true).fadeIn();
});
$("#forward-button").click(function () {
$("#gallery div[active=true]:first")
.attr("active", false)
.fadeOut()
.next()
.attr("active", true)
.fadeIn();
});
$("#back-button").click(function () {
$("#gallery div[active=true]:first")
.attr("active", false)
.fadeOut()
.prev()
.attr("active", true)
.fadeIn();
});
});
Kind of demo: http://jsfiddle.net/W8VLh/13/

Just in case you have a reason to use 'active' properties instead of classes:
$("#forward-button").click(function () {
$("#gallery").find( "div[active='true']")
.prop("active",false)
.fadeOut()
.next().fadeIn().prop("active",true);
$(".caption").fadeIn();
});

Jquery to expand and collapse div on clicking a image

My Html looks like
<h3>Story Title
<img class="expandstory" src="/images/plus.png" /></h3>
<div class="description">Short description about the story</div>
<h3>Story Title
<img class="expandstory" src="/images/plus.png" /></h3>
<div class="description">Short description about the story</div>
My jquery looks like
$('.description').hide();
$('.description:first').show();
$('.expandstory:first').attr('src','/images/minus.png');
$('.expandstory:first').addClass('collapsestory');
$(".expandstory").click(function() {
if($(this).attr('class')=='expandstory') {
$(".description").slideUp(500);
$(this).parent().nextAll('.description:first').slideToggle(500);
$(this).attr('src','/images/minus.png');
$(this).addClass('collapsestory');
$(this).removeClass('expandstory');
}
else {
$(".description").slideUp(500);
$(this).attr('src','/images/plus.png');
$(this).addClass('expandstory');
$(this).removeClass('collapsestory');
}
});
I am making a simple thing more complex and more over this is not working when I expand/collapse the div multiple times.
I cannot change the HTML file. Please provide me good solution in jquery. Thanks in advance.

It's hard to understand what you mean when you say it's 'not working'. But you mention that it stops working when you expand/collapse <div>s multiple times, which leads me to believe you have animation queue issues, which can be solved using stop().
Try this:
$('.description').hide();
$('.description:first').show();
$('.expandstory:first').attr('src','/images/minus.png');
$('.expandstory:first').addClass('collapsestory');
$(".expandstory").click(function() {
if($(this).attr('class')=='expandstory') {
$(".description").stop(true,false).slideUp(500); //Here..
$(this).parent().nextAll('.description:first').stop(true,false).slideToggle(500); //Here..
$(this).attr('src','/images/minus.png');
$(this).addClass('collapsestory');
$(this).removeClass('expandstory');
}
else {
$(".description").stop(true,false).slideUp(500); //And here..
$(this).attr('src','/images/plus.png');
$(this).addClass('expandstory');
$(this).removeClass('collapsestory');
}
});

HTML
<h3>Story Title
<img class="expandstory" src="/images/plus.png" /></h3>
<div class="description hide">Short description about the story</div>
<h3>Story Title
<img class="expandstory" src="/images/plus.png" /></h3>
<div class="description hide">Short description about the story</div>
CSS:
.show
{
display:block;
}
.hide
{
display:none;
}
jQuery:
$('.expandstory').click(function(){
$(this).parent().next('.description').toggleClass('show hide');
});
Something like this.. http://jsfiddle.net/writetobhuwan/XqauU/

I believe he is looking for something like :
$('h3').next('.description').hide();
$('h3').first().next('.description').show();
$('h3').click(function(){
$(this).find('img').toggleClass('.expandstory');
$('.description').stop().slideUp(500);
$(this).next('.description').stop().slideDown(500);
});
fiddle

Something like this should work:
$('img.expandstory').click(function() {
var $this = $(this);
var $div = $this.parent().next();
$('img.expandstory').not($this).prop('src', '/images/plus.png');
$('div.description').not($div).slideUp(500);
$this.prop('src', ( $div.is(':visible') ? '/images/plus.png' : '/images/minus.png' ));
$div.slideToggle();
});
Here's a fiddle
Note: In the fiddle I've modified the alt property of the image just so that you can see that it changing.

Image Hover Zoom like Google Images

I wrote some jquery code (from one video tutorial) to make mousehover zoom effect like in google pictures.
I want to add some delay before zoom (0.5-1 sec), but I don't know how to do that!!!
I've tried a lot of methods with delay() or setTimeout(), but nothing helps!!!
I do not know why...
Here is the javascript code:
$(function(){
$.fn.popOut=function(user_opts){
return this.each(function(){
var opts=$.extend({
useId:"poppedOut",
padding:20,
border:0,
speed:200
},user_opts);
$(this).mouseover(function(){
// kill any instance of this already
$("#"+opts.useId).remove();
// make a copy of the hovered guy
var $div=$(this).clone();
// setup for prelim stuff
$div.css({
"position":"absolute",
"border":opts.border,
"top":$(this).offset().top,
"left":$(this).offset().left,
"-moz-box-shadow":"0px 0px 12px black",
"-webkit-box-shadow":"0px 0px 12px black",
"z-index":"99"
});
// store all of the old props so it can be animate back
$div.attr("id",opts.useId)
.attr("oldWidth",$(this).width())
.attr("oldHeight",$(this).height())
.attr("oldTop",$(this).offset().top)
.attr("oldLeft",$(this).offset().left)
.attr("oldPadding",$(this).css("padding"));
// put this guy on the page
$("body").prepend($div);
// animate the div outward
$div.animate({
"top":$(this).offset().top-Math.abs($(this).height()-opts.height),
"left":$(this).offset().left-opts.padding,
"height":opts.height,
"padding":opts.padding
},opts.speed);
// loop through each selector and animate it to its css object
for(var eachSelector in opts.selectors){
var selectorObject=opts.selectors[eachSelector];
for(var jquerySelector in selectorObject){
var cssObject=selectorObject[jquerySelector];
$div.find(jquerySelector).animate(cssObject,opts.speed);
}
}
$div.mouseleave(function(){
$("#"+opts.useId).animate({
width:$(this).attr("oldWidth"),
height:$(this).attr("oldHeight"),
top:$(this).attr("oldTop"),
left:$(this).attr("oldLeft"),
padding:$(this).attr("oldPadding")
},0,function(){
$(this).remove();
});
});
});
});
};
$(".productBox").popOut({
height:300,
border:"1px solid #333",
selectors:[{".productDescription":{
height:150
}
}]
});
});
And example HTML code:
<div class="productBox" style="width:300px;height:235px;margin-right:10px;float:left;background-color:#fff;">
<div class="productImage" style="width:200px;height:116px;overflow:hidden;">
<img src="/home/ponomar/plakat5.jpg" width="100%">
</div>
<div class="productContent" style="float:left;">
<div class="productTitle" style="height:29px;">Product title</div>
<div class="productDescription" style="height:70px;">Here is description of the product.</div>
<div class="buyButton" style="margin-top:0;float:left;">Buy this!</div>
</div>
</div>
<div class="productBox" style="width:200px;height:235px;margin-right:10px;float:left;background-color:#fff;">
<div class="productImage" style="width:200px;height:116px;overflow:hidden;">
<img src="/home/ponomar/plakat5.jpg" width="100%">
</div>
<div class="productContent" style="float:left;">
<div class="productTitle" style="height:29px;">Product title</div>
<div class="productDescription" style="height:70px;">Here is description of the product.</div>
<div class="buyButton" style="margin-top:0;float:left;">Buy this!</div>
</div>
</div>
Can anyone help me to do that? besides, I think it is very useful script.
Thanks in advance!!!

This may be what you're looking for : hoverIntent jQuery Plug-in

The best example can be found at Pop Images like Google Images
Also take a look at the demo

If you want to copy the cloned object to your original div then you need to just following the steps:
add id to your original div & the following code above the respective code:
var old_box = $div.attr('id');
$div.attr("id", opts.useId)
.attr("oldWidth", $(this).width())
.attr("oldHeight", $(this).height())
.attr("oldTop", $(this).offset().top)
.attr("oldLeft", $(this).offset().left)
.attr("oldPadding", $(this).css("padding"));
add the following code above the mouseleave event:
$div.click(
function() {
$("#" + old_box).html($(this).html());
$(this).remove();
}
);

css3/Jquery animation/transition/: How to make image move vertically and back?

I want to do this effect in my image (button)
http://osc4.template-help.com/wt_32608/index.html#
I want to make this animation whatever the method CSS3, HTML5 canvas , JS
If I will use Hover property , how can I make the image slide and back when roolout

First, make a < div > that will contain the animation.
<div id="image_holder"></div>
Then, place the < img > inside.
<div id="image_holder_1" class="image_holder">
<img id="image_1" class="image" ..... />
</div>
Next, add some CSS styling to the < div > like so:
.image_holder {
overflow: hidden;
}
And also some CSS to the < img >:
.image {
position: relative;
}
Now, animate the image with jQuery. Specifically, you will be animating the "top" CSS attribute for the image:
$('#image_holder_1').hover( function() {
$('#image_1').animate({
top: '-' + $(this).height() + 'px'
});
}, function() {
$('#image_1').animate({
top: '0px'
});
});
See it in action here: http://jsfiddle.net/trusktr/7hTDu/
Alternatively, you can do it with CSS3 animations. Do a search for "CSS3 transitions" on google: http://www.google.com/search?btnG=1&pws=0&q=CSS3+transitions

something like this.
$(".items").each(function() {
$(this).mouseover(function(){
$(this).find(".inner").slideDown();
});
$(this).mouseout(function(){
$(this).find("inner").slideUp();
});
});
but it would be better if you give us some code of your html struct, and something aboute your idea.

The easiest way is probably to position the images absolutely and then manipulate the top, something like this:
<img id="myimage" style="position: absolute" src="whatever"/>
<script>
$('#myimage').animate({top: '<whatever>px' },someDuration);
</script>
Read the jQuery animate docs here: http://www.google.dk/search?sourceid=chrome&ie=UTF-8&q=jquery+animate
It should not be that hard to figure out :)

If just an animated background to a button you want, why not use background-image and animate the background-position with jQuery?