Trigger change of image after dropping three objects - javascript

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.

Related

4 Images in HTML, need help to show the small picture when hovered in the large picture

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" />

floating div object in javascript

We are using some short code for the display of images on a google maps V3 page. These are static images (not on the map) but in div's.
function CoffiControl(controlDiv) {
var logo = document.createElement('IMG');
logo.src = '../images/coffi.png';
logo.style.height = '350px';
logo.style.cursor = 'pointer';
logo.setAttribute('class', 'floatlegenda');
controlDiv.appendChild(logo);
}
var logoControlDiv = document.createElement('DIV');
var logoControl = CoffiControl(logoControlDiv);
map.controls[google.maps.ControlPosition.RIGHT_CENTER].push(logoControlDiv);
We have maximal 5 of these images what are 350px height and about 90px width. So the images must be appear next to each other but our output shows us they are under each other. They would be toggled by buttons.
.floatlegenda {
float:right;
}
As you can see we have put an css class in the script "floatlegenda" that should float the images right, but we use for every image the above script so i think the images come in seperate div's.
Now my question is how can we arrange this to work that every time a button is toggled the new image appear next to the other?
EDIT
Found solution myself!
Just add other images in the same function with unique child names did the trick.
I think you need to check that all of your floatlegenda are within the same container and that they are all float: right. Also, check the width of that container.
This should work. Also, check your output by inspecting the elements. See if the html you're trying to generate is actually what's being generated.
.container {
display:block;
}
.floatlegenda {
width:90px;
height: 350px;
float:right:
}
<div class="container">
<img class="floatlegenda" src="" />
<img class="floatlegenda" src="" />
<img class="floatlegenda" src="" />
</div>

Stuttering on mouseout of moved image element

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

Show bigger image on thumbnail's hover

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.

mouseout set previus returns previous bg image of div

all.
I have.
<div id="imagecontainer" class="header-image-container"> </div>
BG image are specified in css for ich page according on parent class.
.category-1 #imagecontainer {
background: url(_/images/1.jpg);
}
And i have menu. I want to chage BG image ommouse over, and on mouse out return image specified in css for this page according on parent class. I think it could be real using JQuery. For example we have opened category-3 page and move mouse on category-1 menu item and see catefory-1 BG image in #imagecontainer, and then we move mouse out see again category-3 BG image.
I think this will do you want:
$('#menu').mouseenter(function() {
$('#imagecontainer').css({'background':'blue'});
}).mouseleave(function() {
$('#imagecontainer').removeAttr('style');
})
You can see it in action here: http://jsfiddle.net/Cdzk8/
If you have other inline styles on your imagecontainer, it will also remove those on mouseleave. In that case, you will have do something more like what mblase75 is recommending.
Store the current background image as data before swapping it out, and retrieve it from there when you want to swap it back.
$('#imagecontainer').mouseover(function() {
$(this).data('bgimg') = $(this).css('background-image');
$(this).css('background-image','url(my/new/url.jpg)');
}).mouseout(function() {
$(this).css('background-image', $(this).data('bgimg'));
});

Categories

Resources