Mouseover DIV Swap

You've seen images swapped when the cursor moves over a link or the image itself.

Today, I'll show you how to do a DIV swap. The DIVs being swapped can contain anything DIVs can contain — images, text, forms, whatever.

The article has a complete example. Code is included to copy 'n paste into your web page to see it work and to make changes.

DIV swaps can occur when a mouse moves over something, off the thing, or when the thing is clicked. The "things" are page elements such as a links or SPAN tags that have certain attributes. The attributes are onmouseover, onmouseout, and/or onclick.

The example in the article is a DIV with a portrait. When the mouse moves over certain text, the portrait DIV is swapped with another DIV. When the mouse moves off the text, the portrait DIV is restored — except in one case.

The exception is the DIV with the form. When the mouse moves off the text, the form remains visible so the visitor can use the form.

Something To Consider

Because we're swapping entire DIVs, the DIVs must all be exactly the same dimensions. Otherwise, content shifts around to accommodate the different sizes as DIVs are swapped. It creates a visually jarring effect.

How To Do It

The DIV swap takes place when the mouse hovers over mouse-sensitive text or images.

The first task is to set up the initial content DIV, the one displayed before any swaps take place. Then, position the text/images that will later be made into mouse-sensitive areas. Design these the way you want them to appear when the page first loads.

A DIV is the <div...> and </div> tags and all the content between them. The initial DIV must have a unique id, as must all DIVs to be swapped. An id is provided for a DIV tag with an attribute like this: id="myid"

The mouse-sensitive areas are text or images that will cause a DIV swap when hovered over. For now, just position the text or images. Later, they'll be made mouse-sensitive.

In the example, the initial DIV is a portrait. Mouse sensitive areas are the text at the left, right, and bottom edges of the DIV.

It is convenient to create a CSS style definition with the DIV width, height, border width, and padding thickness. Using this definition for all swapping DIVs will promote consistency. Inline styles can be used for properties that may vary from DIV to DIV.

The example swap DIVs are 90 by 115 pixels with a 1 pixel border and zero padding.

The initial DIV contains a portrait as a background image. The dimensions of the portrait are slightly less than the dimensions of the DIV, and the image is centered within the div, non-repeating. This provides a small white border around the portrait.

The only content of the initial DIV is a non-breaking space. Thus, the background image is the thing.

Here is the complete example (the source code is further below). If you already have hovered your mouse over the sensitive areas, causing the DIVs to swap, reload this page to see how things appear when a page first loads.

At this point, you will have created the initial DIV and the text/images to become mouse-sensitive areas.

Only two tasks are left: Creating the rest of the swap DIVs and mouse-sensitizing the text/images that will cause the swaps.

The rest of the swap DIVs need to be placed immediately below the initial DIV. As each is created, give it a CSS inline display:none style. See the source code of the example (further below) to see how this is done.

Now, let's mouse-sensitize the text/images that will cause the DIV swaps.

The attributes that make mouse-sensitive areas need to be in an HTML tag that encloses text and/or images. The example uses SPAN tags. But you're not limited to that. DIV, A, P, PRE, H3, TD, and others are available. Each of those tags has a corresponding closing tag to mark the end of the area to be sensitized.

Here is the format of the two attributes that will be used:

onmouseover="HideDIV('AAA');DisplayDIV('BBB')" 
onmouseout="HideDIV('BBB');DisplayDIV('AAA')"

Put those attributes into the HTML tags that contain the text/image to be mouse-sensitized. Then, in both places, replace AAA with the DIV id of the initial DIV and, again in both places, replace BBB with the id of the DIV to swap with.

Now, when the mouse moves over the sensitized area, the DIV with id AAA is hidden and the DIV with id BBB is displayed. When the mouse moves out of the area, the reverse happens, BBB is hidden and AAA is displayed.

You're good to go. But there is one more thing you might want to do.

The A link tag automatically converts a browser's mouse cursor into a shape referred to as a "pointer." Other HTML tags don't have that effect on the mouse cursor.

You can specify any available mouse cursor shape with CSS. For example, if you put this inline CSS into your mouse-sensitized tags, it will turn the cursor into a pointer just like the A tag does:

style="cursor:pointer"

Other cursor shapes are available. This cursor properties list shows the names of all the standard shapes.

If your swap DIVs are mainly concerned with providing in-depth information, the "help" shape might be more appropriate than the "pointer."

Here is the code for this article's mouseover DIV swap example.

