1 / 23

More on Events

More on Events. Some More Events Image Rollover Objects Select-Option List Control. More Events. Moving a mouse pointer over some text onMouseMove, onMouseDown, onMouseUp, onMouseOver, onMouseOut Changing Focus onBlur, onFocus Entering Text onKeyPress, onKeyDown, onKeyUp

clara
Download Presentation

More on Events

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

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

  2. 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

  3. Simple Image RollOver • Turn this… Into this…

  4. 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";

  5. 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"; } }

  6. 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"; } }

  7. Exercise 6-1 • Code a Mouse RollOver using the following images… • UnBirthday • UnBirthday_Over

  8. Finding the Pointer Position • onMouseDown <script> function showpixels(event) { x=event.clientX y=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>

  9. Finding the Pointer Position • onMouseMove <script> function showpixels(event) { x=event.clientX y=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>

  10. Select-Option List Control • Taking action from the select-list • "Opening" hidden divs • Opening new windows

  11. 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

  12. Example Select "Condos" and open up hidden div… Code on next few slides…

  13. 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>

  14. 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)

  15. 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; }

  16. 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

  17. 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; } }

  18. Exercise 6-4 • Make a Web page that looks like this • Change the image when the user selects John, Paul, George, or Ringo

  19. Opening a new Window • Select a News Site • When selection is made, open new Window • … code on next slide

  20. 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>

  21. JavaScript Code function 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; } }

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

  23. End • End

More Related