[speedospeedo]

Hi,

I have a list of links 25 pieces (on mouse over the link color changing)
and
pictures displayed in table with same links (25 link too) one by one.
(here only changing the table border)


So there are 2 onchange event exist on the page, however I'd like to
change link color/border color together regardless of the mouse over the
text or over the image, so the color swap should happen on both place.

Is there any idea how to join together the different part of the site ?

See the demo page>
left side the links, right side same links under the pix.
http://gezanemeth.hu/probasql2/hupp.php

I really appreciate any suggestion.

[dgreenhouse]

Nice problem - by the way...

It appears that you're using some type of content management system that's
placing event code directly in the elements. (<td> elements containing thumbs)

So, to keep from having to redo all of that, your best option (IMHO), is to add an event
listener setup function upon page load.

Since the two tables (links and thumbs) are directly related:
link1 is associated with thumb1, it should be fairly easy to do - albeit with effort.

Those items are pretty deeply embedded inside of spans, divs and tables, so locating
them correctly with JavaScript will require knowing the DOM of this document setup
extremely well.

Back to the event listener...

I'd choose the thumb's (<td>'s containing the thumb) on mouse(XXX) events to trigger
the action (as they're already initiating "thumb border hi-light" action) and the
link's <td> or <tr> (probaly <tr>) container to initiate the cross element coordinations.

So the basic steps are:
1- On document load find the tables the contain the thumbs and links.
1a- (i.e. Walk the DOM...)

2- Change (add in the case of the link's container) the appropriate element's mouse events
to point to a function (to be created) that performs the correct actions - i.e. class value changes...

3- It would make sense at the beginning of the event listener setup to add ID's to the tables
that are discovered and class values to the <td> or <tr> element so the code (function to be written)
doesn't have to "walk the DOM" every time a mouse action initiates the U.I. changes.

3a- So, since the thumbs are organized 5-across in a row, the class values should be placed on the <td>.

3b- In the case of the links, they're contained in a single <td> inside of a single <tr>
I'd place the event code on the <tr>

3c- All the element has to do then is call the function with itself when a mouse action occurs.
i.e. onmousemove=functionName(this)
note: you'll be clearing the current embedded code calls in the thumbs containing <td>'s
and adding event listeners. If you're unfamiliar with this concept, you have some reading to do...

4- Now that the event logic is hooked up properly and ID's and classes have been added to appropriate
elements, the called function can just locate the appropriate items quickly and perform the neccessary changes

5- It would probably be best to keep track of which items were last "turned on" by storing their class values
in either two variables or an array (activeLink, activeThumb || activeItems[0], activeItems[1])
That way, you don't have to iterate over the table-rows-columns when you need to turn one off and another one on.
note: Forgot... The item itself can call the function telling it turn its hi-light off. so you won't need to store anything.

With a JavaScript framework (I use jQuery a lot), this is fairly straight forward and deals with most of the
cross-browser stuff for you (some you'll still have to compensate for).

I said it was easy, but as you probably know, nothing is.

Good luck and I'll check in on your progress...

[speedospeedo]

Thank you dgreenhouse, for the nice and detailed evaulation of the problem.

[harish]

it possible to have 2 mouseover events linked to a single image or text..
you can do it by separating each action with a simicolon.
eg of this is below....
consider dothis() and dothat are two funtions..

Code:

<a href="#" onMouseover="dothis(); dothat()">