http://jsbin.com/olehuz/3/editHi, I got the above code from here. The images in the header are cloned to the individual boxes and when ever i hover them the header image changes with a fadein out effect. I need a change in this functionality. I do not want the image to be cloned in to my box1, 2 and 3. Instead I need the same effect when ever I hover the box itself. i.e when i hover on box1 the header image should change to the respective image and returns to original on mouseout. same for the remaining 2 boxes. Please help me with this. Guess its a small change in the code. But I dont know jquery. Thank You..
\[code\]<!DOCTYPE html><html><head><script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script><meta charset=utf-8 /><title>Demo by roXon</title></head><body><div class="wrapper"><div class="out"><div class="in"><div id="header"><img class="headImg1" src="http://placehold.it/900x200/ccc&text=HOME" alt="" /><img class="headImg2" src="http://placehold.it/900x200/cf5&text=ONE" alt="" /><img class="headImg3" src="http://placehold.it/900x200/f0f&text=TWO" alt="" /><img class="headImg4" src="http://placehold.it/900x200/f70&text=THREE" alt="" /></div><div class="contain"><div class="box"></div><div class="box"></div><div class="box"></div></div></div></div></div></body></html>.wrapper{width: 100%height: auto;margin: 0px;}.out{margin: auto;width: 1000px;height: 730px;border-top: 5px solid #333333;}.in{width: 900px;height: 640px;margin: auto;margin-top: 25px;}#header{background:url(../img/Untitled-1.jpg);height: 175px;width: 900px;margin: 0px;}/*ADDED*/#header img{position:absolute;display:none;}.contain{margin: 0px;width: 900px;height: 428px;}.box{ /* CHANGED */height: 360px;width: 294px;float: left;margin: 67px 3px 0px;position: relative;background-color: #e6e7e9;border-bottom: 4px solid #735d8c;}/* ADDED */.box img{width:100%;}var currPage = 0; // PLAY HERE: set here current page (0 = home)var $header = $('#header');var $headerImg = $header.find('img');$headerImg.eq( currPage ).show().addClass('currentImg');// clone images to boxes:var c = 0;$('.box').each(function( i ){$(this).prepend( $headerImg.eq(i==currPage? (i+1+c++) : c+i).clone() );});$('.box img[class^=headImg]').on('mouseenter mouseleave', function( e ){var opacity = e.type=='mouseenter' ? 1 : 0 ;var myClass = $(this).prop('class'); // get class var $mainImg = $header.find('img.'+myClass);$headerImg.hide();$mainImg.stop().fadeTo(300, opacity);$('.currentImg').stop().fadeTo(600, !opacity);});\[/code\]
\[code\]<!DOCTYPE html><html><head><script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script><meta charset=utf-8 /><title>Demo by roXon</title></head><body><div class="wrapper"><div class="out"><div class="in"><div id="header"><img class="headImg1" src="http://placehold.it/900x200/ccc&text=HOME" alt="" /><img class="headImg2" src="http://placehold.it/900x200/cf5&text=ONE" alt="" /><img class="headImg3" src="http://placehold.it/900x200/f0f&text=TWO" alt="" /><img class="headImg4" src="http://placehold.it/900x200/f70&text=THREE" alt="" /></div><div class="contain"><div class="box"></div><div class="box"></div><div class="box"></div></div></div></div></div></body></html>.wrapper{width: 100%height: auto;margin: 0px;}.out{margin: auto;width: 1000px;height: 730px;border-top: 5px solid #333333;}.in{width: 900px;height: 640px;margin: auto;margin-top: 25px;}#header{background:url(../img/Untitled-1.jpg);height: 175px;width: 900px;margin: 0px;}/*ADDED*/#header img{position:absolute;display:none;}.contain{margin: 0px;width: 900px;height: 428px;}.box{ /* CHANGED */height: 360px;width: 294px;float: left;margin: 67px 3px 0px;position: relative;background-color: #e6e7e9;border-bottom: 4px solid #735d8c;}/* ADDED */.box img{width:100%;}var currPage = 0; // PLAY HERE: set here current page (0 = home)var $header = $('#header');var $headerImg = $header.find('img');$headerImg.eq( currPage ).show().addClass('currentImg');// clone images to boxes:var c = 0;$('.box').each(function( i ){$(this).prepend( $headerImg.eq(i==currPage? (i+1+c++) : c+i).clone() );});$('.box img[class^=headImg]').on('mouseenter mouseleave', function( e ){var opacity = e.type=='mouseenter' ? 1 : 0 ;var myClass = $(this).prop('class'); // get class var $mainImg = $header.find('img.'+myClass);$headerImg.hide();$mainImg.stop().fadeTo(300, opacity);$('.currentImg').stop().fadeTo(600, !opacity);});\[/code\]