Develop Reference

Add 2-3 images in the mouse hover effect

I have made this code for mouse hover zoom effect and it is working without error. But I want to add 2-3 images so as the user clicks on it, then that image is shown and mouse hover effect works on it, i.e. on hovering the mouse on the picture shows a zoom effect.
Here is my code:
function imageZoom(imgID, resultID) {
var img, lens, result, cx, cy;
img = document.getElementById(imgID);
result = document.getElementById(resultID);
/*create lens:*/
lens = document.createElement("DIV");
lens.setAttribute("class", "img-zoom-lens");
/*insert lens:*/
img.parentElement.insertBefore(lens, img);
/*calculate the ratio between result DIV and lens:*/
cx = result.offsetWidth / lens.offsetWidth;
cy = result.offsetHeight / lens.offsetHeight;
/*set background properties for the result DIV:*/
result.style.backgroundImage = "url('" + img.src + "')";
result.style.backgroundSize = (img.width * cx) + "px " + (img.height * cy) + "px";
/*execute a function when someone moves the cursor over the image, or the lens:*/
lens.addEventListener("mousemove", moveLens);
img.addEventListener("mousemove", moveLens);
/*and also for touch screens:*/
lens.addEventListener("touchmove", moveLens);
img.addEventListener("touchmove", moveLens);
/*initialise and hide lens result*/
result.style.display = "none";
/*Reveal and hide on mouseover or out*/
lens.onmouseover = function(){result.style.display = "block";};
lens.onmouseout = function(){result.style.display = "none";};
function moveLens(e) {
var pos, x, y;
/*prevent any other actions that may occur when moving over the image:*/
e.preventDefault();
/*get the cursor's x and y positions:*/
pos = getCursorPos(e);
/*calculate the position of the lens:*/
x = pos.x - (lens.offsetWidth / 2);
y = pos.y - (lens.offsetHeight / 2);
/*prevent the lens from being positioned outside the image:*/
if (x > img.width - lens.offsetWidth) {x = img.width - lens.offsetWidth;}
if (x < 0) {x = 0;}
if (y > img.height - lens.offsetHeight) {y = img.height - lens.offsetHeight;}
if (y < 0) {y = 0;}
/*set the position of the lens:*/
lens.style.left = x + "px";
lens.style.top = y + "px";
/*display what the lens "sees":*/
result.style.backgroundPosition = "-" + (x * cx) + "px -" + (y * cy) + "px";
}
function getCursorPos(e) {
var a, x = 0, y = 0;
e = e || window.event;
/*get the x and y positions of the image:*/
a = img.getBoundingClientRect();
/*calculate the cursor's x and y coordinates, relative to the image:*/
x = e.pageX - a.left;
y = e.pageY - a.top;
/*consider any page scrolling:*/
x = x - window.pageXOffset;
y = y - window.pageYOffset;
return {x : x, y : y};
}
};
imageZoom("myimage", "myresult");
* {box-sizing: border-box;}
.img-zoom-container {
position: relative;
display: flex;
}
.img-zoom-lens {
position: absolute;
border: 1px solid #d4d4d4;
/*set the size of the lens:*/
width: 40px;
height: 40px;
}
.img-zoom-result {
border: 1px solid #d4d4d4;
position: absolute;
left: 300px; /*match width of #myimage*/
/*set the size of the result div:*/
width: 300px;
height: 300px;
}
<h1>Image Zoom</h1>
<p>Mouse over the image:</p>
<div class="img-zoom-container">
<img id="myimage" src="https://hatrabbits.com/wp-content/uploads/2018/10/risky-assumptions.jpg" width="300" height="240">
<div id="myresult" class="img-zoom-result" style=""></div>
</div>
<p>The image must be placed inside a container with relative positioning.</p>
<p>The result can be put anywhere on the page, but must have the class name "img-zoom-result".</p>
<p>Make sure both the image and the result have IDs. These IDs are used when a javaScript initiates the zoom effect.</p>
I was searching for the answer and hope here i will get the solution.
Thank you in advance.

