more on events some more events image rollover objects select-option list control 1

More on Events

• Some More Events• Image Rollover• Objects• Select-Option List Control

1

More Events• Moving a mouse pointer over some text– onMouseMove, onMouseDown, onMouseUp,

onMouseOver, onMouseOut• Changing Focus– onBlur, onFocus

• Entering Text– onKeyPress, onKeyDown, onKeyUp

• Choosing an item from a Select-Option list– onChange, onSelect, onBlur, onFocus

2

Simple Image RollOver• Turn this… Into this…

3

Simple Image RollOver Code

• onMouseOver, onMouseOut

<img id="myimage" src="birthday.jpg" onmouseover="swapImageOver();" onmouseout="swapImageOut();">

inside swapImageOver() function:

var myimage = document.getElementById("myimage"); myimage.src = "birthdayov.jpg";

4

swapImageOver Function<img id="myimage" src="birthday.jpg" onmouseover="swapImageOver();"

onmouseout="swapImageOut();">

function swapImageOver(){

var myimage = document.getElementById("myimage");var myImageSrc = myimage.src;

if (myImageSrc.indexOf("/birthday.jpg") >= 0){

myimage.src = "birthdayov.jpg";}

}

5

swapImageOut Function<img id="myimage" src="birthday.jpg" onmouseover="swapImageOver();"

onmouseout="swapImageOut();">

function swapImageOut(){

var myimage = document.getElementById("myimage");var myImageSrc = myimage.src;

if (myImageSrc.indexOf("/birthdayov.jpg") >= 0){

myimage.src = "birthday.jpg";}

}

6

Exercise 6-1

• Code a Mouse RollOver using the following images…

• UnBirthday

• UnBirthday_Over

7

Finding the Pointer Position• onMouseDown

<script>function showpixels(event){

x=event.clientXy=event.clientY

var myMsg = document.getElementById("msg");myMsg.innerHTML = "X coords: " + x + ", Y coords: " + y;

}</script>

…<div id="msg"></div><div onMouseDown="showpixels(event)" style="width: 1200px; height: 1200px""></div>

8

Finding the Pointer Position• onMouseMove

<script>function showpixels(event){

x=event.clientXy=event.clientY

var myMsg = document.getElementById("msg");myMsg.innerHTML = "X coords: " + x + ", Y coords: " + y;

}</script>

…<div id="msg"></div><div onMouseMove="showpixels(event)" style="width: 1200px; height: 1200px""></div>

9

Select-Option List Control

• Taking action from the select-list– "Opening" hidden divs– Opening new windows

10

Exercise 6-3

• Click on the following Web page and the "Save AS a Complete Web Page"– Beatles Page

• Open up the HTML file in a Text Editor and remove the current JavaScript code

• Detect the x, y coordinates and determine which "Beatle's Square" you have clicked, display an alert() for John, Paul, George, Ringo depending on what you clicked

11

Example

12

Select "Condos" and open up hidden div…

Code on next few slides…

DIV with SELECT-OPTION

<div id="selectdiv"><h1>Select Property Type</h1>

<select size="1" id="myselect" onChange="showDiv();"><option value="-">-</option><option value="C">Condos</option><option value="H">Houses</option><option value="T">Trailers</option>

</select></div>

13

DIVs with Information<div id="mylist" style="display: none"></div>

<div id="condos" style="display: none"><br><b>Condos</b><br>1. 123 AnyStreet. San Marcos, CA<br>2. 456 Pine St. Escondido, CA

</div>

<div id="houses" style="display: none"><br><b>Houses</b><br>1. 446 Main Street. Vista, CA<br>2. 123 Oak Street. Vista, CA

</div>… (more)

14

CSS for DIVs#selectdiv {

position: absolute;left: 10px;top: 10px;width: 400px;height: 400px;

}

#mylist {position: absolute;left: 410px;top: 50px;width: 400px;height: 400px;background-color: white;

}

15

JavaScript Codevar myDiv;

function showDiv(){

var mySelect = document.getElementById("myselect");var myList = document.getElementById("mylist");

switch (mySelect.value){

case 'C':myDiv = document.getElementById("condos");myList.innerHTML = myDiv.innerHTML;myList.style.display = "block"; //Makes div viewablebreak;

… continued next slide16

JavaScript Code - continuedcase 'H':

myDiv = document.getElementById("houses");myList.innerHTML = myDiv.innerHTML;myList.style.display = "block"; //Makes div viewablebreak;

case 'T':myDiv = document.getElementById("trailers");myList.innerHTML = myDiv.innerHTML;myList.style.display = "block"; //Makes div viewablebreak;

default:myList.style.display = "none"; //Makes div viewablebreak;

}}

17

Exercise 6-4• Make a Web page that looks like this

• Change the image when the user selects John, Paul, George, or Ringo

18

Opening a new Window

19

• Select a News Site

• When selection is made, open new Window

… code on next slide

HTML Code

<div id="selectdiv"><h1>Select News Site</h1><select size="1" id="myselect" onChange=" openNews();">

<option value="-">-</option><option value="C">CNN</option><option value="F">Fox</option><option value="M">MSNBC</option>

</select></div>

20

JavaScript Codefunction openNews() {

switch (mySelect.value){

case 'C':open("http://cnn.com/", "_blank");break;

case 'F':open("http://www.foxnews.com/", "_blank");break;

case 'M':open("http://msnbc.com/", "_blank");break;

}}

21

Exercise 6-5

• Code the Last Example and get it to work.

22

End

• End

23