I'm trying to replace one image (closed bag) to another (open bag) using mouseenter and mouseleave functions. For some reason it only works when I leave the mouse vertically, but not horizontally. I suspect it has to do with the length of the image but I inspected it and it was not the issue. Here is my code:
$("#tumi_front").mouseenter(function() {
$("#tumi_front").hide();
$("#tumi_open").show();
});
$("#tumi_open").mouseleave(function() {
// alert('leave');
$("#tumi_front").show();
$("#tumi_open").hide();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<img id="tumi_front" src="tumi_front.png" alt="yolo front" height="40%" width="40%" />
<img id="tumi_open" src="tumi_open.png" alt="yolo open" height="30%" width="30%" " style="display: none " />
Thank you in advance for the help!
The problem is you're setting your two different images to have a different height and width. Your front image is at 40% and your second is at 30%. So when you try to hover outside of your smaller image, it triggers the hover onto the larger image, and then hides your image over again, causing the glitch.
Your code (40% 30% broken)
A better solution for this would be to give both your images the same class and toggle the images. This will fix the hover issue you are having with the different sized images, and it is more efficient.
jQuery
$(".double-img").on("mouseenter mouseleave", function() {
$(".double-img").toggle();
});
JSFiddle
My code (40% 30% fixed)
Why not use 1 image (image sprite) and do a background-position with css on :hover. No jquery required!
Related
I currently have a gallery that changes the larger image when the smaller is clicked. Here is the most important code:
.n1:focus span
{
background: url('images/Boot.png')
}
Then
<a class="thumb n1" href=# tabindex=1>
<img src=images/Boot.png><span>
<img src=""><br>Boot</span></a>
I can't figure out how to make this happen onhover or onmouseover.
Here is an example of what I need: http://thelittleappfactory.com/ripit/
Does anyone have any insight? I tried using javascript to open the link onmousehover, but my browser saw it as a popup.
First of all you need to have a thumbnail and a big version of your images. In your code you seem to have a single image. The big images should be hidden with css display:none and absolutely positioned so they will all be on top of each other. I would use jquery's mouseenter and mouseleave events. mouseover event is triggered when the cursor moves over an element and will generate too many calls.
<div class="item n1">
<img class="thumb" src="images/boot_thumb.png" alt="boot/>
<img class="big" src="images/boot_big.png" alt="boot/>
</div>
This javascript code would do the trick:
$('item').mouseenter(function(){
$(this).children('big').fadeIn();
});
$('item').mouseleave(function(){
$(this).children('big').fadeOut();
});
I actually found a way to do this with pure CSS. I thought it was pretty phenominal, because I was told that was impossible and there seems to be need for it. Here's source code for this technique:
http://ostmosis.com/OnHoverChangeImage.zip
I have a bunch of images which have large areas of transparency (margins) around them. I'm trying to use them in a "sortable" but this makes dragging the correct image troublesome as they all overlap and their margins cause the wrong image to be dragged.
Unfortunately the transparent areas can't be cropped out.
So I tried to create a thin "handle" bar across the center of each image, but the handle isn't dragging the image at all.
$(".item").sortable({
handle: ".handle"
});
Here is a JSFiddle Link
What am I doing wrong?
When using the sortable function, you have to appy it to a "surrounding container" like a <ul> or a <div>.
So all you need to do to make your fiddle work is to surround your three divs with another div eg. <div id="srt"> <div>... </div>
In your jQuery call you need to adjust it like this:
$("#srt").sortable({
handle: ".handle"
});
Check out the corrected fiddle: http://jsfiddle.net/BkUvD/16/
I am trying to hover images and enlarge the image and image info. I want the hovered images div on top of other image div instead of covered by other images div
I used z-index but it doesn't seem to work. Anyone got a good idears? Thanks a lot.
<div class='imgDiv'>
<img src='a.jpg' />
<p>hahaha</p>
</div>
<div class='imgDiv'>
<img src='b.jpg' />
<p>hahaha</p>
</div>
<div class='imgDiv'>
<img src='c.jpg' />
<p>hahaha</p>
</div>
<div class='imgDiv'>
<img src='d.jpg' />
<p>hahaha</p>
</div>
......
.....I have so many images divs....
CSS
.imgDiv{
float:left;
}
.imgDiv:hover{
//part of the enlarge div will be covered by other image divs...
-webkit-transform:scale(1.45, 1.45);
-moz-transform:scale(1.45, 1.45);
-o-transform:scale(1.45, 1.45);
-ms-transform:scale(1.45, 1.45);
transform:scale(1.45, 1.45)
}
Jquery
$('.imgDiv').hover(function(){
//not working...
$(this).css('z-index','999');
})
For the z-index to work, position must be absolute. You will probably have to toggle absolute positionning on hover, and set the top and left attributes so the div stay in place.
It will be easier if you're not having your divs floating.
Remember that absolute position is relative to the first positionned element. Not necessarily the body element. It is relative to the first parent that has its position set to something.
edit
As #ahren pointed out in his comment, I was wrong with z-index only workin with position: absolute;.
That said, I setted up a fiddle with your code except the javascript part, and it seems to work as expected. The behavior is the same with chrome / firefox / ie9. Maybe other parts of your html/css is causing the issue? Or I misunderstood the question?
I want to add rollover effect on overlapping transparent images.
For example:
The following image is divided into 5 parts and I want to add rollover effect (different image) on each of them
When O tried with div or img tag, the image is rendered as a rectangle so rollover effect is not proper. When i rollover on green part between yellow, the yellow image gets highlighted because its z-index is high.
Following is the code that I tried:
<body>
<br />
<img src="part1.png" onclick="console.log('test1');"/>
<img src="part2.png" onclick="console.log('test2');" style="position:absolute; left:30px; top: 19px;"/>
<img src="part3.png" onclick="console.log('test3');" style="position:absolute; left:70px; top: 15px;"/>
<img src="part4.png" onclick="console.log('test4');" style="position:absolute; left:95px; top: 16px;"/>
<img src="part5.png" onclick="console.log('test5');" style="position:absolute; left:123px; top: 24px;"/>
</body>
images => , , , ,
I don't want to use jQuery, if possible.
The way I did this sort of thing is to place all the image elements, then put one big invisible (transparent) image over the top ("big" in the CSS, the file is actually 1x1 pixel). Then apply an imagemap to the topmost image. Result can be seen here: http://pokefarm.org/
Thanks Kolink and others for their responses. I tried to create image map as Kolink suggested but it was too difficult and also if i made a slight change to the image, then i would have to create a new image map.
I replaced this part with a flash swf file. It was far easier for me to create this kind of thing in flash.
I have a bunch of images in a gallery on a new website im building and Im wanting to have content displayed when a user hovers over an image.
For example if a user hovered over a picture of a car in my gallery then a low opacity content div would fade over the entire image to show text and maybe a link.
I presume this effect could be done with a bit of JS or even CSS Transitions to give the fade.
I just need to know how to make a content box appear over the image on hover, possibly at 80% opacity.
Heres an example of what I have in mind:
Thanks for the help, if anyone could point me in the right direction it would be appreciated.
I can post more information if needed.
This is somewhat simple way of implementing a hover show and hide with jquery.
Working example: http://jsfiddle.net/va2B8/2/
jQuery ( http://jquery.com/ ):
$(document).ready(function() {
$("#Invisible").hide()
$("#hoverElement").hover(
function () {
$('#Invisible').stop().fadeTo("slow", 0.33);
},
function () {
$('#Invisible').stop().fadeOut("slow");
}
);
});
html:
<p id="hoverElement">This little piggy will show the invisible div.</p>
<div id="Invisible">This is the content of invisible div.</div>
css:
#Invisible { background: #222; color: #fff; }
Edit: I changed url for the working example cause i forgot to fade out on mouse out.
Edit2: Changed url again and changed the code cause i had some extra code there.. plus i thought that i might as well add those two .stop() in there so that it stops the animation If the mouse over or mouse out occurs while animation is going on.
( Without the stops one could hover in and out several times and then when he would stop, the animation would still keep going till it has done each animation as many times as he triggered it. You can test that in here http://jsfiddle.net/va2B8/1/ )
You can start using this fiddle :
http://jsfiddle.net/Christophe/2RN6E/3/
1 div containing image and span like :
<div class="image-hover">
<img src="" />
<span class="desc">text to be displayed when imae hover</span>
</div>
Update
All can be done with CSS...
http://jsfiddle.net/Christophe/2RN6E/4/
Here's an easy jQuery plugin you can implement: http://file.urin.take-uma.net/jquery.balloon.js-Demo.html
It works like this:
$(function() {
$('img').balloon(options);
});
This jQuery applied the balloon function to all images on the page. Here's your HTML:
<img src="example.png" alt="Here's your caption." />
The text in the balloon is going to be whatever is in the alt attribute for images and whatever is in the title attribute for other tags.
I've just done this:
http://twostepmedia.co.uk
It uses hoverintent jquery plugin so there is a delay of 250ms after the user hovers over to avoid erratic hover behaviour.