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.
Things 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.
IE renders CSS border and padding properties differently
than other popular browsers. Seemingly, IE considers the
height and width properties to be the outside dimensions of
the DIV. Other browsers, like Firefox, Opera, and Netscape,
appear to apply those properties to the DIV's content area.
To be compatible with both types of browsers, use the same
border width or padding thickness properties for all DIVS to
be swapped. Also, ensure the amount of content does not
exceed the content area of a DIV, which may change the DIV's
size.
If you do those things, you'll probably be just fine with
any browser. But do test your creation on both IE and
Firefox to verify things work okay with both.
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.
|
Subscription
|
|
Sale!
|
| |
Attitude
|
|
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.
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:
-
To sensitize text/image to a mouse click, use onclick="..."
instead of onmouseover="...".
-
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.
-
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.)
-
Try different cursor shapes just to see what they look like.
-
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.
Question:
Did you find this article interesting and understandable? How can it be improved?
Your response is anonymous.
When done typing, click anywhere outside the box. [more info]
Will Bontrager
©Copyright 2007 Bontrager Connection, LLC Bontrager Connection, LLC
Please note:
Articles on this website are presented "as is". However -
If you have a question about a CGI script, HTML, CSS, PHP, or JavaScript
Ask one of our Experts and you'll have your answer!
Click here for details.
