Databases
StackOverflow2013
Postsdbo
POCreate multiple tiles that fade into different images using javascript
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POCreate multiple tiles that fade into different images using javascript
    text
    copied!<p>I am working on a web project and I want to make a 3x2 row of tiles that when you mouse over them the tile will fade out and fade in with a new one containing the image. </p> <p>I have multiple tiles that are images using the DIV class <code>.previewBox</code>. When you mouse over these images I use JQuery to fade out the image and fade back in with a new one (using a JQuery plugin called waitForImages which is specifically tailored for loading images in JavaScript) The problem is I want each tile to fade with a different set of images. I thought of putting all of the first set of images (The preview images) in an array and the second set of images (The flip images) in a different array and when you mouse over and it would want to set the flip image it would call flipArray.indexOf(this) but since the JavaScript is detecting the div I am not sure if that will work because "this" isn't referring to the image in the array.</p> <p>I am still really learning javascript and I am not really sure how to detect which image you are hovering over and take its index number to switch it out with another picture.</p> <p>I have the script for fading images but right now I have the image location hard coded.</p> <pre><code>$(document).ready(function() { //Document is ready to load var hov = false; //Since there is more then one tile using the .previewBox I use the .each command $('.previewBox').each(function() { var previewBox = $(this); // Won't create as many objects this way. previewBox.mouseenter(function() // On mouse enter { if (hov === false) //Keeps animation from repeating { hov = true; // Sets boolean for mouse leave previewBox.fadeOut(function() //Fades out { previewBox.waitForImages(function() //Loads images { previewBox.stop().fadeIn(); //Fades in }); previewBox.attr("src", "Images/Portfolio/Art_Bike_Flip.png"); //New image location. }); }; }); }); $('.previewBox').each(function() { var previewBox = $(this); previewBox.mouseleave(function() { if (hov === true) { hov = false; previewBox.fadeOut(function() { previewBox.waitForImages(function() { previewBox.stop().fadeIn(); }); previewBox.attr("src", "Images/Portfolio/Art_Bike_Preview.png"); }); }; }); }); }); </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload