Portfolio
- Started
- Last post
- 7 Responses
- iamjustoneman
Hi all,
I have work thumbnails on one side, disciplines (branding, print etc) on the other, what I would like to do is highlight the services carried out when I hover over an image, vice versa, if I hover over a service, highlight the thumbnails.
Anyone come across this, I'm just starting out with jQuery, so not quite there for doing this myself.
Thanks
- orrinward20
I typically do this in a pretty simple but probably inefficient way:
Give each discipline a class, such as 'branding', 'print' e.t.c.
Give each thumbnail container the classes relevant to their disciplines, and give the menu item the class as well.
Then do something like:
//THIS IS FOR MENU HOVER
$('#disciplinemenu .branding').hover(
function(){
$('#thumbnailsmenu .branding').addClass('highlight...
},
function(){
$('#thumbnailsmenu .branding').removeClass('highlig...
}
);I'd then do something similar for the reverse scenario, but with each of the disciplines as a separate function.
Not the neatest way but for someone new to jQuery it'd work a charm.
- orrinward20
I'd love to know a much more efficient way. I'm sure this could be done by using slice on the full class list or something like that, or drawing the class out as an argument in a function.
http://jsfiddle.net/orrinward/b2…
Theres something crude, but fully working.
- iamjustoneman0
Brilliant, thats a great start for me.
- orrinward20
Fingers crossed ernexcbn of one of the other jQuery champions will pop by and give the one-liner version!
- Mishga0
Someting like this?
http://jsfiddle.net/KbH7j/4/
- ok_not_ok0
Add to New Year's Resolution:
5. Learn Javascript and HTML 5
- iamjustoneman0
orrinward2's solution works great, is there anyway of having the js dynamic though, so additional services can be added without having to edit the js?