<!-- This is the CSS definition for the swap DIV dimensions and such. -->
<style type="text/css">
.mybox { width:90px; height:115px; border-color:black; border-style:solid; border-width:1px; padding:0px; }
</style>

<!-- This JavaScript does the work when mouse-sensitive areas are triggered. -->
<script type="text/javascript" language="JavaScript"><!--
function HideDIV(d) { document.getElementById(d).style.display = "none"; }
function DisplayDIV(d) { document.getElementById(d).style.display = "block"; }
//--></script>

<!-- A table is used to place the mouse-sensitive areas around the swap DIV area. -->
<table style="margin-top:25px;margin-bottom:25px;" border="0" cellpadding="0" cellspacing="0"><tr>

<!-- The mouse-sensitive area on the left of the DIV -->
<!-- Mousing over causes DIV initDiv to disappear and DIV formDiv to appear. -->
<!-- There is no mouse out sensitivity so form stays in place ready for use. -->
<td valign="middle" align="right" style="padding-right:5px">
<span onmouseover="HideDIV('initDiv');DisplayDIV('formDiv')" style="cursor:pointer">
Subscription
</span>
</td>

<!-- The swap DIVs are in this table data cell. -->
<!-- All but the initial DIV contain a CSS display:none inline style. -->
<td>
<!-- The initial DIV, id="initDiv", background image and no other visible content. -->
<div id="initDiv" class="mybox" style="background-image:url('/images/20000710w80105.jpg'); background-position:center center; background-repeat:no-repeat;">
 
</div>

<!-- DIV id="formDiv", a form. -->
<div id="formDiv" class="mybox" style="display:none;":>
<div style="text-align:center; margin-top:25px;">
<form style="margin:0">
Email:<br />
<input type="text" style="width:76px">
<input type="button" style="width:76px" value="Click" onclick="alert('Demonstration only')">
</form>
</div>
</div>

<!-- DIV id="saleDiv", red text on yellow background. -->
<div id="saleDiv" class="mybox" style="display:none; text-align:center; background-color:yellow;":>
<div style="font-family:serif; font-size:20px; color:red; font-weight:bold; line-height:20px; margin-top:10px;">
Sale<br />
days<br />
are<br />
here<br />
now!
</div>
</div>

<!-- DIV id="smileDiv", same background image as teh initial DIV, this one with text content. -->
<div id="smileDiv" class="mybox" style="display:none; background-image:url('/images/20000710w80105.jpg'); background-position:center center; background-repeat:no-repeat; text-align:center;">
<div style="font-family:serif; font-size:22px; color:blue; font-weight:bold; line-height:33px; margin-top:10px;">
Smile!<br />
Smile!<br />
Smile!
</div>
</div>

</td>

<!-- The mouse-sensitive area on the right of the DIV -->
<!-- Mousing over causes both DIVs initDiv and formDiv to disappear (either might be visible) and DIV saleDiv to appear. -->
<!-- Mousing out causes saleDiv to disappear and initDiv to appear. -->
<td style="padding-left:5px">
<span onmouseover="HideDIV('initDiv');HideDIV('formDiv');DisplayDIV('saleDiv')" onmouseout="HideDIV('saleDiv');DisplayDIV('initDiv')" style="cursor:pointer">
Sale!
</span>
</td>

</tr><tr>

<!-- The mouse-sensitive area below the DIV -->
<!-- Mousing over causes both DIVs initDiv and formDiv to disappear (either might be visible) and DIV smileDiv to appear. -->
<!-- Mousing out causes smileDiv to disappear and initDiv to appear. -->
<td> </td>
<td align="center" style="padding-top:2px">
<span onmouseover="HideDIV('initDiv');HideDIV('formDiv');DisplayDIV('smileDiv')" onmouseout="HideDIV('smileDiv');DisplayDIV('initDiv')" style="cursor:pointer">
Attitude
</span>
</td>
<td> </td>

</tr></table>

Copy the code and put it into one of your testing web pages. It should work right out of the box.

Then modify it as you wish.

Some modifications to consider:

1. To mouse-sensitize the entire contents of a table data cell (instead of only certain text/images contained within), put the mouse sensitizing attributes directly into the TD tag.

2. Omit the onmouseout="..." attribute to keep the swapped DIV visible after the mouse moves out of the sensitized area. (The example does this for the DIV with the form.)

3. Try different cursor shapes just to see what they look like.

4. Use a background-color:transparent inline CSS style for one of the swapped DIVs. It lets the background of the web page show through.

Once you get comfortable with the DIV swap system, you'll undoubtedly have a lot of fun with it.

I do.

Will Bontrager