Just add more picture like this:
<div class="img-zoom-container">
<img id="myimage" src="https://hatrabbits.com/wp-content/uploads/2018/10/risky-assumptions.jpg" width="300" height="240">
<div id="myresult" class="img-zoom-result" style=""></div>
</div>
<div class="img-zoom-container">
<img id="myimage2" src="https://hatrabbits.com/wp-content/uploads/2018/10/risky-assumptions.jpg" width="300" height="240">
<div id="myresult2" class="img-zoom-result" style=""></div>
</div>
<div class="img-zoom-container">
<img id="myimage3" src="https://hatrabbits.com/wp-content/uploads/2018/10/risky-assumptions.jpg" width="300" height="240">
<div id="myresult3" class="img-zoom-result" style=""></div>
</div>
Then add more calling function
imageZoom("myimage", "myresult");
imageZoom("myimage2", "myresult2");
imageZoom("myimage3", "myresult3");
;)

img {
height: 100px;
width: 200px;
background-color: blue;
}
img:hover {
height: 200px;
width: 400px;
background-color: red;
}
<img src="">
no need for JS to have a hover effect on an image. You can do that purely with CSS by adding :hover to its class/id.

Image Zoom not displayed

sorry for my English..
I to try this javascript code from w3schools.
The difference output between mine and them is that I want my result display on the same window.
How have the code;
Top above;
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.min.js"> </script>
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
In Style,
* {box-sizing: border-box;}
.grosse-bild {
position: relative;
}
.img-zoom-lens {
position: absolute;
border: 1px solid #d4d4d4;
/*set the size of the lens:*/
width: 40px;
height: 40px;
}
.grosse-bild .kleine-fenster {
border: 1px solid #d4d4d4;
/*set the size of the result div:*/
width: 300px;
height: 300px;
}
.grosse-bild { padding: 40px; background-color: #dedee0; width: 53.7%; }
.kleine-fenster{
width: 50%;
border: none;
padding-top: 5px;
display: block;
margin-left: auto;
margin-right: auto;
}
The Javascript code,
<script>
// Initiate zoom effect:
imageZoom("myresult", "myimage");
</script>
and
function imageZoom(resultID, imgID) {
var img, lens, result, cx, cy;
img = document.getElementById(imgID);
result = document.getElementById(resultID);
/*create lens:*/
lens = document.createElement("DIV");
lens.setAttribute("class", "img-zoom-lens");
/*insert lens:*/
img.parentElement.insertBefore(lens, img);
/*calculate the ratio between result DIV and lens:*/
cx = result.offsetWidth / lens.offsetWidth;
cy = result.offsetHeight / lens.offsetHeight;
/*set background properties for the result DIV:*/
result.style.backgroundImage = "url('" + img.src + "')";
result.style.backgroundSize = (img.width * cx) + "px " + (img.height * cy) + "px";
/*execute a function when someone moves the cursor over the image, or the lens:*/
lens.addEventListener("mousemove", moveLens);
img.addEventListener("mousemove", moveLens);
/*and also for touch screens:*/
lens.addEventListener("touchmove", moveLens);
img.addEventListener("touchmove", moveLens);
function moveLens(e) {
var pos, x, y;
/*prevent any other actions that may occur when moving over the image:*/
e.preventDefault();
/*get the cursor's x and y positions:*/
pos = getCursorPos(e);
/*calculate the position of the lens:*/
x = pos.x - (lens.offsetWidth / 2);
y = pos.y - (lens.offsetHeight / 2);
/*prevent the lens from being positioned outside the image:*/
if (x > img.width - lens.offsetWidth) {x = img.width - lens.offsetWidth;}
if (x < 0) {x = 0;}
if (y > img.height - lens.offsetHeight) {y = img.height - lens.offsetHeight;}
if (y < 0) {y = 0;}
/*set the position of the lens:*/
lens.style.left = x + "px";
lens.style.top = y + "px";
/*display what the lens "sees":*/
result.style.backgroundPosition = "-" + (x * cx) + "px -" + (y * cy) + "px";
}
function getCursorPos(e) {
var a, x = 0, y = 0;
e = e || window.event;
/*get the x and y positions of the image:*/
a = img.getBoundingClientRect();
/*calculate the cursor's x and y coordinates, relative to the image:*/
x = e.pageX - a.left;
y = e.pageY - a.top;
/*consider any page scrolling:*/
x = x - window.pageXOffset;
y = y - window.pageYOffset;
return {x : x, y : y};
}
}
The Html Code,
<div class="container">
<div class="grosse-bild">
<div class="kleine-fenster" id="myresult" >
<img src="/kalamulur/Taschen-&-Rucksäcke/Rucksäcke/fenster/photo/113.jpg" width=280 height=280 class="window" id="myimage">
</div>
</div>
</div>
Here to show it..
That problem of this code is that it does nothing...
Can please someone help and say to me where is my mistake?

How do I apply my magnifier on multple images on a single page?

// magnify hover
function magnify(imgID, zoom) {
var img, glass, w, h, bw;
img = document.getElementById(imgID);
/*create magnifier glass:*/
glass = document.createElement("DIV");
glass.setAttribute("class", "img-magnifier-glass");
/*insert magnifier glass:*/
img.parentElement.insertBefore(glass, img);
/*set background properties for the magnifier glass:*/
glass.style.backgroundImage = "url('" + img.src + "')";
glass.style.backgroundRepeat = "no-repeat";
glass.style.backgroundSize = (img.width * zoom) + "px " + (img.height * zoom) + "px";
bw = 3;
w = glass.offsetWidth / 2;
h = glass.offsetHeight / 2;
/*execute a function when someone moves the magnifier glass over the image:*/
glass.addEventListener("mousemove", moveMagnifier);
img.addEventListener("mousemove", moveMagnifier);
/*and also for touch screens:*/
glass.addEventListener("touchmove", moveMagnifier);
img.addEventListener("touchmove", moveMagnifier);
function moveMagnifier(e) {
var pos, x, y;
/*prevent any other actions that may occur when moving over the image*/
e.preventDefault();
/*get the cursor's x and y positions:*/
pos = getCursorPos(e);
x = pos.x;
y = pos.y;
/*prevent the magnifier glass from being positioned outside the image:*/
if (x > img.width - (w / zoom)) {x = img.width - (w / zoom);}
if (x < w / zoom) {x = w / zoom;}
if (y > img.height - (h / zoom)) {y = img.height - (h / zoom);}
if (y < h / zoom) {y = h / zoom;}
/*set the position of the magnifier glass:*/
glass.style.left = (x - w) + "px";
glass.style.top = (y - h) + "px";
/*display what the magnifier glass "sees":*/
glass.style.backgroundPosition = "-" + ((x * zoom) - w + bw) + "px -" + ((y * zoom) - h + bw) + "px";
}
function getCursorPos(e) {
var a, x = 0, y = 0;
e = e || window.event;
/*get the x and y positions of the image:*/
a = img.getBoundingClientRect();
/*calculate the cursor's x and y coordinates, relative to the image:*/
x = e.pageX - a.left;
y = e.pageY - a.top;
/*consider any page scrolling:*/
x = x - window.pageXOffset;
y = y - window.pageYOffset;
return {x : x, y : y};
}
}
/* Initiate Magnify Function
with the id of the image, and the strength of the magnifier glass:*/
magnify("mag", 5);
* {box-sizing: border-box;}
.img-magnifier-container {
position:relative;
}
.img-magnifier-glass {
position: absolute;
z-index: 3;
border: 1px solid #000;
border-radius: 20%;
cursor: none;
/*Set the size of the magnifier glass:*/
width: 120px;
height: 130px;
opacity:0;
pointer-events:none;
}
a:hover .img-magnifier-glass{
opacity:1;
pointer-events:initial;
}
<table class="img-magnifier-container" width="115" border="0" cellpadding="0" cellspacing="0" style="display: inline-block"><tr><td width="115" style="text-align: center"><center><img class="cover" width="115" height="133" border="0" id="mag" class="pstrart" id="pstr" src="https://images2.static-bluray.com/movies/covers/238380_front.jpg" style=""></center><center><input type="checkbox" name="movieboxes" value="Ant-Man" style="width: 15px; height: 15px; margin: 0px;">
<img title="United Kingdom" border="2" class="flag" id="flgborder" src="https://cdn.discordapp.com/attachments/530906893443399683/665554365897244693/union-jack-26119_960_720.png" style="width: 25px; height: 17px;">
</center></td></tr></table>
<table class="img-magnifier-container" width="115" border="0" cellpadding="0" cellspacing="0" style="display: inline-block"><tr><td width="115" style="text-align: center"><center><img class="cover" width="115" height="133" border="0" id="mag" class="pstrart" id="pstr" src="https://images2.static-bluray.com/movies/covers/202637_front.jpg" style=""></center><center><input type="checkbox" name="movieboxes" value="A Quiet Place" style="width: 15px; height: 15px; margin: 0px;">
<img title="United Kingdom" border="2" class="flag" id="flgborder" src="https://cdn.discordapp.com/attachments/530906893443399683/665554365897244693/union-jack-26119_960_720.png" style="width: 25px; height: 17px;">
</center></td></tr></table>
Hello,
I recently made a magnifier on hover using the help from people on this website. However, I don't konw how to make it so I can have the magnifier on all the images instead of just the first one. I provided two images in the snippet on this post so you can see what I mean.
Thank you for any information!

To further elabourate on my comment: the main issue is that:
You have duplicate IDs and duplicate attributes in multiple elements on your page. You should always use unique IDs within a document, and instead of having multiple class attributes per element, you should combine them into one.
You are initializing the magnify logic on a single element. You are lacking iterative logic to step through all the images that you want to magnify.
My suggestion is that:
Fix the DOM mistakes as stated above. Also, give your image elements that you want to magnify a common class, so we can select all of them. Example is class="magnify-image", but you can use any arbitrary class names that you want.
You update the magnify() method to accept an image element instead of an ID: that will mean that our iterative logic can pass in the image element you want to magnify directly. Rewriting it to be function magnify(img, zoom) { ... } and then remove the var img = ... assignment is sufficient.
You give each image you want to magnify a class, and then select for all these images to create a HTMLCollection. Iterate through this collection and simply pass the image element in each iteration as the first argument.
Example of iterative logic:
// Iterate through all images you want to magnify
const images = document.querySelectorAll('.magnify-image');
Array.from(images).forEach((image) => {
// We pass the actual image element into the function
magnify(image, 5);
});
If you absolutely have to support ES5, then we can do this:
var images = document.getElementsByClassName('magnify-image');
Array.prototype.forEach.call(images, function(image) {
// We pass the actual image element into the function
magnify(image, 5);
});
See proof-of-concept:
// magnify hover
function magnify(img, zoom) {
var glass, w, h, bw;
/*create magnifier glass:*/
glass = document.createElement("DIV");
glass.setAttribute("class", "img-magnifier-glass");
/*insert magnifier glass:*/
img.parentElement.insertBefore(glass, img);
/*set background properties for the magnifier glass:*/
glass.style.backgroundImage = "url('" + img.src + "')";
glass.style.backgroundRepeat = "no-repeat";
glass.style.backgroundSize = (img.width * zoom) + "px " + (img.height * zoom) + "px";
bw = 3;
w = glass.offsetWidth / 2;
h = glass.offsetHeight / 2;
/*execute a function when someone moves the magnifier glass over the image:*/
glass.addEventListener("mousemove", moveMagnifier);
img.addEventListener("mousemove", moveMagnifier);
/*and also for touch screens:*/
glass.addEventListener("touchmove", moveMagnifier);
img.addEventListener("touchmove", moveMagnifier);
function moveMagnifier(e) {
var pos, x, y;
/*prevent any other actions that may occur when moving over the image*/
e.preventDefault();
/*get the cursor's x and y positions:*/
pos = getCursorPos(e);
x = pos.x;
y = pos.y;
/*prevent the magnifier glass from being positioned outside the image:*/
if (x > img.width - (w / zoom)) {
x = img.width - (w / zoom);
}
if (x < w / zoom) {
x = w / zoom;
}
if (y > img.height - (h / zoom)) {
y = img.height - (h / zoom);
}
if (y < h / zoom) {
y = h / zoom;
}
/*set the position of the magnifier glass:*/
glass.style.left = (x - w) + "px";
glass.style.top = (y - h) + "px";
/*display what the magnifier glass "sees":*/
glass.style.backgroundPosition = "-" + ((x * zoom) - w + bw) + "px -" + ((y * zoom) - h + bw) + "px";
}
function getCursorPos(e) {
var a, x = 0,
y = 0;
e = e || window.event;
/*get the x and y positions of the image:*/
a = img.getBoundingClientRect();
/*calculate the cursor's x and y coordinates, relative to the image:*/
x = e.pageX - a.left;
y = e.pageY - a.top;
/*consider any page scrolling:*/
x = x - window.pageXOffset;
y = y - window.pageYOffset;
return {
x: x,
y: y
};
}
}
// Iterate through all images you want to magnify
const images = document.querySelectorAll('.magnify-image');
Array.from(images).forEach((image) => {
magnify(image, 5);
});
* {
box-sizing: border-box;
}
.img-magnifier-container {
position: relative;
}
.img-magnifier-glass {
position: absolute;
z-index: 3;
border: 1px solid #000;
border-radius: 20%;
cursor: none;
/*Set the size of the magnifier glass:*/
width: 120px;
height: 130px;
opacity: 0;
pointer-events: none;
}
a:hover .img-magnifier-glass {
opacity: 1;
pointer-events: initial;
}
<table class="img-magnifier-container" width="115" border="0" cellpadding="0" cellspacing="0" style="display: inline-block">
<tr>
<td width="115" style="text-align: center">
<center>
<img width="115" height="133" border="0" class="cover pstrart magnify-image" src="https://images2.static-bluray.com/movies/covers/238380_front.jpg" style="">
</center>
<center><input type="checkbox" name="movieboxes" value="Ant-Man" style="width: 15px; height: 15px; margin: 0px;">
<img title="United Kingdom" border="2" class="flag" src="https://cdn.discordapp.com/attachments/530906893443399683/665554365897244693/union-jack-26119_960_720.png" style="width: 25px; height: 17px;">
</center>
</td>
</tr>
</table>
<table class="img-magnifier-container" width="115" border="0" cellpadding="0" cellspacing="0" style="display: inline-block">
<tr>
<td width="115" style="text-align: center">
<center>
<img width="115" height="133" border="0" class="cover pstrart magnify-image" src="https://images2.static-bluray.com/movies/covers/202637_front.jpg" style="">
</center>
<center><input type="checkbox" name="movieboxes" value="A Quiet Place" style="width: 15px; height: 15px; margin: 0px;">
<img title="United Kingdom" border="2" class="flag" src="https://cdn.discordapp.com/attachments/530906893443399683/665554365897244693/union-jack-26119_960_720.png" style="width: 25px; height: 17px;">
</center>
</td>
</tr>
</table>

error magic zoom with javascript and html,css

My code contains five images, four of which are thumbnails,Are displayed by clicking in the main img tag
The problem is, besides changing the photo I want to zoom in but Whenever the photo changes,show zoom for the same photo
my code show result zoom just for fist img and i think it is related to js code this line buti am not sure and i cannot solve it
result.style.backgroundImage = "url('" + img.src + "')";
img in state of1
result zoom div not changing
<script>
function imageZoom(imgID, resultID) {
var img, lens, result, cx, cy;
img = document.getElementById(imgID);
result = document.getElementById(resultID);
/*create lens:*/
lens = document.createElement("DIV");
lens.setAttribute("class", "img-zoom-lens");
/*insert lens:*/
img.parentElement.insertBefore(lens, img);
/*calculate the ratio between result DIV and lens:*/
cx = result.offsetWidth / lens.offsetWidth;
cy = result.offsetHeight / lens.offsetHeight;
/*set background properties for the result DIV:*/
result.style.backgroundImage = "url('" + img.src + "')";
result.style.backgroundSize = (img.width * cx) + "px " + (img.height * cy) + "px";
/*execute a function when someone moves the cursor over the image, or the lens:*/
lens.addEventListener("mousemove", moveLens);
img.addEventListener("mousemove", moveLens);
/*and also for touch screens:*/
lens.addEventListener("touchmove", moveLens);
img.addEventListener("touchmove", moveLens);
function moveLens(e) {
var pos, x, y;
/*prevent any other actions that may occur when moving over the image:*/
e.preventDefault();
/*get the cursor's x and y positions:*/
pos = getCursorPos(e);
/*calculate the position of the lens:*/
x = pos.x - (lens.offsetWidth / 2);
y = pos.y - (lens.offsetHeight / 2);
/*prevent the lens from being positioned outside the image:*/
if (x > img.width - lens.offsetWidth) {x = img.width - lens.offsetWidth;}
if (x < 0) {x = 0;}
if (y > img.height - lens.offsetHeight) {y = img.height - lens.offsetHeight;}
if (y < 0) {y = 0;}
/*set the position of the lens:*/
lens.style.left = x + "px";
lens.style.top = y + "px";
/*display what the lens "sees":*/
result.style.backgroundPosition = "-" + (x * cx) + "px -" + (y * cy) + "px";
}
function getCursorPos(e) {
var a, x = 0, y = 0;
e = e || window.event;
/*get the x and y positions of the image:*/
a = img.getBoundingClientRect();
/*calculate the cursor's x and y coordinates, relative to the image:*/
x = e.pageX - a.left;
y = e.pageY - a.top;
/*consider any page scrolling:*/
x = x - window.pageXOffset;
y = y - window.pageYOffset;
return {x : x, y : y};
}
}
</script>
<script>
// Initiate zoom effect:
imageZoom("expandedImg", "myresult");
</script>
<script>
function myFunction(imgs) {
var expandImg = document.getElementById("expandedImg");
expandImg.src = imgs.src;
expandImg.parentElement.style.display = "block";
}
</script>
<style>
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: Arial;
}
/* The grid: Four equal columns that floats next to each other */
.column {
float: left;
width: 25%;
padding: 10px;
}
/* Style the images inside the grid */
.column img {
opacity: 0.8;
cursor: pointer;
}
.column img:hover {
opacity: 1;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* The expanding image container */
.container {
position: relative;
display: none;
}
/* Expanding image text */
#imgtext {
position: absolute;
bottom: 15px;
left: 15px;
color: white;
font-size: 20px;
}
/* Closable button inside the expanded image */
.closebtn {
position: absolute;
top: 10px;
right: 15px;
color: white;
font-size: 35px;
cursor: pointer;
}
</style>
<style>
* {box-sizing: border-box;}
.img-zoom-container {
position: relative;
}
.img-zoom-lens {
position: absolute;
border: 1px solid #d4d4d4;
/*set the size of the lens:*/
width: 40px;
height: 40px;
}
.img-zoom-result {
border: 1px solid #d4d4d4;
/*set the size of the result div:*/
width: 300px;
height: 300px;
}
</style>
<script>
<div class="img-zoom-container">
<img id="expandedImg" src="imgs/img4.jpg" width="300" height="240">
<div id="myresult" class="img-zoom-result"></div>
</div>
<div class="row">
<div class="column">
<img id="expandedImg" src="imgs/img5.jpg" alt="Nature" style="width:100%" onclick="myFunction(this);">
</div>
<div class="column">
<img src="imgs/img4.jpg" alt="Snow" style="width:100%" onclick="myFunction(this);">
</div>
<div class="column">
<img src="imgs/img3.jpg" alt="Mountains" style="width:100%" onclick="myFunction(this);">
</div>
<div class="column">
<img src="imgs/img2.jpg" alt="Lights" style="width:100%" onclick="myFunction(this);">
</div>
</div>

i solve it after 5 min insert my question :))))
i should use this code
function myFunction(imgs) {
var expandImg = document.getElementById("expandedImg");
expandImg.src = imgs.src;
expandImg.parentElement.style.display = "block";
imageZoom("expandedImg", "myresult");
}

track mouse position to move images

I have a pretty simple page.
<div id="index">
<img />
</div>
the styling is pretty simple too.
#index {position:relative;}
#index img {position:absolute; bottom:10%; right:10%; width:100%;}
I use % so the image can be resized proportionally if the browser window resizes. Never mind that.
The problem is, I'm trying to emulate the effect on this flash site : http://www.tatogomez.com/ So the image is in the bottom right of the screen. When I move my mouse to top left, the image will slightly move a bit more to the right bottom. When I move my mouse to center, the image will revert back to its original position. So it's kinda like I'm giving a shadow/lighting effect where the mouse is the lighting and the image is the object, except I only need the moving animation.
my code is like this
$(document).ready(function($){
$('#index').mousemove(
function(e){
$(this).children('img').each(
function(){
var totalWidth = $(window).width();
var totalHeight = $(window).height();
var centerX = $(window).width() / 2;
var centerY = $(window).height() / 2;
var mouseX = e.pageX;
var mouseY = e.pageY;
var current_top = $(this).offset().top;
var current_left = $(this).offset().left;
var myX = (centerX-mouseX)/centerX;
var myY = (centerY-mouseY)/centerY;
var cssObj = {
'left': current_left + myX + 'px'
'top': current_top + myY + 'px'
}
$(this).css(cssObj);
}
);
}
);
});
so if I move the mouse in relation to the center of the screen. So basically it's like this:
centerX = 700 (i use resolution 1400);
currentLeft = ~200 (the offset left of my image)
So if my mouse position is at 700-1400, then the myX will be 700(centerX) - 900(mouse position) = -200 / 700 = ~ -0.3. Add it into the css calculation, the left will be current_left(200) + myX(-0.3) px = 197.7px.
then i realizes if i move my mouse from the center to the right (700-1400 range), the image will slightly move to the left, but when I move my mouse from the right to the center, the image still moves to the left! It should move to the right to its original position, but it doesn't because the web doesn't know whether the mouse moves from right to center or from center to right.
Any help?

