Position a DIV via onmouseover?

[neokio]

Hey all! I'm new to this board, it looks the the best one out there so I'll be hangin around..

So... you can control CSS with onmouseover via

 onmouseover="this.style.top: 100px;

or whatever... but is there code to change the position of one <div> via a onmouseover in another <div>?

Specifically, I'd like to replace 40 lines of javascript rollover code with a really simple onmouseover call to "change the 'top' value of div ARROW (with an image inside it) to value 100 (from -1000)". Just move the arrow around onscreen. I'd end up with a series of links, each controlling the position of a single <div> via javascript. Like a moving underline, re-positioned by each link's onmouseover. Make sense? This way I can have one image and one div for as many links as I want, with minimal code.

Any ideas?

[ChadSEO]

neokio,

If you want to change the property of another div, you can do so by calling it by ID:

<div id="container">blah blah blah</div>

<div onmouseover='document.getElementById("container").style.top="-1000px";'>

Chad

[neokio]

that's so cool. it works beautifully,
and produces much cleaner code..
is there a reason for the rarity of
this style of mouseover? and more
importantly, are there any browser
issues with this code?

Here's an uber-crude example:

---

<style type="text/css">
body {
background-color: #000; color: #fff;
}
#underline {
position:absolute;
top:-1000px;
left:100px;
}
.nav {
position:absolute;
top:100px;
left:100px;
}
<div id="underline"><img src="underline.png" alt="" width="156" height="16" /></div>
<div class="nav">
<a href="#" 
onmouseover='document.getElementById("underline").style.top="100px";'
onmouseout='document.getElementById("underline").style.top="-1000px";'
>top=100</a><br />
<a href="#" 
onmouseover='document.getElementById("underline").style.top="120px";'
onmouseout='document.getElementById("underline").style.top="-1000px";'
>top=120</a>
</div>