onmouseover of one element affecting css hover of others

Hi this is a simple question I just do not know the JS syntax.  I want a mouseover image to activate a mouseover on another element.

As an example visit http://www.greenteadesign.com/test.html

Now look at the mouseover on the thumbnail in the left panel.  It currently borders the thumb in green as well as showing a transparent gif on the main image (right panel).

What I want to do is have the mouseover on the transparent gif (right panel), border the corresponding thumbnail (left panel)

Here is the JS for the thumbnails:

<script language="JavaScript1.2">
/*
Highlight Image Script II-
© Dynamic Drive (www.dynamicdrive.com)
For full source code, usage terms, and 100's more DHTML scripts, visit http://dynamicdrive.com
*/
     
function borderit(which,color){
//if IE 4+ or NS 6+
if (document.all||document.getElementById){
which.style.borderColor=color
}
}
</script>

And here is the code on the thumb referencing the JS for the thumbnail:

<a href="stereostep.html" class="small" onMouseOut="toggle('item1')" onmouseover="toggle('item1')"><img src="images/steptansu/stereostep-2tone-thumb.jpg" width=65 height=55 alt="" border=0 class="borderimage" onMouseover="borderit(this,'#647F5B')" onMouseout="borderit(this,'white')"><br></a>

Finally here is the code for one of the transparent gifs:

<div id="Stepper" style="position:absolute; width:165px; height:167px; z-index:9; left: 524px; top: 296px" onMouseOver="toggle('item1')" onMouseOut="toggle('item1')"><a href="#"><img src="spacer.gif" width="165" height="167" border="0"></a></div>

Thanks in advance,
Hayden
QuarfelburgAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

jaysolomonCommented:
Not a problem, we still need to get your positioning correct first
devicCommented:
QuarfelburgAuthor Commented:
Thanks Devic, it's sweet and simple!  Ok now what if I want to change a css hover?

For example http://www.greenteadesign.com/test2.html

The green border with the text in it saying stereo step I want to be hovered as well when you mouseover the transparenet gif.

The css for that is:

A.roomsthumbs {
display: block;
width: 65px;
height: 38px;
text-align: center;
text-decoration: none;
font-family: Verdana;
font-size: 9px;
color: #647F5B;
border: solid 1px #647F5B;
padding-top: 6px;
}
            
A.roomsthumbs:hover {
color: #ffffff;
border: solid 1px #647F5B;
background-color: #647F5B;
text-decoration: none;
}


Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
QuarfelburgAuthor Commented:
It works like a charm, though admittedly I don't understand the code =)

By the way Devic, and useful books/tuts out there that could help me understand this?

Cheers,
Hayden
devicCommented:
Hayden, look here:

http://www.dannyg.com/pubs/index.html

to have a book is good, to read the book is nice ;)
jaysolomonCommented:
danny g has some good books. I have the Javascript Bible he wrote.

Here is a link to Javascript Unleashed by Sams publishing. You can down load samples that is in the book online.
http://www.samspublishing.com/isapi/product_id~{8A8A55EB-4C2C-4E37-8980-9598AD4BF855}/selectDescTypeId~{5F7BB313-BBC4-4A9E-A577-562A760FE491}/st~{D981C3BE-ED1F-42B5-AA2E-3DEC1D1A93A7}/session_id~{3CD04DE3-0648-4631-8F82-2CE3FDD5FEDA}//catalog/product.asp


Here is the zip file of them
http://www.samspublishing.com/isapi/product_id~{8A8A55EB-4C2C-4E37-8980-9598AD4BF855}/selectDescTypeId~{5F7BB313-BBC4-4A9E-A577-562A760FE491}/st~{D981C3BE-ED1F-42B5-AA2E-3DEC1D1A93A7}/session_id~{3CD04DE3-0648-4631-8F82-2CE3FDD5FEDA}//content/images/0672324318/downloads/code.zip
jaysolomonCommented:
copy paste the whole thing in the address bar
QuarfelburgAuthor Commented:
Devic in the test you showed me there is an underline for the text within the green boxes.  This is because a:hover is no longer overrided.  How do I get rid of the underline without changing a:hover?
QuarfelburgAuthor Commented:
I just put another a:hover on the actual page instead of the stylesheet.  Works fine.  If theres a better way let me know.

Cheers.
devicCommented:
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.