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>

If it's easier, I can also use another image instead of a div with an image background to go below the row of 4 images. — user2178790, Apr 12 '13 at 16:24
(notes: twit is one of the image id's, the CSS for the div works fine but the jquery doesnt work) — user2178790, Apr 12 '13 at 16:28
can you put the code you're using into a [jsFiddle](http://jsfiddle.net/) — apaul, Apr 12 '13 at 16:36
UNIQUE Id violation in your code. javascript can just give back the first id, all others will be ignored in `return` — Ol Sen, Apr 12 '13 at 16:36

Alqin · Answer 1 · 2013-04-12T16:53:33.710

The code bellow you can see it working here: 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>

score 0 · Answer 2 · answered Apr 12 '13 at 16:50

<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>

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

2 Answers2