jquery - hover on one image to fade swap a different image or the div containing the image's background image?

Question

I have a div containing 4 images in a row and a div the length of all 4 on the next row.

What I want to do is apply the hover and toggleclass functions so that when you hover over each of the 4 top row images the div below's background image changes. Is this possible? How would I do it?

<div id="float3_1">
<img id= "twit" src= "face.jpg" width= "240px"> 
<img id = "twit" src= "twit.jpg" width= "240px"> 
<img id= "twit" src= "goog.jpg" width= "240px"> 
<img idc= "twit" src= "insta.jpg" width= "240px"> 
<div class="divbelow"></div>
</div>

<script type= "text/javascript">
$('#twit').hover(function () {
$(.divbelow).toggleClass('image1', 500);
}, function () {
$(this).toggleClass('image1', 1000 );
});
</script>

Answer 1

下面的代码你可以在这里看到它工作：http: //fiddle.jshell.net/FuzaC/2/

<div class="float3_1">
    <img class= "twit" src= "http://www.codeproject.com/KB/IP/ZetaTwitter/zetatwitter-03.png" width= "100"/> 
    <img class= "twit" src= "http://higher-and-higher.com/wp-content/uploads/2010/12/twitter-icon-1a.png" width= "100"/> 
    <img class= "twit" src= "http://tapdesigner.com/wp-content/uploads/2012/04/twitter.png" width= "00"/> 
    <img class= "twit" src= "http://cdn1.iconfinder.com/data/icons/yooicons_set01_socialbookmarks/256/social_twitter_box_blue.png" width= "100"/> 
</div>
<div id="div" style="height:256px">Content of the div</div>

<script type= "text/javascript">
$(function(){
    $('.twit').mouseenter(function(){
        $('#div').css('background','url('+$(this).attr('src')+')');
    });
});
 </script>

Answer 2

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js" type="text/javascript"></script>

<style>
    img { margin:0px; padding: 0px; float:left}
    .image1 { background-color:#333; }
    .image2 { background-color:#f00; }
    .image3 { background-color:#0f0; }
    .image4 { background-color:#00f; }
    #divbelow {clear:left}
</style>

<div id="float3_1">
    <img id="twit1" src="face.jpg" width="25%">
    <img id="twit2" src="twit.jpg" width="25%">
    <img id="twit3" src="goog.jpg" width="25%">
    <img id="twit4" src="insta.jpg" width="25%">
    <div id="divbelow">foo</div>
</div>

<script type= "text/javascript">
$(document).ready(function() {
    $('#float3_1 img').hover(function (e) {
        var imgclass='image'+((e.target.id).split('twit'))[1];
        console.log(imgclass);
        $('#divbelow').toggleClass(imgclass, 500);
    });
});
</script>