Changing Content OnMouseover

Swap Content Demo

Hover over the links on the left to observe.

Hover over the links in the demo to see content change in the area to the right. Code available here provides the means to set up this functionality unobtrusively, in accordance with current practices.

First we describe the old-fashioned way of performing this very basic task. Then we provide code using up-to-date JavaScript practices. Oh yes, and we also have a jQuery plugin version of the same functionality.

How It Used To Be Done

If you don't mind using event handler attributes in your html, the code is simple as can be. Here is a function that changes the innerHTML of any element; just pass the element's id and the string content to display:

function changeContent(id,shtml) {
    document.getElementById(id).innerHTML = shtml;
}

The following is an example link for onmouseover, with onmouseout restoring the original content, held in a variable:

<a href="." onmouseover="changeContent('infoDiv', 'New content here')" 
  onmouseout="changeContent('infoDiv',orig)">Hover here</a>

The same function can be applied onclick too:

<a href="" onclick="changeContent('infoDiv',msg2); return false">Click here</a>

This code works fine in virtually all browsers in current use with JavaScript enabled. Nonetheless, this approach has fallen out of favor as current practices dictate separation of concerns; that is, code and styles should be kept out of the page markup.

Changing Content with Unobtrusive Code

The new code is much more involved than the old, as you can see if you view the JavaScript file. The event handling code, helper functions to locate elements with specified classes, functions to help determine whether the mouse has actually left the element - these all add to the code's challenges.

This is why we also coded a jQuery plugin version too, just for comparison, and for fun! Not to worry though, with both the code here and the jQuery plugin version, setup is very simple.

Instructions

With behavior separate from markup, setup and maintenance is clean and easy. Just follow the steps outlined below.

Script Tags

Include script tags for the JavaScript files:

<script src="js/dw_event.js" type="text/javascript"></script>
<script src="js/dw_contentswap.js" type="text/javascript"></script>

A very small file covering browser differences in the event model is required along with the content change JavaScript file.

Element for Content Change Display

Include an element for display in your layout and attach a unique id; the default is infoDiv. But you can choose whatever id and element type you like. No need for it to be a div.

Class Names

A class name is attached to elements that have content to display onmouseover: showInfo is the default. A space, then a second class name is added as a pointer to the content for that element. An example link is set up as follows:

<a href="#" class="showInfo Link1">Link 1</a>

Settings and Content

An object literal[1] holds the settings and the data that you wish to display onmouseover. An example:

var content_swap1 = {
    // these are the default values
    // you can leave out or change
    className: 'showInfo',
    displayId: 'infoDiv',
    restoreDefault: true,
    
    // specify content here
    content: {
        Link1: 'Hello there!',
        Link2: 'Say wha?'
        // add as many as you like
        // watch the syntax though!
    }
}

An initialization function includes a call to set up the code with your data. 

dw_ContentSwap.setup(content_swap1);

You can specify more than one area for content changes to be displayed. A single link can direct changes to both (or even more) display areas. An example in the download file demonstrates.

Get the Code - It's Free!

A download file contains the code and example documents.

The Change Content Dynamically code is provided free of charge. Donations are appreciated. Please read dyn-web's Terms of Use if you plan to use our code.

  1. See our brief tutorial on Object Literals if you are unfamiliar with their use and structure. ^