highlight two items with javascript

[cherie]

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.

I am using text, no images.

any ideas? or does my explanation not make any sense?

Cherie

[Kravvitz]

Could you show us your markup? Hopefully you're using ordered lists (<ol>). With two ordered lists of the same length, doing this with unobtrusive JS is really fairly simple.

P.S. Actually I didn't say to post this in this forum. I just said it was best done with JavaScript.

[cherie]

Well, the page wasn't set up with <ol>, but I am working with someone new to CSS and forgot to mention that. So I am working on cleaning things up.

Is there an example somewhere of this? The items I have found are not taking me in the direction I thought I was headed in.

[ceeb]

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.

[cherie]

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

[Ize]

I've made an example for you here: http://www.whatstyle.net/bla/remote_hover.htm

I don't have the time to comment it heavily right now, but study the script and you will figure it out. It's simple, really

[ceeb]

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.

[Kravvitz]

But, what if you list two or more songs per artist?

In the thread in the CSS forum, cherie said that there was just one song per artist.

[ceeb]

In the thread in the CSS forum, cherie said that there was just one song per artist.

Oops - sorry missed that. As long as the song and artist positions match, that script is fine.

[cherie]

Thank you Ize. Exactly what I needed. And it was simple.

Much gratitude.