For a list of images I have the urls for the squared thumbnail http://example.com/img1_thumb.jpg and for the original size (any proportion) http://example.com/img1.jpg. I'm showing the thumbnails in a grid and I'd like to show the original one when the user puts the mouse over a image in the grid. Maybe using a floating element, the target is the user can see the image in more detail and view the parts of the cropped in the thumbnail.
How can I do it? I'm a beginner with HTML/css/Javascript
There are lots of jQuery plugins that do this. Since you are a beginner I would recommend starting there. Here is an article with some different options. Here is an example of what you are looking for.
U can work without thumbnails..
for thumbnail
<img src="http://example.com/img1.jpg" class="compress"/>
on hover of the above show this one
$(".compress").hover(function(){
$(".image").show();
});
full image
<img src="http://example.com/img1.jpg" class="image"/>
css
.compress{
width:20%;
/*aspect ratio will be maintained*/
}
.image{
display:none;
position:absolute;
}
its not complete,but i think it might help
Use JQuery:
$(function() {
$('#thumbnails img').click(function() {
$('#thumbnails').hide();
var src = $(this).attr('src').replace('.png', 'Large.png');
$('#largeImage').attr('src', src).show();
});
$('#largeImage').hide().click(function() {
$(this).hide();
$('#thumbnails').show();
});
});
<div id="thumbnails">
<img src="thumbnail1.png">...
</div>
<img id="largeImage" src="">
Basically you can create a <div class="some_class"><img src="http://example.com/img1.jpg"></div> set it's display:none and then bind an event to the thumb div like this :
$(".thumb_class").hover(function(){
$(".some_class").show()
},
function(){
$(".some_class").hide()
}
Of course you can personalize every div . The second function let you to hide the div when the mouse is out of the thumb. Hope i was as clear as possible.
Related
So I have 3 Images in line in HTML, and a large one below, and the 1 large one below it is the same image as one of the top 3. No thumbnails or anything being used. All I want done is when I Hover over the first small image it should show and change the bottom image, and if I hover away it changes back to its original, and same with the 2 other photos when I hover the large pic at the bottom should should it.
Organized like(in html)
Pic1 pic2 pic3
Pic4(larger)
<img src="guitars.jpg" width="80" height="60" alt="Guitars">
<img src="control.jpg" width="80" height="60" alt="Control Room" onmouseover="">
<img src="singing.jpg" width="80" height="60" alt="Singing Room" onmouseover="">
<br>
<img src="guitars.jpg" width="400" height="300">
I'm going to give you an example with only two elements (with only a single one having the event functionality), in which then you can expand to 3 images. The basic idea is to change the src of the large image to the this.src of the image when hovered (in JS it's the onmouseover event). Then on onmouseout set the src back to it's normal image. If the original image is just the first small image simply set it to that <img> element. Otherwise keep track of it.
In the following example #main is the large image, #apple is the first small image and #banana the second small image.
// This gets the original src of the main (large image)
// That way when it's changed we can refer to this variable to revert it
var original = document.getElementById("main").src;
// On mouseover the "banana" image, that the src of the main image to src of the banana
document.getElementById("banana").onmouseover = function(){
document.getElementById("main").src = this.src;
}
// On mouseout of "banana" we change the main image back to it's original image
document.getElementById("banana").onmouseout = function(){
document.getElementById("main").src = original;
}
Fiddle Example
A simple solution would be to implement onclick or onmouseover event on the small images, and update the src value of the big image.
See this for reference: http://www.w3schools.com/js/tryit.asp?filename=tryjs_intro_lightbulb
If you want to easily add more images in the future, then you might want a slider with custom pager.
If you are comfortable with jQuery, I recommend this plugin because it is fairly easy to use:
http://jquery.malsup.com/cycle2/
(Check out the carousel pager demo)
Good luck!
Try using css :hover , :nth-of-type() , :not() , general siblings selector
img:not(.lg) {
width:50px;
height: 50px;
}
img.lg {
width:160px;
height:160px;
background-image:url(http://placehold.it/160/ff0000/ffffff);
}
img:nth-of-type(1) {
background-image:url(http://placehold.it/50/ff0000/ffffff);
}
img:nth-of-type(2) {
background-image:url(http://placehold.it/50/00ff00/ffffff);
}
img:nth-of-type(3) {
background-image:url(http://placehold.it/50/0000ff/ffffff);
}
img:nth-of-type(1):hover ~ .lg {
background-image:url(http://placehold.it/160/ff0000/ffffff);
}
img:nth-of-type(2):hover ~ .lg {
background-image:url(http://placehold.it/160/00ff00/ffffff);
}
img:nth-of-type(3):hover ~ .lg {
background-image:url(http://placehold.it/160/0000ff/ffffff);
}
<img /> <img /> <img /> <br />
<img class="lg" />
After dropping the top three boxes onto the car, I would like to change the car image.
Does anyone know a way where I can specify after all the boxes are dropped it triggers an event to change the car image?
HTML code for car image
<div id="car">
<img name="car" src="http://www.danconveys.com/wp-content/uploads/2014/04/car-complete_1.png" width="440" height="154" alt="">
</div>
#car {
position:absolute;
left:46px;
top:160px;
width:430px;
height:128px;
z-index:7;
}
Here is the image that I want it changing to:
http://www.danconveys.com/wp-content/uploads/2014/04/car_break.png
JS Fiddle: http://jsfiddle.net/dantest2014/9JTSQ/12/
Hope that someone can help!
Your JSFiddle looks almost correct. The two things you still need to do are (1) count the number of boxes dropped, and (2) trigger the new image.
Just add a counter to your drop function:
var NUM_BOXES = 4,
dropped = 0;
function drop (event, ui) {
if (++dropped === NUM_BOXES) {
$('#car > img').attr('src', '.../car_break.png');
}
}
One thing that may be a typo in your current jsfiddle, you're setting the src attribute on #car, but the image is inside that element. I've fixed that with the #car > img selector above.
I am pretty new to coding and have pieced some things together. I am trying to make an on hover gif start. The original image is static and when you hover the gif starts to play. I got that working fine but I want an overlay over the static image, like a "hover me" button essentially. When I hover over the overlay it wont start the gif because I am not hovering over the static image. When I do a hover display:none for the overlay it just flickers.
Here is a link to what I have so far:
<div class="container">
<div class="overlay">TEST </div>
<img src="http://fdfranklin.com/gif1.jpg" alt="" id="static">
</div>
(New to stackoverflow so not sure how to show css/JS here is a jsfiddle link)
http://jsfiddle.net/T6GEn/
If you get rid of the overlay div the gif properly plays on hover. I essentially want it just like it is now, you hover and the overlay fades out and starts playing the gif.
Any ideas? All help, greatly appreciated.
You are never hiding the overlay div, and therefore not hovering the gif. Just set the start for when you hover the overlay:
$(document).ready(function()
{
$(".overlay").hover(
function()
{
$('#static').attr("src", "http://i.imgur.com/ytWYljT.gif");
},
function()
{
$('#static').attr("src", "http://fdfranklin.com/gif1.jpg")
}
);
});
Fiddle
I would do the following. Instead of having only one img, create two, one static and one animated. Hide the animated image by default and only show when you're hovering over the overlay. E.g.
<div class="container">
<div class="overlay"><p>TEST</p> </div>
<img src="http://fdfranklin.com/gif1.jpg" alt="" id="static">
<img src="http://i.imgur.com/ytWYljT.gif" alt="" id="animated" style="display: none;">
</div>
and then
$(".overlay").hover(
function()
{
$("#static").hide();
$("#animated").show();
},
function()
{
$("#static").show();
$("#animated").hide();
}
);
Your issue is that the "hover" event is happening to the OVERLAY div, instead of the #static image now. You'll want to change your JS accordingly:
$('.overlay).hover();
See here for a complete solution: JSFiddle
You could do something like this:
$(".container").hover(
function(){
$(".overlay").fadeOut(300);
$(this).find("img").attr("src", "http://i.imgur.com/ytWYljT.gif");
},
function() {
$(this).find("img").attr("src", "http://fdfranklin.com/gif1.jpg");
$(".overlay").fadeIn(300);
}
);
JSFiddle Demo
Basically, when hovering over an image, I'd like to move the image slightly and then on mouseout, return the image to the original location. I've got a version of the code that works to accomplish this task but there is a bit of a "stuttering" effect if the user was to move the mouse from the image into the area where the image was located originally.
-----
| |
----- |img|
| | | |
|img| ==> -----
| | xxxxx
----- xxxxx
In the diagram above, when the mouse hovers over the image, it gets nudged up 2 units. On mouseout, the image returns to the original position. My code, as below, works but when the mouse gets moved into the previously vacated area (e.g., the x's), the code thinks that it's hovering over the image again and then moves the image back up 2 units. This creates a sort of stuttering effect when hovering the mouse over the area marked by x above.
I've tried different approaches (e.g., using animate(), adding/removing a wrapper div, using setTimeout(), etc) but they all produce the same undesired effect. I considered constantly monitoring the mouse position on the page and remembering the position of the image, but that seems excessive, esp since there could be anywhere between 1 and n images.
$(document).ready(function() {
$('.hoverImage').hover(
function(){
$(this).offset({'top':$(this).offset().top-2});
},
function(){
$(this).offset({'top':$(this).offset().top+2});
}
);
});
Here is a jsfiddle demo-ing the issue: http://jsfiddle.net/Ut8eK/
Any tips would be much appreciated. Thanks in advance!
Update
Awesome. I ended up using a bit of both answers:
$(document).ready(function() {
$('.hoverImage').wrap('<div class="hoverImageWrapper" style="display: inline-block;">');
$('.hoverImageWrapper').hover(
function(){
$('.hoverImage',this).offset({'top':$(this).offset().top-10});
},
function(){
$('.hoverImage',this).offset({'top':$(this).offset().top});
}
);
});
Here's a jsfiddle of the above: http://jsfiddle.net/rf5mE/
This works great for my needs, since adding the functionality will be super easy just by adding class="hoverImage" to the appropriate images.
I accepted #Matyas as the answer only because his answer came through first (by about 4 seconds!).
Thanks y'all!
You should put your images in a wrapper, and listen to the hover in the wrapper, which doesn't change its position. This way you should get a constant effect
EDIT:
The problem is that the image moves lower on mouseout than the size of the div (original size of the image) Solution: add a 10px bottom padding to the div, in the case the image moves 10px lower, to still have a div in its background if it's hovered. (updated link)
TY Huangism for the notification
Update example:
HTML
<br />
<div>< img src="http://placekitten.com/120/100" class="hoverImage" /></div>
<div>< img src="http://placekitten.com/100/100" class="hoverImage" /></div>
<div>< img src="http://placekitten.com/110/100" class="hoverImage" /></div>
JS
$(document).ready(function() {
$('div').hover(
function(){
//search for the image inside the wrapper (reffered to by this)
$('.hoverImage', this).offset({'top':$(this).offset().top-10});
},
function(){
$('.hoverImage', this).offset({'top':$(this).offset().top+10});
}
);
});
CSS:
div{
display: inline-block;
}
div:hover{
padding-bottom: 10px;
}
Put a wrapper on it and target the wrapper to move the image
http://jsfiddle.net/Ut8eK/4/
HTML
<div class="hoverImage"><img src="http://placekitten.com/120/100" /></div>
JS
$(document).ready(function() {
$('.hoverImage').hover(
function(){
var $img = $(this).find('img');
$img.offset({'top':$img.offset().top-10});
},
function(){
var $img = $(this).find('img');
$img.offset({'top':$img.offset().top+10});
}
);
});
for multiple divs you do need the inline-block css
I'm putting an image on html5 canvas.
myString = '<img id="img1" class="link1" src = 'img/icon1.png'></img>';
$('#main1' ).append(myString);
$('#main1' + '-link1').fadeIn('slow');
$(".link1").click(function () {
window.location.href = url1;
});
$(".link1").hover(function () {
$('#myDiv').show();
}, function () {
$('#myDiv').hide();
});
The div is :
<div id="myDiv" style="display:none;border: 1px solid black;width: 10px;height:5px;padding: 1px;">
<p>Hello</p>
</div>
Now, on mouse hover the div appears at end of the page. I need it to appear just below the image. How can I achieve that?
That depends on the positioning of your 'myDiv' div.
You could just use the <img title="my tooltip text" /> if it's just text in your tooltip.
You can use pageX , pageY from event object to position the div on below the image .
Please try this link to get the solution http://jsfiddle.net/ZpGS3/14/ .
To apply Tooltip on mouseover you should use
$('#img1').mouseover(function(){
$(this).attr('title','MY Image Title');
});
You may try a jQuery plugin called TipTip:
http://code.drewwilson.com/entry/tiptip-jquery-plugin
You'll see it's very easy to use and the design is quite great :).
You can go to the link and have a try to see if you like it or not.
Considering your example, in order to display the TipTip's tooltip, you'll simply have to do the following:
Include TipTip's CSS and JS file references
Put some JS: $("#img1").tipTip();
Put your tooltip's content inside the title option of your image:
For example: <img id="img1" title="<p>Hello</p>"/>