The SitePoint Forums have moved.

You can now find them here.
This forum is now closed to new posts, but you can browse existing content.
You can find out more information about the move and how to open a new account (if necessary) here.
If you get stuck you can get support by emailing forums@sitepoint.com

If this is your first visit, be sure to
check out the FAQ by clicking the
link above. You may have to register
before you can post: click the register link above to proceed. To start viewing messages,
select the forum that you want to visit from the selection below.

highlight two items with javascript

It was suggested that I put this in the javascript forum instead of the CSS forum. so here it is...

Hi everyone

I have a site that has 3 columns. Items in column 1 and 3 are related. I would like to be able to have both the item in column 1 and 3 show the hover action when crossing over the single related item in either column 1 or 3.

Column one contains the name of a musician. Column 3 contains the name of a song. I would like the song and musician to show a specific hover action if I mouse over either the name of the musician or the song. Each musician only has one song.

You're probably not going to find an example, since it's specific functionality to your site. But, as Kravvitz has said, JS makes it easy. What you need to decide is how you'll map between the two data fields.

can you give me an example of what you mean by "map between two data fields"? I really don't use javascript that much.

It's how the artist and song are connected. Ize has done a great example that assumes one song per artist at the same location in a list, e.g. song 1 is mapped to artist 1 and vice versa.

But, what if you list two or more songs per artist? What if they're in positions that are fairly random? You need to set up a mapping array in JS, and I'd suggest you wrote the HTML in such a way that the mapping could be generated.