![Page 1: More on Events Some More Events Image Rollover Objects Select-Option List Control 1](https://reader033.vdocuments.net/reader033/viewer/2022050819/5697bf921a28abf838c8f301/html5/thumbnails/1.jpg)
More on Events
• Some More Events• Image Rollover• Objects• Select-Option List Control
1
![Page 2: More on Events Some More Events Image Rollover Objects Select-Option List Control 1](https://reader033.vdocuments.net/reader033/viewer/2022050819/5697bf921a28abf838c8f301/html5/thumbnails/2.jpg)
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
![Page 3: More on Events Some More Events Image Rollover Objects Select-Option List Control 1](https://reader033.vdocuments.net/reader033/viewer/2022050819/5697bf921a28abf838c8f301/html5/thumbnails/3.jpg)
Simple Image RollOver• Turn this… Into this…
3
![Page 4: More on Events Some More Events Image Rollover Objects Select-Option List Control 1](https://reader033.vdocuments.net/reader033/viewer/2022050819/5697bf921a28abf838c8f301/html5/thumbnails/4.jpg)
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
![Page 5: More on Events Some More Events Image Rollover Objects Select-Option List Control 1](https://reader033.vdocuments.net/reader033/viewer/2022050819/5697bf921a28abf838c8f301/html5/thumbnails/5.jpg)
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
![Page 6: More on Events Some More Events Image Rollover Objects Select-Option List Control 1](https://reader033.vdocuments.net/reader033/viewer/2022050819/5697bf921a28abf838c8f301/html5/thumbnails/6.jpg)
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
![Page 7: More on Events Some More Events Image Rollover Objects Select-Option List Control 1](https://reader033.vdocuments.net/reader033/viewer/2022050819/5697bf921a28abf838c8f301/html5/thumbnails/7.jpg)
Exercise 6-1
• Code a Mouse RollOver using the following images…
• UnBirthday
• UnBirthday_Over
7
![Page 8: More on Events Some More Events Image Rollover Objects Select-Option List Control 1](https://reader033.vdocuments.net/reader033/viewer/2022050819/5697bf921a28abf838c8f301/html5/thumbnails/8.jpg)
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
![Page 9: More on Events Some More Events Image Rollover Objects Select-Option List Control 1](https://reader033.vdocuments.net/reader033/viewer/2022050819/5697bf921a28abf838c8f301/html5/thumbnails/9.jpg)
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
![Page 10: More on Events Some More Events Image Rollover Objects Select-Option List Control 1](https://reader033.vdocuments.net/reader033/viewer/2022050819/5697bf921a28abf838c8f301/html5/thumbnails/10.jpg)
Select-Option List Control
• Taking action from the select-list– "Opening" hidden divs– Opening new windows
10
![Page 11: More on Events Some More Events Image Rollover Objects Select-Option List Control 1](https://reader033.vdocuments.net/reader033/viewer/2022050819/5697bf921a28abf838c8f301/html5/thumbnails/11.jpg)
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
![Page 12: More on Events Some More Events Image Rollover Objects Select-Option List Control 1](https://reader033.vdocuments.net/reader033/viewer/2022050819/5697bf921a28abf838c8f301/html5/thumbnails/12.jpg)
Example
12
Select "Condos" and open up hidden div…
Code on next few slides…
![Page 13: More on Events Some More Events Image Rollover Objects Select-Option List Control 1](https://reader033.vdocuments.net/reader033/viewer/2022050819/5697bf921a28abf838c8f301/html5/thumbnails/13.jpg)
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
![Page 14: More on Events Some More Events Image Rollover Objects Select-Option List Control 1](https://reader033.vdocuments.net/reader033/viewer/2022050819/5697bf921a28abf838c8f301/html5/thumbnails/14.jpg)
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
![Page 15: More on Events Some More Events Image Rollover Objects Select-Option List Control 1](https://reader033.vdocuments.net/reader033/viewer/2022050819/5697bf921a28abf838c8f301/html5/thumbnails/15.jpg)
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
![Page 16: More on Events Some More Events Image Rollover Objects Select-Option List Control 1](https://reader033.vdocuments.net/reader033/viewer/2022050819/5697bf921a28abf838c8f301/html5/thumbnails/16.jpg)
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
![Page 17: More on Events Some More Events Image Rollover Objects Select-Option List Control 1](https://reader033.vdocuments.net/reader033/viewer/2022050819/5697bf921a28abf838c8f301/html5/thumbnails/17.jpg)
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
![Page 18: More on Events Some More Events Image Rollover Objects Select-Option List Control 1](https://reader033.vdocuments.net/reader033/viewer/2022050819/5697bf921a28abf838c8f301/html5/thumbnails/18.jpg)
Exercise 6-4• Make a Web page that looks like this
• Change the image when the user selects John, Paul, George, or Ringo
18
![Page 19: More on Events Some More Events Image Rollover Objects Select-Option List Control 1](https://reader033.vdocuments.net/reader033/viewer/2022050819/5697bf921a28abf838c8f301/html5/thumbnails/19.jpg)
Opening a new Window
19
• Select a News Site
• When selection is made, open new Window
… code on next slide
![Page 20: More on Events Some More Events Image Rollover Objects Select-Option List Control 1](https://reader033.vdocuments.net/reader033/viewer/2022050819/5697bf921a28abf838c8f301/html5/thumbnails/20.jpg)
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
![Page 21: More on Events Some More Events Image Rollover Objects Select-Option List Control 1](https://reader033.vdocuments.net/reader033/viewer/2022050819/5697bf921a28abf838c8f301/html5/thumbnails/21.jpg)
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
![Page 22: More on Events Some More Events Image Rollover Objects Select-Option List Control 1](https://reader033.vdocuments.net/reader033/viewer/2022050819/5697bf921a28abf838c8f301/html5/thumbnails/22.jpg)
Exercise 6-5
• Code the Last Example and get it to work.
22
![Page 23: More on Events Some More Events Image Rollover Objects Select-Option List Control 1](https://reader033.vdocuments.net/reader033/viewer/2022050819/5697bf921a28abf838c8f301/html5/thumbnails/23.jpg)
End
• End
23