Ioninesleesse
New Member
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\[code\]<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>\[/code\]css:\[code\].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;}\[/code\]