MouseOver/MouseOut
|
In current
textbooks, the publishers place chapter key terms (glossary words) as
definitions in the margins for students to be able to quickly view these
definitions as they read the text (see the definitions below the image in the
example marked Figure 1: Sample Page located at the bottom of this
page). In articles that are not in this format (other than textbooks),
there are two alternatives that may help students learn the material.
Both methods involve reading text from a web browser/webpage format.
The first example, using JavaScript is more complicated and is shown
first. The second example uses the html title tag and is a more simple, straight forward execution and is shown below
the JavaScript code of example 1. The text in
these examples are from an Introduction to Business textbook using a
page from a chapter on Business Ethics and demonstrates how these
methods would be of value to this discipline, one that typically requires
significant amount of vocabulary to understand the material. Reading
text from a webpage using JavaScript: The first
example is a MouseOver/MouseOut
events that use JavaScript to display a box with the
definition of the highlighted term. MouseOver
means to move the cursor on the screen over a specific area on the
screen. MouseOut
is the opposite or moving the cursor away from a designated area of the
screen. JavaScript, through code, will
allow the box to appear when you mouse over the text and disappear when you
mouse out or away from the text. The following snippet of text demonstrates
this use of JavaScript. Simply move your mouse over the terms Ethical Dilemma and Ethics in the text below to
see what JavaScript can do. Notice that when you MouseOut,
the boxes disappear.
In the above
examples, the textboxes that appear simply repeat the definition.
Throughout the chapter, the technology behind these terms can be duplicated
every time the terms appear in the text. This method takes some web
programming skills but is not a difficult task to accomplish for any person
who has some html web page programming skills. The code that is
involved is produced here below. Notice that to implement this method,
one copies and pastes the code into the webpage
noted in 3 section. Then it only requires a little bit of
"tweaking" to get the desired final
product. Note: The
codelibrary.js text file referred to in the section one code is a generic set
of instructions that will allow any code that is passed to it to execute the
textboxes. That text file is reprinted at the bottom of this page and
should be saved in a separate text file using the codelibary.js name. Section One
Code: <!-- Add the following lines to your page. Copy
to the tag marked 'end of section one'. Paste this
code just before the </head> tag on your page. --> <meta name="keywords"
content="hypertext
using mouse events"> <meta name="description"
content="gives
example of using textboxes to show additional text on a mouseover
event and hide the text on a mouseout
event."> <!-- Copy
the codelibrary.js file by right clicking on the hyperlink and choosing 'Save
Target As' to save the file to your site. Alternatively,
add the full path to the location of the text file. --> <script src="codelibrary.js" type="text/javascript"></script> <script type="text/javascript"> var htwidth = 300; var availwidth = ""; function init(){ availwidth = getAvailableWidth(); if (availwidth < 600){ setWindowSize(700,500); } } function doHT(evt,elementID,vis){ init(); if (window.event){ evt = window.event; } if (evt){ if (vis=="visible"){ var x = evt.clientX; if (x > availwidth-htwidth) { x=availwidth-htwidth-30; } var y = evt.clientY + 15; var z = 4; }else{ var x = 0; var y = 0; var z = 0; } shiftTo(elementID,x,y,z); setVisibility(elementID,vis); } } </script> <style type="text/css"> body {background:white; color:black;font-family:serif;} h3 {font-family:sans-serif; color:maroon;} b {color:maroon;} a:link {color: maroon; text-decoration:underline; font-weight:bold;} a:visited {color: maroon; text-decoration:underline; font-weight:bold;} a:active {color: maroon; text-decoration:underline; font-weight:bold;} a:hover {color: maroon; text-decoration:underline; font-weight:bold;} .ht { position:absolute; left:0px; top:0px; width:250px; padding:5px; background:#FFFFCC; color:maroon; border: 3px solid
maroon; visibility:hidden; z-index:4; } </style> </head> <body onload="init();"> <!-- end of
section one --> Section Two
Code: <!-- copy this section into your page. Stop where it
says 'end of section two' You will replace your hyperlink text with this
code. Notice that there are two hyperlinks in this example.--> <b>
<a href="Dewey.htm" onmouseover="doHT(event,'dewey','visible');" onmouseout="doHT(event,'dewey','hidden');">
John Dewey,</a> </b> <b>
<a href="Piaget.htm" onmouseover="doHT(event,'piaget','visible');" onmouseout="doHT(event,'piaget','hidden');">
Jean Piaget.</a> </b> <!--
end of section two --> Section three
Code: <!-- Copy the following into your page. Stop where it
says 'end of section three' Notice that there are two <div> tags here
to correlate with the two hyperlinks above.--> <div
id="dewey" class="ht"> <p> The central focus of Dewey's
philosophical interests throughout his career was what has been traditionally
called "epistemology," or the "theory of knowledge."
</p> </div> <div
id="piaget" class="ht"> <p> Piaget's research in developmental
psychology and genetic epistemology had one unique goal: how does knowledge
grow? His answer is that the growth of knowledge is a progressive
construction of logically embedded structures superseding one another by a
process of inclusion of lower less powerful logical means into higher and
more powerful ones up to adulthood. </p> </div> <!--
end of section three --> Reading
text from a webpage using the html Title tag: When
developing a web page that includes text, one can simply execute a "find
and replace" in a word processing or web publishing program to include
the html tags that would take key terms of the chapter and make the
definition quickly available. The Find and Replace must take place in the
coding area of the page, not the design area. For example,
the word "Ethics" would be replaced with "<A title =
"The inner-guiding moral principles and values people use to analyze a
situation and decide what is “right.”>Ethics</a>". To get
the Find and Replace dialog box, simply press the Control + F keys on the
keyboard (Windows platform). The following figure shows how to
accomplish this change within the Find and Replace dialog box. Be sure
to click the Current Page and All options.
The beauty of
this method is that it is simple and by clicking the Replace All
button, every occurrence of that word in the document will now show the
definition by using the mouseover feature available
in electronic formats. The example
below shows the find and replace feature in operation. MouseOver the terms "ethical dilemma" and
"ethics" shown in blue. |
|
|
Figure 1: Sample
Page
What would you do if you
witnessed a mugging? ethical dilemma experience when they must decide whether or not they should act in a way that benefits someone else even if it harms
others and
isn’t in their own self interest. ethics moral principles and values people use to analyze a situation and decide
what is “right.” |
The Nature of Ethics Suppose you see a person being mugged in the street. How will
you behave? Will you act in some way to help even though you risk being hurt?
Will you walk away? Perhaps you might adopt a “middle-of-the-road approach”
and not intervene but call the police instead? Does the way you act depend on
whether the person being mugged is a fit male, an elderly person, or even a
street person? Does it depend on whether there are other people around,
so you can tell yourself, “Oh well, someone else will help or call the
police. I don’t need to”? Ethical Dilemmas The situation described above is an example of an ethical dilemma, the quandary people find themselves in when they have to
decide if they should act in a way that might help another person or group,
and is the “right” thing to do, even though doing so might not be in their
own self-interest. A dilemma may also arise when a person has to decide
between two different courses of action, knowing that whichever course he or
she chooses will result in harm to one person or group even though it may
benefit another. The ethical dilemma here is to decide which course of action
is the “lesser of two evils.” People often know they are confronting an
ethical dilemma when their moral scruples come into play and cause them to
hesitate, debate, and reflect upon the “rightness” or “goodness” of a course of action. Moral scruples are
thoughts and feelings that tell a person what is right or wrong; they are a
part of a person’s ethics. Ethics are
the inner-guiding moral principles, values, and beliefs people use to analyze a situation and decide
what is “right.” At the same time, ethics also indicate what inappropriate
behavior is and how a person should behave to avoid doing harm to another
person. The essential problem in dealing with ethical issues, and thus
solving moral dilemmas, is that there are no absolute or indisputable rules
or principles that can be developed to decide if an action
is ethical or unethical. Put simply, different people or groups may dispute
which actions are ethical or unethical depending on their own personal
self-interest and specific attitudes, beliefs, and values. How, therefore,
are we and companies and their managers to decide what is ethical and act
accordingly? |
Ethical Dilemma: The quandary people experience when they must decide
whether or not they should act in a way that benefits someone else even if it
harms others and isn’t in their own self interest.
Ethics: The inner-guiding moral principles and values people use
to analyze a situation and decide what is “right.”
The
above Figure 1: Sample Page text was copied from:
http://highered.mcgrawhill.com/sites/dl/free/0073524565/324445/jon24565_ch05.pdf,
page 141
CodeLibrary.js code
/* Browser Detection Script begins here. */
var theDOM1 = (document.getElementById) ? true :
false;
/* theApp will contain the browser name
*/
var theApp = navigator.appName.toLowerCase();
/* UA (user agent) contains detailed browser info. For example,
UA for Internet Explorer on Mac would be 'mozilla/4.0
(compatible;
msie 5.0; mac_powerpc)' */
var UA = navigator.userAgent.toLowerCase();
/* variables for the two major browsers in existence today. */
var isIE = (UA.indexOf('msie') >= 0) ? true : false;
var isNS = (UA.indexOf('mozilla') >= 0) ? true : false;
/* 'compatible' text string is only in non-Netscape browsers */
if (UA.indexOf('compatible')>0){
isNS = false;
}
/* platform */
var thePlatform = navigator.platform.toLowerCase();
var isMAC = (UA.indexOf('mac') >=
0) ? true : false;
var isWIN = (UA.indexOf('win') >=
0) ? true : false;
/* Most UNIX users use X-Windows so this detects UNIX most of
the time.*/
var isUNIX = (UA.indexOf('x11') >=
0) ? true : false;
/* browser version */
var version = navigator.appVersion;
var isMajor = parseInt( version );
/* Internet Explorer version 5 on the Mac reports itself as
version
4. This code corrects the problem. */
if(isIE && isMAC) {
if(UA.indexOf("msie 5")) {
isMajor = 5;
var stringLoc = UA.indexOf("msie 5");
version = UA.substring(stringLoc + 5, stringLoc + 8);
}
}
/* Internet Explorer version 6 on Windows reports itself as
version
4. This code corrects the problem. */
if(isIE && isWIN) {
if(UA.indexOf("msie 6")) {
isMajor = 6;
var stringLoc = UA.indexOf("msie 6");
version = UA.substring(stringLoc + 5, stringLoc + 8);
}
if(UA.indexOf("msie 5.5")) {
isMajor = 5;
var stringLoc = UA.indexOf("msie 5.5");
version = UA.substring(stringLoc + 5, stringLoc + 8);
}
}
/* Netscape 6 reports itself as version 5 on all platforms.
This code corrects the problem. */
if(isNS && isMajor>4) {
if(UA.indexOf("netscape6"))
{
isMajor = 6;
var stringLoc = UA.indexOf("netscape6");
version = UA.substring(stringLoc + 10, stringLoc + 14);
}
}
var isMinor = parseFloat( version );
/* a function to report browser info */
function getBrowserInfo(){
var
temp="<p>";
temp += "User
Agent: " + UA + "<br>";
temp +=
"Platform: " + thePlatform + "<br>";
temp +=
"Macintosh: " + isMAC + "<br>";
temp +=
"Windows: " + isWIN + "<br>";
temp +=
"Application: " + theApp + "<br>";
temp +=
"Version: " + version + "<br>";
temp +=
"Netscape: " + isNS + "<br>";
temp +=
"Internet Explorer: " + isIE + "<br>";
temp += "Major
Version: " + isMajor + "<br>";
temp += "Full
Version: " + isMinor + "<br>";
temp += "<br>";
if (theDOM1){
temp += "You
appear to have a modern browser.<br>";
temp +=
"Netscape 6, IE 6, or IE5Mac are recommended.";
}else{
temp += "Alert!
Your browser is obsolete.<br>";
temp += "You
may enjoy the Web more if you upgrade.";
}
temp
+="<\/p>";
return temp;
}
/* End of browser detection code */
/* Convert object name string or object reference
into a valid object
reference */
function getObj(elementID){
if (typeof
elementID == "string") {
return document.getElementById(elementID);
}else{
return elementID;
}
}
/* Object Motion and Position Scripts */
/*This function places a positionable object (obj) in
three dimensions (x,y, and z).*/
function shiftTo(obj,x,y,z){
var newObj = getObj(obj);
newObj.style.left = x + "px";
newObj.style.top = y + "px";
newObj.style.zIndex = z;
}
/*This function gets the x coordinate of
a positionable
object.*/
function getObjX(obj){
return parseInt(getObj(obj).style.left);
}
/*This function gets the y coordinate of
a positionable
object.*/
function getObjY(obj){
return parseInt(getObj(obj).style.top);
}
/*This function gets the z-index of a positionable
object.*/
function getObjZ(obj){
return parseInt(getObj(obj).style.zIndex);
}
/*The emptyNode() function loops through the array of
child nodes and
removes each one.*/
function emptyNode(elementID){
var theNode = getObj(elementID);
for (i=0;i<theNode.childNodes.length;i++){
theNode.removeChild(theNode.childNodes[i]);
}
}
/*This function gets the available width
of the window.*/
function getAvailableWidth(){
var theWidth=null;
/*Netscape uses window.innerWidth */
if (window.innerWidth)
{
theWidth = window.innerWidth;
}
/*IE uses document.body.clientWidth */
if (document.body.clientWidth)
{
theWidth = document.body.clientWidth;
}
return theWidth;
}
/*This function gets the available height
of the window.
IE6.0 on Windows has a bug and returns null.*/
function getAvailableHeight(){
var theHeight = null;
/*Netscape uses window.innerHeight */
if (window.innerHeight)
{
theHeight = window.innerHeight;
}
/*IE uses document.body.clientHeight */
if (document.body.clientHeight)
{
theHeight = document.body.clientHeight;
}
return theHeight;
}
/*This function sets the total height and
width of the
window.*/
function setWindowSize(w,h){
window.resizeTo(w,h);
}
/*This function sets the size of the
window to cover all
of the screen.*/
function maximizeWindow(){
window.moveTo(0,0);
window.resizeTo(screen.availWidth,screen.availHeight);
}
/* Redirects visitors who are using outdated browsers.*/
function checkDOM(newlocation){
if (!theDOM1){
window.location.replace(newlocation);
}
}
/* This function changes the cursor.
The second argument is optional. */
function setCursor(cursortype,thisobj){
if (UA.indexOf("msie 5")>=0){
if (cursortype
== 'pointer') { cursortype='hand'; }
}
if (thisobj==null){
document.body.style.cursor = cursortype;
}else{
getObj(thisobj).style.cursor = cursortype;
}
}
/*Set the background color of an object*/
function setBackground(thisobj, color){
getObj(thisobj).style.background =
color;
}
/*Set the text color of an object*/
function setColor(thisobj, color){
getObj(thisobj).style.color = color;
}
/*Setting the visibility of an object*/
function setVisibility(obj,vis){
var theObj = getObj(obj);
if (vis
== true || vis=='visible' || vis=='y'){
theObj.style.visibility =
"visible";
}else{
theObj.style.visibility =
"hidden";
}
}
/*Getting the visibility of an object*/
function isVisible(obj) {
var theObj = getObj(obj);
return theObj.style.visibility;
}
/*Setting the display of an object*/
function setDisplay(obj,dis){
var theObj = getObj(obj);
if (dis==true || dis=='block' ||
dis=='y'){
theObj.style.display =
"block";
}else{
if (dis==false || dis=='n'){
theObj.style.display =
"none";
}else{
theObj.style.display = dis;
}
}
}
/*Getting the display of an object*/
function isDisplayed(obj) {
var theObj = getObj(obj);
return theObj.style.display;
}
/*Set the clip region of an object*/
function setClip(obj,top,right,bottom,left){
var theObj = getObj(obj);
var r = 'rect('+top+'px,'+right+'px,'+bottom+'px,'+left+'px)';
theObj.style.clip = r;
}