Question

I’m trying to create a simple event where, when the user hovers over a unique sentence in a box of sentences, the prefixed image div on the left slides left (like image goes out and another one slides in) to show the current sentences image. When not hovering over anything, the home image shows as default image. Also, the sentences aren’t structured to be on new lines, some of them go on to a new line (cannot change this).

I can’t post a picture, but I tried to explain it as detailed as possible.

How should I structure this? Should I use span tags inside of a div to identify the unique sentences so that I can set that span’s background color and image event when hover over?

Please let me know the best possible solution. Thank you.

Answer 1

My first inclination is that yes, you will need to wrap your particular pieces of text in <span>‘s in order to make them hoverable (to the exclusion of the text around them). Semantically it also makes the most sense. You will then have to give the span some kind of id that you can use to tie in with the desired effect.

Roughly, your markup would look like this:

<p>This is your before your sample sentence. <span id="hover_1">This IS your sample sentence.</span> <span id="hover_2">This is yet another sample sentence.</span> This is after your sample sentence.</p>
<div id="images">
  <img src="http://farm8.staticflickr.com/7171/6717705777_268acd6b2a_m.jpg" id="original" />
  <img src="http://farm8.staticflickr.com/7014/6717705405_80e172b437_m.jpg" id="hover_1_pic" /> 
  <img src="http://farm8.staticflickr.com/7144/6717706163_68e9b6f0d4_m.jpg" id="hover_2_pic" /> 
</div>

Now you’ll need some css:

span { background: yellow; cursor: pointer;}
#images img { display: none; }
#images #original { display: block; }

Then your jQuery could look something like this:

$('span').hover( 
function(){
    var thisId = $(this).attr('id');
    $('#images img').stop().fadeOut('fast');
    $('#' + thisId + '_pic').delay(300).fadeIn('normal');
},
function(){
    var thisId = $(this).attr('id');
    $('#' + thisId + '_pic').stop(true, true).fadeOut('fast',function(){
    $('#original').stop(true, true).fadeIn('normal');
    });
    $('#original').stop(true, true).css('opacity', 1); 
}
);

I don’t know how many of these sentences you plan to have in this page, or how many pages, so you may have to work on making the jQuery selector a little smarter.

See it live: http://jsfiddle.net/chippper/mMw5x/