I have a page and when I mouse over the links it changes an image and some html on another portion of the page. However Im wondering how this script works and when I look at the script at the top of the page:
<script type="text/javascript">
var CONTENT_CURRENT = 0;
showContent = function() {
if (CONTENT_CURRENT > 0) {
var o = YAHOO.util.Dom.get('content' + CONTENT_CURRENT);
o.style.display = 'none';
var a = YAHOO.util.Dom.get('link' + CONTENT_CURRENT);
a.style.color = '#46689e';
}
var c = YAHOO.util.Dom.get('content' + arguments[0]);
c.style.display = 'block';
var l = YAHOO.util.Dom.get('link' + arguments[0]);
l.style.color = '#000000';
CONTENT_CURRENT = arguments[0];
};
YAHOO.util.Event.onDOMReady(function() { showContent('1'); });
</script>
How is this script setting the an element on the page? The actual page is at:
Under the title ‘Streaming Software Products’…
There is another code block you need to look at to understand this code
Here each link in the list calls showContent with an index as the argument. There are a bunch of divs below like this one:
That div’s ID is “content1”. So the showContent function does three things:
visible, make it hidden
(display=none)
visible.
index.
This cause the content to the right of the links to change on mouse over.