Question

I have nav code like this in my HTML file:

<div id="center_links">
            <ul>
                <li><a href="#" onMouseOver="javascript:setSideText(1)">about</a></li>
                <li><a href="blog" onMouseOver="javascript:setSideText(2)">blog</a></li>

…and so on.

My JavaScript looks like this:

function setSideText(setting)
{
    if (setting == 0) // Home
    {
        document.getElementById('center_text').innerHTML = '<p><div class="dropcap">#</div>I am an information technology student interested in free and open source software.</p>';
    }
    else if (setting == 1) // About
    {
        document.getElementById('center_text').innerHTML = '<p><div class="dropcap">#</div>My name is David Gay, and this is my website. Welcome.</p>';
    }
    else if (setting == 2) // Blog
    {
        document.getElementById('center_text').innerHTML = '<p><div class="dropcap">#</div>My blog runs on the <a href="http://chyrp.net/">Chyrp</a> blog software.';
    }

When I mouseover a link, the side text on my page changes to describe the link. I want the text to change back to the default (setSideText(0)) when I’m not mousing over a nav link. I’ve been playing around with it for a bit now and I haven’t been able to figure it out.

I tried adding this to the JavaScript file, but to no avail:

document.getElementById('center_links').onMouseOut = setSideText(0);

I figured it wouldn’t work, anyway.

I’m sure there’s a simple solution that I’m not thinking of (I just picked up the language). Any guidance is appreciated!

Answer 1

I’d make two primary suggestions, the first: don’t use inline event-handlers (it’s more maintainable to have your behaviour in one place) and the second is to use onmouseout on the parent center_links element.

To that end:

function setSideText(setting) {
    if (setting == 0) // Home
    {
        document.getElementById('center_text').innerHTML = '<p><div class="dropcap">#</div>I am an information technology student interested in free and open source software.</p>';
    }
    else if (setting == 1) // About
    {
        document.getElementById('center_text').innerHTML = '<p><div class="dropcap">#</div>My name is David Gay, and this is my website. Welcome.</p>';
    }
    else if (setting == 2) // Blog
    {
        document.getElementById('center_text').innerHTML = '<p><div class="dropcap">#</div>My blog runs on the <a href="http://chyrp.net/">Chyrp</a> blog software.';
    }
}

var linksElem = document.getElementById('center_links'),
    links = linksElem.getElementsByTagName('a');

for (var i = 0, len = links.length; i < len; i++) {
    links[i].dataIndex = i+1;
    links[i].onmouseover = function() {
        setSideText(this.dataIndex);
    };
}

linksElem.onmouseout = function(){
    setSideText(0);
}

JS Fiddle demo.

---

Edited to amend the setSideText() function to respond to words rather than an index (because I think it’s easier for adding subsequent links at a later date and doesn’t rely on being able to add arbitrary attributes to the elements, though it does require that the element have an id attribute…):

function setSideText(setting) {
    if (setting == 'home' || setting == 0)
    {
        document.getElementById('center_text').innerHTML = '<p><div class="dropcap">#</div>I am an information technology student interested in free and open source software.</p>';
    }
    else if (setting == 'about')
    {
        document.getElementById('center_text').innerHTML = '<p><div class="dropcap">#</div>My name is David Gay, and this is my website. Welcome.</p>';
    }
    else if (setting == 'blog')
    {
        document.getElementById('center_text').innerHTML = '<p><div class="dropcap">#</div>My blog runs on the <a href="http://chyrp.net/">Chyrp</a> blog software.';
    }
}

var linksElem = document.getElementById('center_links'),
    links = linksElem.getElementsByTagName('a');

for (var i = 0, len = links.length; i < len; i++) {
    links[i].onmouseover = function() {
        setSideText(this.id);
    };
}

linksElem.onmouseout = function(){
    setSideText(0);
}

JS Fiddle demo.