HOME        BACK

HTML Elements and Associated JavaScript Events: Examples

HOME        TOP

<A>...</A> Link

<A HREF="javascript_index.htm" onClick="your_age = prompt('How old are you?', 'your age');
    alert('Alert: your age is ' + your_age);
    return confirm('Are you sure you want to goto javascript_index.htm?');"
    onMouseOver="status = 'Anchor onMouseOver status'; return true;"
    onMouseOut="status = 'Anchor onMouseOut status'; return false;">
    Anchor onClick with JavaScript prompt(), alert(), and confirm() methods</A>
Anchor onClick with JavaScript prompt(), alert(), and confirm() methods

<A HREF="javascript_index.htm"
    onMouseOver="status = 'Anchor onMouseOver status return true'; return true;">Anchor onMouseOver return true</A>
Anchor onMouseOver return true

<A HREF="javascript_index.htm"
    onMouseOver="status = 'Anchor onMouseOver status return false'; return false;">Anchor onMouseOver return false</A>
Anchor onMouseOver return false

<A HREF="javascript_index.htm"
    onMouseOut="status = 'Anchor onMouseOut status return true'; return true;">Anchor onMouseOut return true</A>
Anchor onMouseOut return true

<A HREF="javascript_index.htm"
    onMouseOut="status = 'Anchor onMouseOut status return false'; return false;">Anchor onMouseOut return false</A>
Anchor onMouseOut return false

HOME        TOP

<IMG> Image

<IMG SRC="image/GoldPetals.jpg" WIDTH="100" HEIGHT="50" onClick="alert('Image onClick alert!');"><BR>

<IMG SRC="image/GoldPetals.jpg" WIDTH="100" HEIGHT="50" onMouseOver="alert('Image onMouseOver alert!');"><BR>

<IMG SRC="image/GoldPetals.jpg" WIDTH="100" HEIGHT="50" onMouseOut="alert('Image onMouseOut alert!');"><BR>

Click here to see examples of onAbort, onError, and onLoad events.

HOME        TOP

<AREA> Area

<IMG SRC="image/GoldPetals.jpg" WIDTH="100" HEIGHT="100" USEMAP="#map1">

<MAP NAME="map1">
    <AREA SHAPE="rect" COORDS="0,0,50,50" HREF="sounds/MozartNo40.mid"
       onClick="alert('Area onClick alert!');"
       TARGET="_blank" ALT="sounds/MozartNo40.mid">

    <AREA SHAPE="rect" COORDS="50,0,100,50" HREF="sounds/train.au"
       onMouseOver="alert('Area onMouseOver alert!');"
       TARGET="_blank" ALT="sounds/train.au">

    <AREA SHAPE="rect" COORDS="0,50,50,100" HREF="sounds/queserasera.mid"
       onMouseOut="alert('Area onMouseOut alert!');"
       TARGET="_blank" ALT="sounds/queserasera.mid">

    <AREA SHAPE="rect" COORDS="50,50,100,100" HREF="sounds/bark.au"
       TARGET="_blank" ALT="sounds/bark.au">
</MAP>
sounds/MozartNo40.midsounds/train.ausounds/queserasera.midsounds/bark.au

HOME        TOP

<BODY>...</BODY> Document Body

Click here to see examples of onBlur, onError, onFocus, onLoad, and onUnload.
HOME        TOP

<FRAMESET>...</FRAMESET> Frameset
<FRAME>...</FRAME> Frame

 Here is the content of  Tutorial2EventEx1Frameset1.html

<HTML>
<HEAD>
<TITLE>Tutorial 2: HTML FRAMESET, FRAME with associated JavaScript Events: Examples</TITLE>
</HEAD>
<FRAMESET cols="50%,50%"
    onBlur="alert('Frameset onBlur alert!');"
    onError="alert('Frameset onError alert!');"
    onFocus="alert('Frameset onFocus alert!');"
    onLoad="alert('Frameset onLoad alert!');"
    onUnload="alert('Frameset onUnload alert!');">
    <FRAME NAME="main-left" SRC="Tutorial2EventEx1Frameset1MainLeft.html"
        onBlur="alert('Frame MainLeft onBlur alert!');"
        onFocus="alert('Frame MainLeft onFocus alert!');">
    <FRAME NAME="main-right" SRC="Tutorial2EventEx1Frameset1MainRight.html"
        onBlur="alert('Frame MainRight onBlur alert!');"
        onFocus="alert('Frame MainRight onFocus alert!');">
    <NOFRAMES>
        <BODY>
        <H2 ALIGN="center">So, You Don't Support Frames, Eh?</H2>
        <BLOCKQUOTE>
        <P>So you don't like frames. Well, too bad for you!
       </BLOCKQUOTE>
        </BODY>
    </NOFRAMES>
</FRAMESET>

</HTML>

Here is the content of Tutorial2EventEx1Frameset1MainLeft.html

<HTML>
<HEAD>
<TITLE>Tutorial 2: HTML FRAMESET, FRAME Main Left</TITLE>
</HEAD>
<BODY onBlur="alert('Frameset Main_Left Body onBlur alert!');"
    onError="alert('Frameset Main_Left Body onError alert!');"
    onFocus="alert('Frameset Main_Left Body onFocus alert!');"
    onLoad="alert('Frameset Main_Left Body onLoad alert!');"
    onUnload="alert('Frameset Main_Left Body onUnload alert!');">
This is the left page.
</BODY>
</HTML>

Here is the content of Tutorial2EventEx1Frameset1MainRight.html

<HTML>
<HEAD>
<TITLE>Tutorial 2: HTML FRAMESET, FRAME Main Right</TITLE>
</HEAD>
<BODY onBlur="alert('Frameset Main_Right Body onBlur alert!');"
   onError="alert('Frameset Main_Right Body onError alert!');"
   onFocus="alert('Frameset Main_Right Body onFocus alert!');"
   onLoad="alert('Frameset Main_Right Body onLoad alert!');"
   onUnload="alert('Frameset Main_Right Body onUnload alert!');">
This is the right page.
</BODY>
</HTML>

Click here to see examples of FRAMESET with onBlur, onError, onFocus, onLoad, and onUnload, and FRAME with onBlur,  onFocus.

HOME        TOP

<FORM>...</FORM> Form
<INPUT> Input
<SELECT>...</SELECT> Select
<TEXTAREA>...</TEXTAREA> Text Area

 Click here to see examples of FORM with onSubmit, and onReset, INPUT with onBlur, onFocus, onChange, onClick and onSelect, SELECT with onBlur,  onFocus, and onChange, and TEXTAREA with onBlur, onFocus, onChange, and onSelect.
Hosted by www.Geocities.ws

1