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 inside swapImageOver() function: var myimage = document.getElementById("myimage"); myimage.src = "birthdayov.jpg"; 4

swapImageOver Function function swapImageOver() { var myimage = document.getElementById("myimage"); var myImageSrc = myimage.src; if (myImageSrc.indexOf("/birthday.jpg") >= 0) { myimage.src = "birthdayov.jpg"; } 5

swapImageOut Function 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 function showpixels(event) { x=event.clientX y=event.clientY var myMsg = document.getElementById("msg"); myMsg.innerHTML = "X coords: " + x + ", Y coords: " + y; } … 8

Finding the Pointer Position onMouseMove function showpixels(event) { x=event.clientX y=event.clientY var myMsg = document.getElementById("msg"); myMsg.innerHTML = "X coords: " + x + ", Y coords: " + y; } … 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 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 Select Property Type - Condos Houses Trailers 13

DIVs with Information Condos AnyStreet. San Marcos, CA Pine St. Escondido, CA Houses Main Street. Vista, CA Oak Street. Vista, CA … (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 Code var 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 viewable break; … continued next slide 16

JavaScript Code - continued case 'H': myDiv = document.getElementById("houses"); myList.innerHTML = myDiv.innerHTML; myList.style.display = "block"; //Makes div viewable break; case 'T': myDiv = document.getElementById("trailers"); myList.innerHTML = myDiv.innerHTML; myList.style.display = "block"; //Makes div viewable break; default: myList.style.display = "none"; //Makes div viewable break; } 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 Select News Site - CNN Fox MSNBC 20

JavaScript Code function openNews() { switch (mySelect.value) { case 'C': open(" "_blank"); break; case 'F': open(" "_blank"); break; case 'M': open(" "_blank"); break; } 21

Exercise 6-5 Code the Last Example and get it to work. 22

End 23