Develop Reference

Images are not trailing mouse

I am trying to make an image get attached to the mouse and it isn't showing up correctly when I hover over the image. I need to make it so that the image preview that is trailing the mouse and is larger on the mouse preview.Could you please help me?
Here is the fiddle:
https://jsfiddle.net/pgyt1qpg/1/
here is the code:
document.querySelector('.container').addEventListener('mouseover', function(e) {
e.preventDefault();
if (e.target.tagName === 'IMG') {
//create the div tag for preview
var myElement = document.createElement('div');
myElement.className = 'preview';
e.target.parentNode.appendChild(myElement);
//Create the image element for preview
var myImg = document.createElement('img');
var imgLoc = e.target.src;
myImg.src = imgLoc;
myElement.style.left = e.offsetX + 15 + 'px';
myElement.style.top = e.offsetY + 15 + 'px';
myImg.style.width = "500px";
myImg.style.height = "500px";
myElement.style.zIndex = "-1";
myElement.appendChild(myImg);
//When mouse goes out of the image delete the preview
e.target.addEventListener('mouseout', function handler(d) {
var myNode = d.target.parentNode.querySelector('div.preview');
myNode.parentNode.removeChild(myNode);
e.target.removeEventListener('mouseout', handler, false);
}, false);
//place the image 15 inches to the bottom, right of the mouse
e.target.addEventListener('mousemove', function(f) {
myElement.style.left = f.offsetX + 15 + 'px';
myElement.style.top = f.offsetY + 15 + 'px';
});
}
}, false);
UPDATE:
I have updated the fiddle (many thanks to peter) and the image is on the right side now. I just need to make it closer to the mouse. How do I go about doing that?

Problem 1: Getting the hover preview to follow the mouse.
Solution: Add relative or absolute positioning.
myElement.style.position = 'absolute';
Problem 2: Getting the hover preview to appear above the thumbnails.
Solution (creates new problem though): Raise z-index to 2.
This will create the problem of the hover preview interrupting the hover event over the thumbnail when it appears. You can solve this by checking the mouse coordinates in the mouseout event and seeing if they are actually outside the bounds of the selected triggered thumbnail. If they are not, you cancel the preview close because it's just the interruption. There are other ways to do it but you seem comfortable with the coordinates so that's what came to mind.
Also, you need to adjust the mouse tracking coordinates to make it line up with the actual cursor better. That should get you moving, feel free to update the Fiddle and ask if there's more problems.

I can't comment.. But to answer your last question in the answer's comments I believe you are going to have to do something like this.
You will have to reload the image to get the original size.

KineticJS Select shape and display div directly below it

I am using KineticJS to draw shapes on a canvas. When a shape is clicked, I would like to overlay a div directly below the selected shape. This will allow the user to change some properties (text, colour etc).
I am handling the click event like this and this is working fine
myShape.on('click', function () {
alert('clicked');
});
So rather than just alerting, I would like to show a div just below the selected shape.
I am not sure how to go about this with positioning a div at a point within the stage.
Many thanks

image.on('click', function() {
var input = document.createElement('input');
input.style.position = 'absolute';
input.style.top = image.y() + 'px';
input.style.left = image.x() + 'px';
document.body.appendChild(input);
});
http://jsbin.com/reqile/2/edit?js,output

Fire function after each image is loaded

I am trying to fill a div with images and size the images to fit just right in their place. The problem is that when the image is not loaded, the dimensions x , y cannot be sampled from the element. This is what I am trying to do after looking up some examples on stack overflow. It does not work...
$.each(data.data.children, function(i,item){
// Some images come in with a busted link. Hence the IF statement...
if (item.data.url.indexOf(".jpg")>0){
var imgTitle = item.data.title;
imgTitle = imgTitle;
$('<div id="c'+i+'"></div>').attr("class", "imgDiv").appendTo("#photos");
$("<img/>").attr("src", item.data.url).attr("id", "pic"+i).attr("class", "pics").appendTo("#c"+i);
.load(function(){
$(this).fadein("slow");
if (iWidth>iHeight){
$('#pic'+i).width(270);
$('#pic'+i).height(parseInt(270-imgTitle.length/3));
}
});
$("<p>"+imgTitle+"</p>").attr("id", "p"+i).appendTo("#c"+i);
$("<img/>").attr("src", "images/RedX2.png").attr("class", "xit").appendTo("#c"+i);
var mImg = $('#pic'+i)[0];
}
});
Alternatively, is there a way to do proportional fitting of an image inside the padding space proportionally?
TIA
DK

