Image attenuation using JavaScript (NOT jQuery!)

Question

Hi everyone, I have a question about homework,

I need to put out a gallery-style image using JavaScript. Note: NOT jQuery. I cannot use jQuery according to the destination outline.

So, there is a grid of images (32 of them, if you are interested), they are all 100x100px thumbnails. Each of them is in its own div, and all this is nested inside another div, for example:

gallery.html

<div id="imageContent">

<div id="img" class="imageWhite" 
     onclick="fade(1984)"
     onmouseover="highlightWhiteFunction(this)" 
     onmouseout="unHighlightFunction(this)"> 
     <img src="../Media/Thumbs/1984.jpg"/> 
</div>

...31 others just like that

</div> //End of the whole container

, , . 500 , , . , JQuery ... , , .

, , :

gallery.js

function fade(name) {
    var theName = name;
    console.debug("Clicked " + theName);
}

, . , , , .

: , div 500, , / div . , , , JavaScript , .

, , , ( ) , . , , , , , , .

, , .

: NO JQuery!:)

Answer 1

-

 function fadeIn(el, time) {
     el.style.opacity = 0;
     el.style.display = "block";

     var last = +new Date();
     var tick = function() {
          el.style.opacity = +el.style.opacity + (new Date() - last) / time;
          last = +new Date();

          if (+el.style.opacity < 1) {
               (window.requestAnimationFrame && requestAnimationFrame(tick)) ||      setTimeout(tick, 16)
          }
     };

     tick();
}

: http://jsfiddle.net/cEDbs/

onclick, .

Answer 2

CSS. , , . JSFiddle , css - . .

http://jsfiddle.net/Rh976/

<img src="http://tippvet.com/wp-content/uploads/2013/05/cat-vet.jpg" class="img img1"/>
<img src="http://tippvet.com/wp-content/uploads/2013/05/cat-vet.jpg" class="img img2"/>
<img src="http://tippvet.com/wp-content/uploads/2013/05/cat-vet.jpg" class="img img3"/>
<img src="http://tippvet.com/wp-content/uploads/2013/05/cat-vet.jpg" class="img img4"/>

JS

var imgs = document.getElementsByTagName('img');
for(var i = 0; i < imgs.length; i++){
    var img = imgs[i];
    img.addEventListener('click',function(e){  
        if(!this.className.match(/big/)){          
            this.className += ' big'; 
        } else {
             this.className = this.className.replace(/big/,'');
        }
    });        
}

CSS

.img {
    -webkit-transition: all 1.0s ease-out;
    -moz-transition: all 1.0s ease-out;
    -o-transition: all 1.0s ease-out;

    position:absolute;   
    width:150px;
    height:100px;
    z-index:1;
}

.img.img1 { top: 10px;  left: 10px; }
.img.img2 { top: 10px;  left:170px; } 
.img.img3 { top:120px;  left: 10px; }
.img.img4 { top:120px;  left:170px; } 

.img.big {
    position:absolute;
    width:450px;  
    height:300px;
    top:10px;
    left:10px;
    z-index:20;
}