Mouseover Message
There are instances where a mouseover message makes sense. Here are a few examples.
-
To provide a definition of a technical term.
-
To present a photo that might otherwise distract from the purpose of the web page.
-
To disclose the source of a statement.
-
To reveal an ad related to a term.
-
To use as an easter egg, revealing a solution or a piece of a puzzle or a discount code to those who have the savvy or luck to run their mouse pointer over the right place.
Implementing this Mouseover Message system requires some some CSS, JavaScript, and the mouseover message itself.
The system is designed so when the CSS and JavaScript are available to the page, mouseover messages can be inserted anywhere in the article.
The JavaScript and the CSS can both be imported into web pages site wide, ready for mouseover messages. (The mouseover CSS probably will fit within your site's CSS file.)
Inserting mouseover messages into articles is fairly simple. But the CSS and the JavaScript need to be in place first.
An example
In this example, the words with a message are double-underlined with light blue and the background is light gray. Style it and the message box as you please with CSS.
The CSS
There are two CSS definitions. The first, for the content being moused over, is optional. The second is the CSS definition for the message box being revealed.
The content being moused over – here is the CSS class used in the example for the content that, when the mouse pointer moves over it, reveals a message. The class name can be any valid class name. (Actually, a class isn't required; but one would generally style the mouseover content differently than the surrounding text.)
.mousemessagelink {
border-bottom:3px double #99f;
background-color:#efefef;
}
The message box being revealed – Here is the CSS style used in the example message box. Note that the id value of the div for the message box must be mouseover_message_box
#mouseover_message_box {
display:none;
position:absolute;
background-color:#fff;
border:1px solid #000;
padding:10px;
max-width:200px;
}
Although additional CSS definitions may be specified for the message box, these four are required:
display:none; — The JavaScript will display and remove the message box as appropriate.
position:absolute; — The JavaScript will position the message box in relation to the mouse pointer's position.
background-color:... — The background color can be any valid color. The background-color definition is necessary to make the background opaque and keep the underlying content from showing through the message area of the box.
max-width:... — This isn't strictly necessary, the width can be unconstrained or a width: definition can be used instead of max-width:. With max-width:, the width of the message box expands until it reaches the max-width: value, after which the remaining text wraps.
The #mouseover_message_box CSS definition is used in the JavaScript.
The JavaScript
Here is the JavaScript. The two places to customize in the JavaScript are described following the source code.
<script type="text/javascript">
/*
Mouseover Message
Version 1.0
July 17, 2013
Will Bontrager Software, LLC
https://www.willmaster.com/
Copyright 2013 Will Bontrager Software, LLC
This software is provided "AS IS," without
any warranty of any kind, without even any
implied warranty such as merchantability
or fitness for a particular purpose.
Will Bontrager Software, LLC grants
you a royalty free license to use this
software provided this notice appears
on all copies.
*/
// Customization section --
// Specify the pixel distance from the mouse pointer for the top-left
// corner of the message box. Negative values are acceptable.
var MousePointerToTopOfBox = 5;
var MousePointerToLeftOfBox = -30;
// End of customization section.
document.write('<div id="mouseover_message_box"></div>');
var cX = 0; var cY = 0; var rX = 0; var rY = 0;
var DivPtr = document.getElementById("mouseover_message_box");
if(document.all) { document.onmousemove = UpdateMousePointerPositionDocAll; }
else { document.onmousemove = UpdateMousePointerPosition; }
function UpdateMousePointerPosition(e){ cX = e.pageX; cY = e.pageY;}
function UpdateMousePointerPositionDocAll(e){ cX = event.clientX; cY = event.clientY;}
function UndisplayMessage() { DivPtr.style.display = "none"; }
function DisplayMessage(d)
{
var s = d.innerHTML;
var i = s.indexOf('<!--');
var j = s.indexOf('-->');
DivPtr.innerHTML = s.substr((i+4),(j-i-4));
AssignPosition(DivPtr);
DivPtr.style.display = "block";
} // function DisplayMessage()
function AssignPosition(d)
{
if(self.pageYOffset)
{
rX = self.pageXOffset;
rY = self.pageYOffset;
}
else if(document.documentElement && document.documentElement.scrollTop)
{
rX = document.documentElement.scrollLeft;
rY = document.documentElement.scrollTop;
}
else if(document.body)
{
rX = document.body.scrollLeft;
rY = document.body.scrollTop;
}
if(document.all)
{
cX += rX;
cY += rY;
}
d.style.left = parseInt(cX+MousePointerToLeftOfBox) + "px";
d.style.top = parseInt(cY+MousePointerToTopOfBox) + "px";
} // function AssignPosition()
</script>
The message box appears near the mouse pointer. The two places to customize are to specify the location of the upper-left corner of the message box in relation to the location of the mouse pointer.
-
MousePointerToTopOfBox — At line 5 of the JavaScript code, specify the number of pixels from the mouse pointer to the top of the message box.
-
MousePointerToLeftOfBox — At line 6 of the JavaScript code, specify the number of pixels from the mouse pointer to the left side of the message box.
That's all the customization the JavaScript needs.
Now, let's make it all work.
The Mouseover Message
To make a mouseover message, the CSS and the JavaScript need to be either on the page or imported into the page.
In these implementation descriptions, I'll assume the class name for the words that would reveal a message is "mousemessagelink".
Here is how to set up content to reveal the message box when the mouse pointer hovers it.
<span class="mousemessagelink" onmouseover="DisplayMessage(this)" onmouseout="UndisplayMessage()"> visible word or phrase <!-- content for message box --> </span>
The above is a template.
Replace the red text with the text or image to be moused over.
Replace the blue text between the HTML comment tags with the content for the message box.
Let's replace the red and blue text:
<span class="mousemessagelink" onmouseover="DisplayMessage(this)" onmouseout="UndisplayMessage()"> Mr. Wolf <!-- Howls in the moonlight! --> </span>
And put the code here for a demonstration:
Mr. Wolf
The red and blue text are the only changes that need to be made. Either or both may be multi-line and may contain other span tags.
The enclosing span tag may be substituted with a div or other container tag.
Below are two more demonstrations. For each, a live example follows the demonstration code. The code coloring clues are maintained.
This demonstrates how to format content within the message box.
<span class="mousemessagelink" onmouseover="DisplayMessage(this)" onmouseout="UndisplayMessage()"> Mr. Wolf <!-- <b>Howls</b> in the <span style="background-color:silver; color:DarkSlateGray; padding-left:5px; padding-right:35px; font-weight:bold;"> moonlight!</span> --> </span>
Mr. Wolf
And this demonstrates how to use an image instead of text for the message box content.
<span class="mousemessagelink" onmouseover="DisplayMessage(this)" <span class="mousemessagelink" onmouseover="DisplayMessage(this)" onmouseout="UndisplayMessage()"> Einstein <!-- <img src="//www.willmaster.com/images/Einstein.jpg"> --> </span>
Einstein
Putting It All Together
The CSS and JavaScript need to be on the page. Both may be imported into the page.
Once the CSS and JavaScript are available on the page, any number of mouseover messages can be published.
Will Bontrager
