Online Documentation Server
 ÏÎÈÑÊ
ods.com.ua Web
 ÊÀÒÅÃÎÐÈÈ
Home
Programming
Net technology
Unixes
Security
RFC, HOWTO
Web technology
Data bases
Other docs

 


 ÏÎÄÏÈÑÊÀ

 Î ÊÎÏÈÐÀÉÒÀÕ
Âñÿ ïðåäîñòàâëåííàÿ íà ýòîì ñåðâåðå èíôîðìàöèÿ ñîáðàíà íàìè èç ðàçíûõ èñòî÷íèêîâ. Åñëè Âàì êàæåòñÿ, ÷òî ïóáëèêàöèÿ êàêèõ-òî äîêóìåíòîâ íàðóøàåò ÷üè-ëèáî àâòîðñêèå ïðàâà, ñîîáùèòå íàì îá ýòîì.




Previous Table of Contents Next

onMouseOver

A mouseOver event occurs each time the mouse pointer moves into an object or an area, from outside that object or area. Upon this event, the onMouseOver event handler executes a JavaScript code. The syntax of a general script to accomplish it is as follows:

<A … onMouseOver="validJavaScriptCode">
<AREA … onMouseOver="validJavaScriptCode">

If the mouse moves from one area of a client-side image map to another, it is the onMouseOver event handler of the destination area (the one you are moving to) that is being triggered.

Instead of having its URL displayed by default in the status bar whenever the user places the mouse over it, this event handler is often used to display a message associated with a link. (You must return true from the event handler.) The following link, for example, displays “Cool shareware stuff” in the status bar, when the user places the mouse over the link labeled “Jumbo”:

<A HREF="http://www.jumbo.com" onMouseOver="window.status = 'Cool
  shareware stuff';return true">Jumbo</A>

If you prefer to use a function, you should return true in the following fashion:

<SCRIPT LANGUAGE="JavaScript">
<!--

function displayStatus(str) {
  window.status = str
  return true
}

// -->
</SCRIPT>
<A HREF="http://www.jumbo.com" onMouseOver="return displayStatus('Cool
  shareware stuff')">Jumbo</A>

Alternatively, you may choose to explicitly return a true value by adding a statement to the event handler code.

onMouseOut

A mouseOut event occurs each time the mouse pointer leaves an area within a client-side image map or a link, from inside that area or link. The onMouseOut event handler executes a JavaScript code upon this event.

If the mouse moves from one area to another in a client-side image map, the onMouseOut event handler of the source area is triggered, and the onMouseOver event handler of the destination area is triggered.

If you want an area to use the onMouseOut or the onMouseOver event handler, you should specify the HREF attribute of the <AREA> tag. Nice effects can be achieved by an in-concert usage of the onMouseOver and the onMouseOut event handlers. Upon placing the pointer over a link or over an image map area, for example, you can display a message in the status bar, and then, instead of waiting for an arbitrary number of seconds, you can delete it immediately upon the removal of the mouse pointer. The following code demonstrates how to implement such an effect:

<A HREF="http://www.jumbo.com" onMouseOver="window.status = 'Cool
shareware stuff'; return true" onMouseOut="window.status
= ''; return true">Jumbo</A>

Note that a similar effect can be achieved with an image map area instead of a link. Example 23-1 demonstrates both onMouse event handlers, for a client-side image map. First, take a look at the image map in Figure 23-1:


Figure 23-1.  The image used for the client-side image map.

When the user clicks the “H” area, the word “Hyper” is displayed in an alert box. When he or she clicks the “T” area, “Text” is displayed, and so forth with “Markup” and “Language.” When the mouse pointer is over a certain letter, the corresponding word (“Hyper,” “Text,” “Markup,” “Language”) is displayed in the status bar. When the mouse pointer is removed from the image map, the status bar is blanked (only in Navigator 3.0 and above). Now, take a look at the listings of Example 23-1 to find out how this example works.

<HTML>
<HEAD>
<TITLE>Client-side image map</TITLE>
</HEAD>
<BODY BGCOLOR="#ffffff">
<IMG SRC="img23-1.gif" HEIGHT=69 WIDTH=214 ALT="HTML" BORDER=0
   USEMAP="#html_map">
<MAP NAME="html_map">
<AREA
NAME="H"
COORDS="0, 0, 55, 69"
HREF="javascript:alert('Hyper')"
SHAPE="rect"
onMouseOver="window.status = 'Hyper'; return true"
onMouseOut="window.status = ''; return true">
<AREA
NAME="T"
COORDS="56, 0, 101, 69"
HREF="javascript:alert('Text')"
SHAPE="rect"
onMouseOver="window.status = 'Text'; return true"
onMouseOut="window.status = ''; return true">
<AREA
NAME="M"
COORDS="102, 0, 161, 69"
HREF="javascript:alert('Markup')"
SHAPE="rect"
onMouseOver="window.status = 'Markup'; return true"
onMouseOut="window.status = ''; return true">
<AREA
NAME="L"
COORDS="161, 0, 214, 69"
HREF="javascript:alert('Language')"
SHAPE="rect"
onMouseOver="window.status = 'Language'; return true"
onMouseOut="window.status = ''; return true">
</MAP>
</BODY>
</HTML>

Example 23-1. JavaScript to handle the image map areas.

Previous Table of Contents Next


With any suggestions or questions please feel free to contact us