You might not need any javascript at all. See this post for a way to use CSS to have the image automatically size to the div that contains it.
How do I auto-resize an image to fit a div container

Javascript - Image change an resize to full background

As a quick explanation, I created an image that resizes to fill the background using this function which works great:
function resize_bg(element_id){
$("#"+element_id).css("left","0");
var doc_width = $(window).width();
var doc_height = $(window).height();
var image_width = $("#"+element_id).width();
var image_height = $("#"+element_id).height();
var image_ratio = image_width/image_height;
var new_width = doc_width;
var new_height = Math.round(new_width/image_ratio);
if(new_height<doc_height){
new_height = doc_height;
new_width = Math.round(new_height*image_ratio);
var width_offset = Math.round((new_width-doc_width)/2);
$("#"+element_id).css("left","-"+width_offset+"px");
}
$("#"+element_id).width(new_width);
$("#"+element_id).height(new_height);
return true;
}
So no problem for the full background image. The problem appears, when I change the image source using Javascript. In other words, I have 1 image set as background but on hover of certain elements on the page, the image changes but it doesn't change the resize right. So the first image on load is resized and positioned correctly, but when I switch the image using .attr('src',newimg) the image is not resized correctly even though I call the function again.
Here is the code I use to change the image and resize it:
$('#menu_work li a').hover(function(){
$('#content').hide();
var img_src = $(this).next('img').attr('src');
$('#full_screen_img').attr('src', img_src );
resize_bg();
$('#full_screen_img').show();
},function(){
$('#full_screen_img').hide();
$('#content').show();
});
Thanks for any help.

It appears that you have left out the element_id argument when calling resize_bg() in the hover event handler. As a result, resize_bg() can't find the element you want to resize.

#maxedison is right, you forgot to pass the element id.
Another problem is that when you change the src, the new image might not be loaded yet, so you won't get the right dimensions in resize_bg until it is.
In that case you'll need to resize the image once it's loaded:
$('#full_screen_img').attr('src', img_src ).load(function() {
resize_bg('<ELEMENT_ID>');
});
resize_bg('<ELEMENT_ID>');
On another note, I'd recommend you change resize_bg to get a jQuery object instead of an id, or even write a plugin ($.fn.resize_bg) if it's a functionality you want to use often.

How can I work around reloading these images?

I have a simple jQuery image changer, that when you hover over it will make swap all images with their grey version except the one you are on, that one will stay colour (They are all colour to begin with) and when you hover over another image, the last image gets changed to grey and the new one gets changed to colour.
However on IE, when you hover through the images, because it is changing the src IE will display the coloured version for a split second before doing what it is supposed to.
Here is the code:
$(window).load(function() {
//when mouse over the list item...
$('#portfolio ul li').hover(function(){
$(this).find('img').addClass('active');
$(this).siblings().each(function(Idx){
var imgSrc = ""+$(this).find('img').attr('src');
var imgGS = ""+$(this).find('a').attr('rel');
$(this).find('img').attr('src', imgGS);
$(this).find('a').attr('rel', imgSrc);
//alert (imgSrc + " " + imgGS);
});
//when mouse leave...
}, function(){
$(this).find('img').removeClass('active');
$(this).siblings().each(function(Idx){
var imgGS = $(this).find('img').attr('src');
var imgSrc = $(this).find('a').attr('rel');
$(this).find('a').attr('rel',imgGS);
$(this).find('img').attr('src', imgSrc);
//alert (imgSrc + " " + imgGS);
});
});
//when mouse leaves the unordered list...
$('#portfolio ul').bind('mouseleave',function(){
$(this).siblings().each(function(Idx){
var imgSrc = $(this).find('img').attr('src');
var imgGS = $(this).find('a').attr('rel');
$(this).find('img').attr('src', imgSrc);
$(this).find('a').attr('rel',imgGS);
// alert (imgSrc + " " + imgGS);
});
});
});
Any help would be appreciated :)
Thanks.

Try using image sprites for this. This involves putting both grey and colour in the same image and then instead of changing the source you simply change which part of the image gets shown. The solves the problem of your browser having to load images on the fly as they will already be loaded.

You could display the color image as a regular <img> and then the gray version is the css background. On hover, fade it's siblings img's out.
Something like
​$('.yourList li').hover(function() {
$(this).siblings().find('img').hide();
},function() {
$(this).siblings().find('img').show();
});​​​​​​​​​​​​​​​
Just make sure you either have content keeping that li from collapsing, or you manually set the dimensions.

Pixastic for catering to standards compliant browsers and css filters for IE should do the trick. dont need multiple images
http://www.pixastic.com/lib/download/