Highlight images/text

[iamjustoneman]

Hi all,

I have work thumbnails on one side (meals), ingredients on the other side, what I would like to do is:

1) If I hover over a meal, the ingredients used for that dish are highlighted on the left
2) If I hover over an ingredient, the dishes that used this ingredient are selected

I am just starting out in jQuery, can anyone give me some pointers.

Many thanks

[Max Height]

I am just starting out in jQuery, can anyone give me some pointers.

1) How do you want the associated images highlighted? How you code it up depends on it.

2) How are the dishes selected, check boxes, radio buttons or something else?

3) Why use jquery when you can do it with less code running with just normal javascript? I assume you are aware jquery is just a set javascript functions.

[iamjustoneman]

Hi there Max,

1) Each image will have a heading (the meal name), when not highlighted, the background of the title will be white, when it is highlighted it will be black.

2) The dishes are selected via hovering over over the meal name in a list

3) Sure, I myself and beginning to learn jQuery, I'm more of a designer than developer, so the my few first couple of tutorials are quite promising, it makes sense to me, I guess this little exercise has come a little to soon, if someone can help no doubt I will learn along the way. In short, jQuery was chosen because it looks quite friendly for a non-tecky newbie.

[Max Height]

In any case you could set up an array something like this

var mealsData = [
       ['meal1','ingr1','ingr2','ingr3','ingr4','ingr5','ingr6'],
       ['meal2','ingr7','ingr2','ingr3','ingr8','ingr9']
];

and then depending on whether a meal or ingredient is hovered on, you loop through the appropriate part of the array to get the info for the images you need to highlight or select on the other side.

[iamjustoneman]

Hi Max,

Thanks for the help, I'm learning about arrays, thanks for the pointers, don't suppose you would be willing to whip up a very basic demo, cheeky i know, I just can't find any demo's to learn from. I know I just start learning all this from scratch, I just seem to learn more from examples

[Max Height]

I just can't find any demo's to learn from.

I find that very hard to believe. Try any of these examples.