Question

I have a idea, a way to give user feedback
i like to hover on a menu, that will highlight an img correcponding to the menu
OR theinverse, hover over image will highlight the menu

I think it can be done with jquery, but can it be done in pure css or do you have a example or code i can base my idea on

thanks

Answer 1

So in jQuery as far as I understand you have a menu and some images:

<ul>
<li><a href="#">item 1</a></li>
<li><a href="#">item 2</a></li>
</ul>

...

<img src="/img1.jpg" />
<img src="/img2.jpg" />

First you need something to link the two, such as a class or rel reference

<ul>
<li><a href="#" rel="img1">item 1</a></li>
<li><a href="#" rel="img2">item 2</a></li>
</ul>

...

<img src="/img1.jpg" id="img1" />
<img src="/img2.jpg" id="img2" />

Then using jQuery you could add a class to the elements on rollover

$(function(){
    $('li a').bind('mouseenter mouseleave',function(e){
        $(this).toggleClass('highlight');
        $('#'+$(this).attr('rel')).toggleClass('highlight');
    });
    $('img[id^=img]').bind('mouseenter mouseleave',function(e){
        $(this).toggleClass('highlight');
        $('a[rel='+$(this).attr('id')+']').toggleClass('highlight');
    });
});

You could use anything really as an indentifyer using .text() or .atrr(‘src’)
The highlight class would contain the styles for your rollover, which could obviously be different for the menu and image either with li .hightlight and img .highlight or using different classes.