CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Kowshik
Kowshik

Reputation: 73

change image in a div with any effect like fadein when mouse hovered on another div

The below shown is the format of my html code. In the header div i have a image. Each box(box1, box2, box3) inside the contain div has link inside like(software development(box1), Graphic Designing(box2), and Technical Training(box3). These links when clicked will take me to separate pages which has their own header images. So i have 3 header image for each box and a default header image in the home page.In the home page when ever I hover my mouse in the box1 div the header image should change to the box1 header image with an effect like fadeIn and return my default image on mouse out. Same for box2 and box3. Please help me with doing this with CSS or JS or jQuery. Thank You

<body>
   <div class="wrapper">
      <div class="out">
         <div class="in">
            <div id="header"></div>
            <div class="contain">
               <div class="box1"></div>
               <div class="box2"></div>
               <div class="box3"></div>
            </div>
         </div>
      </div>
   </div>
</body>

css:

.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;
}
.contain{
    margin: 0px;
    width: 900px;
    height: 428px;
}
.box1{
    height: 360px;
    width: 295px;
    float: left;
    margin: 67px 0px 0px 0px;
    position: absolute;
    background-color: #e6e7e9;
    border-bottom: 4px solid #735d8c;
}
.box2{
    height: 360px;
    width: 295px;
    float: left;
    margin: 67px 0px 0px 302px;
    position: absolute;
    background-color: #e6e7e9;
    border-bottom: 4px solid #735d8c;
}
.box3{
    height: 360px;
    width: 295px;
    float: left;
    margin: 67px 0px 0px 602px;
    position: absolute;
    background-color: #e6e7e9;
    border-bottom: 4px solid #735d8c;
}

Upvotes: 0

Views: 963

Answers (3)

Roko C. Buljan
Roko C. Buljan

Reputation: 206508

jsBin demo

jQuery:

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);
   
  
});

HTML:

<div class="wrapper">
  <div class="out">

     <div class="in">
       
        <div id="header">
          <img class="headImg1" src="home.jpg" alt="" />
          <img class="headImg2" src="ONE.jpg" alt="" />
          <img class="headImg3" src="TWO.jpg" alt="" />
          <img class="headImg4" src="THREE.jpg" alt="" />
        </div>
       
        <div class="contain">
           <div class="box">
          
          </div>
           <div class="box">
          
          </div>
           <div class="box">
          
          </div>
        </div>
       
     </div>
    
    
  </div>
 </div>

MODIFIED CSS PART:

/*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%;
}

Upvotes: 0

Vivek Dragon
Vivek Dragon

Reputation: 2248

I have a made an BIN

I am placing same image for all the 3 divs like

  $('#content,#content2,#content3').mouseover(function(){

$('#header').css('background','url(http://www.google.com/mobile/android/images/android.jpg)')

});

You change with your respective images like

 $('#content').mouseover(function(){

$('#header').css('background','url(http://www.google.com/mobile/android/images/android.jpg)')

});

 $('#content2').mouseover(function(){

$('#header').css('background','url(http://www.google.com/mobile/android/images/android.jpg)')

});....

Upvotes: 1

Anujith
Anujith

Reputation: 9370

See this : http://jsfiddle.net/xTjQT/2/

 $('a').mouseover(function() {
    var src = $(this).attr('alt');
alert(src);
$('#header img').stop().fadeOut(100, function() {
     $(this).attr('src', src);
     $(this).fadeIn(100);
});
});

$('a').mouseout(function() {
$('#header img').stop().fadeOut(200, function() {
     $(this).attr('src', 'http://jsfiddle.net/img/logo.png');
     $(this).fadeIn(100);
});
});

Upvotes: 0

Related Questions