I toyed with it quickly, it's lacking the looping through images with .each but might help you with the mouse movement calculations. Rather than being hardcoded, the movement divider should probably be based on the z-index, since lower z-index items move more.
In this demo, initial placement is incorrect until you mouse over.
Demo here: http://jquerydoodles.com/stack_question.html
Hope that helps!
CSS:
#index { position: relative; border: 2px solid #ccc; height: 400px; }
#index img { position: absolute; background-color: #fff; border: 1px solid #666; padding: 6px; }
#image1 { z-index: 3; }
#image2 { z-index: 2; width: 150px; left: 200px; }
#image3 { z-index: 1; width: 100px; left: 300px; }
#image4 { z-index: 2; width: 150px; left: -200px; }
#image5 { z-index: 1; width: 100px; left: -300px; }
HTML
<div id="index">
<img src="http://farm6.static.flickr.com/5138/5421580531_424e84d4cf_m.jpg" id="image1" alt="" />
<img src="http://farm6.static.flickr.com/5138/5421580531_424e84d4cf_m.jpg" id="image2" alt="" />
<img src="http://farm6.static.flickr.com/5138/5421580531_424e84d4cf_m.jpg" id="image3" alt="" />
<img src="http://farm6.static.flickr.com/5138/5421580531_424e84d4cf_m.jpg" id="image4" alt="" />
<img src="http://farm6.static.flickr.com/5138/5421580531_424e84d4cf_m.jpg" id="image5" alt="" />
</div>
JQUERY:
$(document).ready(function($){
$("#index").mousemove(function(e){
var mouseX = e.pageX - $('#index').offset().left;
var mouseY = e.pageY - $('#index').offset().top;
var totalX = $('#index').width();
var totalY = $('#index').height();
var centerX = totalX / 2;
var centerY = totalY / 2;
var shiftX = centerX - mouseX;
var shiftY = centerY - mouseY;
var startX = ($('#index').width() / 2) - ($('#image1').width() / 2);
var startY = ($('#index').height() / 2) - ($('#image1').height() / 2);
$('#image1').css('z-index') ;
$('#image1').css({ 'left': startX + (shiftX/10) + 'px', 'top': startY + (shiftY/10) + 'px' });
$('#image2').css({ 'left': startX + 220 + (shiftX/8) + 'px', 'top': startY + 50 + (shiftY/8) + 'px' });
$('#image3').css({ 'left': startX + 370 + (shiftX/6) + 'px', 'top': startY + 60 + (shiftY/6) + 'px' });
$('#image4').css({ 'left': startX - 100 + (shiftX/8) + 'px', 'top': startY + 50 + (shiftY/8) + 'px' });
$('#image5').css({ 'left': startX - 150 + (shiftX/6) + 'px', 'top': startY + 60 + (shiftY/6) + 'px' });
});
});