highlight two items with javascript

**cherie** · Mar 19, 2007, 13:04

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** · Mar 19, 2007, 13:16

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** · Mar 19, 2007, 13:37

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** · Mar 19, 2007, 14:34

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** · Mar 20, 2007, 08:49

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** · Mar 20, 2007, 09:34

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** · Mar 20, 2007, 09:47

Originally Posted by 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.

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** · Mar 20, 2007, 20:44

Originally Posted by ceeb

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** · Mar 21, 2007, 03:26

Originally Posted by Kravvitz

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** · Mar 22, 2007, 08:56

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

Much gratitude.

User Tag List

Thread: highlight two items with javascript

Thread Tools

Display

highlight two items with javascript

Bookmarks

Bookmarks

Posting Permissions