Downloaded 30 times
![Preloading Images (cont’d) More Complex Example <SCRIPT type = “text/javascript”> <!-- pic1= new Image(100,25); pic1.src="http://someplace.com/image1.gif"; //--> </SCRIPT> Defines a new image object, width of 100, height of 25 [Replace these with the width and height of your image] The second defines the url or web address of the image [Replace this with the url of your image] 13](https://image.slidesharecdn.com/3-javascriptexamples-120810015558-phpapp01/75/javascript-examples-13-2048.jpg)
Uploaded byEgerton University
javascript examples
This document discusses using JavaScript for dynamic effects like button rollovers and form validation. It provides steps for creating a button rollover effect by changing an image source on mouseover and mouseout events. It also discusses preloading images for faster rollovers and shows examples of validating form fields with techniques like length checks and regular expressions.
javascript examples
- 1. Javascript Examples Discuss regularexpressions in Java course, show their use in Javascript J M Githeko 1
- 2. Agenda Dynamic Effects:Button roll-overs Form Validation 2
- 3. Button Rollovers Imageaccess using DOM Image properties Image stored on object variables (preloading) Changing image properties using event handlers 3
- 4. Step 1: Creatingthe Basic Page <html> <head> <title>Image Rollover</title> </head> <body bgcolor="white"> <img src="screw.jpg"> </body> </html> 4
- 5. Step 2: Namingthe Image <img src="screw.jpg" name="pic1"> 5
- 6. Step 3: CreateEvent <a href="" onMouseOver="roll_this() " onMouseOut=“roll_off()”> <img src="screw.jpg" name="pic1" border=0> </a> Note: We use an anchor <a> because onMouseOver on an image is not recognized by some browsers. Note “border=‘0’” to prevent border being shown around the image 6
- 7. Step 4: Changingthe Image “src” property The image's src property can be referenced in JavaScript with "document.images.pic1.src" The term "images" refers to all of the images in a document pic1 is the name of image we shall manipulate src property is the URL of the image file 7 We can change the src property
- 8. Step 5: Creatingthe Functions <script style = “text/javascript"> function roll_this() { document.images.pic1.src="capnut.jpg"; } </script> 8
- 9. Step 5 (cont’d) functionroll_off() { document.images.pic1.src=“images/screw.jpg"; } Note: Ensure that the image files are accessible in the same directory as the source file or change image url to point elsewhere 9
- 10. Rollover for aSingle Button <a href="" onMouseOver="document.images.pic1.src='capnut.jpg'" onMouseOut="document.images.pic1.src='screw.jpg'"> </a> 10
- 11. Preloading Images Improvesspeed of rollover Images stored in image objects Giving pixel dimensions optimises memory usage Image objects created as follows: some_name = new image(100, 20); some_name.src = “images/rhino.jpg”; 11
- 12. Preloading Images (cont’d) <head> <scripttype="text/javascript"> <!-- image01= new Image() image01.src="1.gif" image02= new Image() image02.src="3.gif" //--> </script> </head> 12
- 13. Preloading Images (cont’d) More Complex Example <SCRIPT type = “text/javascript”> <!-- pic1= new Image(100,25); pic1.src="http://someplace.com/image1.gif"; //--> </SCRIPT> Defines a new image object, width of 100, height of 25 [Replace these with the width and height of your image] The second defines the url or web address of the image [Replace this with the url of your image] 13
- 14. Preloaded Images CompleteExample (cont’d) <html> <head> <script type="text/javascript"> <!-- image01= new Image(88,31) image01.src=“images/orup.jpg" image02= new Image(88,31) image02.src=“images/ordown.jpg" //--> </script> 14 </head>
- 15. Preloaded Images CompleteExample (cont’d) <body> <a href="“ onmouseover= "document.images.example.src=image02.src" onmouseout= "document.images.example.src=image01.src" > <img src=" images/ordown.jpg " name="example“ border=“0”> 15 </a>
- 16. Rollover Example <html> <head> <script type="text/javascript"> <!-- image01=new Image(36,46) image01.src="images/ordown.jpg" image02= new Image(46,52) image02.src="images/orup.jpg" function roll_out() { document.images.example.src=image02.src } function roll_in() { document.images.example.src=image01.src } //--> </script> </head> <body> <h1>Figure Out Why Only The First Button Words</h1> <a href="" onmouseover="roll_out()" onmouseout= "roll_in()" > <img src=" images/ordown.jpg " name="example" border="0"> </a> <hr> <a href="" onmouseover="roll_out()" onmouseout= "roll_in()" > <img src=" images/ordown.jpg " name="example" border="0"> </a> <hr> <a href="" onmouseover="roll_out()" onmouseout= "roll_in()" > <img src=" images/ordown.jpg " name="example" border="0"> </a> </body> </html> 16
- 17.
- 18. What is FormValidation? Form validation is the process of checking that a form has been filled in correctly before it is processed. For example, to check that user has filled in a valid email address. 18
- 19. Form Validation Usingform elements in Javascript Capturing form entries in variables Testing string attributes such as length and character sets See: http://java scriptkit.com/script/cutindex13.shtml 19
- 20. Form Elements <form onSubmit= “ …”> <input type = … name = … /> <select> <option name=… value = ….> Text 2 </option> <option name = .. value = ….>Text 2 </option> </select> </form> 20
- 21. String Length Check functioncheckUsername (strng) { var error = ""; if ((strng.length < 4) || (strng.length > 10)) { error = "The username is the wrong length.n"; } } 21
- 22. Using Regular Expressionsfor Checking Existence of Character 22