1

just wondering if someone can help me make this code work properly and be used for multipul li's without declaring each one separately. Is this possible? Basically want to do an background image rollover with the < li > then when hovering over the < li > have a the contents of #show change. Does that make sense? Any clues of help would be much appreciated.

Code so far:

JQUERY:

function switchTo(i) {
  $('#menu li').css({background:"url(images/1.png) no-repeat top left"}).eq(i).css({background:"url(images/1.png) no-repeat bottom left"});
  $('#show div').css('display','none').eq(i).css('display','block');
  $('#menu li').css({background:"url(images/2.png) no-repeat top left"}).eq(i).css({background:"url(images/2.png) no-repeat bottom left"});
  $('#show div').css('display','none').eq(i).css('display','block');
  $('#menu li').css({background:"url(images/3.png) no-repeat top left"}).eq(i).css({background:"url(images/3.png) no-repeat bottom left"});
  $('#show div').css('display','none').eq(i).css('display','block');
  $('#menu li').css({background:"url(images/4.png) no-repeat top left"}).eq(i).css({background:"url(images/4.png) no-repeat bottom left"});
  $('#show div').css('display','none').eq(i).css('display','block');
}
$(document).ready(function(){
  $('#menu li').mouseover(function(event){
    switchTo($('#menu li').index(event.target));
  });
  switchTo(0);
});

HTML:

<ul id="menu">
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>
<div id="show">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

Thanks again.

Greg Pettit
  • 10,749
  • 5
  • 53
  • 72
Bennjamin_
  • 99
  • 2
  • 12

2 Answers2

1

It looks like your simply trying to mimic the :hover class of CSS:

#menu li.one:hover {
    background: url(images/1.png) no-repeat top left;
}

/* etc. */

As for the showing the content with the matching div bit, by altering your HTML a bit:

<ul id="menu">
  <li class="one"><div>1</div></li>
  <li class="two"><div>2</div></li>
  <li class="three"><div>3</div></li>
  <li class="four"><div>4</div></li>
</ul>

And adding some more CSS:

#menu li div {
   display: none;
}    

#menu li:hover div {
   display: block;
}

Working example here

Joey
  • 1,664
  • 3
  • 19
  • 35
  • You're a legend. Is this using margin-left to offset the divs good practice? Example: http://jsfiddle.net/yL4hx/1/ – Bennjamin_ Oct 29 '11 at 01:09
  • How would you keep the hover effect from jumping down and display the numbers to the side in the same position? http://jsfiddle.net/yL4hx/19/ – Bennjamin_ Oct 29 '11 at 01:20
  • If you want the div's to always be 200px to the left of the `#menu li`'s, then thats great practice. – Joey Oct 29 '11 at 01:22
  • I'm not sure i understand what you mean. You want the numbers to always show at the same position when hovering over the li's? – Joey Oct 29 '11 at 01:24
  • Yeah. So say I replace the numbers with an image. I want just the one image to be displayed for the corresponding li. Does that make sense? I guess you could place all the divs over the top of each other or is there a way you can just use one div which each of numbers appear in? – Bennjamin_ Oct 29 '11 at 01:29
  • Thank you so much! Lastly, is there a way using CSS to load the page with one already selected and the div already displayed? Then when you stop hovering it will keep the last one you hovered on selected? I know this is possibly with jquery... Thanks again! – Bennjamin_ Oct 29 '11 at 01:48
  • I doubt you could do that based on page with only CSS. You could try writing in line code like: `
    1
     – Joey Oct 29 '11 at 01:54
0

I don't think JavaScript in general is necessary here, looks a bit of an overhead.

Why don't you just go for li:hover and do it all in CSS? You can simply have background-image:... in the :hover class and that's pretty much it. Same for divs.

Ain Tohvri
  • 2,987
  • 6
  • 32
  • 51
  • All CSS would actually be excellent! How would you make the #show divs appear on hover of the < li > as well as the image swap? – Bennjamin_ Oct 29 '11 at 00:50