Sample Source 4) JavaScript Basic Document Structure (String Object 2 — Example 2)
This time, we'll create a mouse rollover example using the String object.
Step by step, real-world examples start to appear.
Normally you display an image by specifying its path directly,
but the example below lets you call the image automatically by swapping the order or characters of a string by a certain rule.
For instance, when there are 50 or more images, specifying each path individuallyIt comes in handy when that's hard to do.
Let's start by working with just two images first.
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" | |
| "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> | |
| <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ko" lang="ko"> |
|
| <head> | |
| <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" /> | |
| <title> string object 3</title> | |
| <meta name="Keywords" content="" /> | |
| <meta name="Description" content="" /> | |
| <script type="text/javascript"> | |
| //<![CDATA[ | |
| //]]]]> | |
| </script> | |
| </head> |
|
| <body> | |
| <!--p> | |
| <img src="../images/over_img.jpg" width="300" height="120" alt="image" onmouseover="document.getElementsByTagName('img')[0].src='../images/on_img.jpg' " /> | |
| </p--> | |
| <!--p> | |
| <img src="../images/over_img.jpg" width="300" height="120" alt="image" onmouseover="this.src='../images/on_img.jpg' " /> | |
| </p--> | |
| <p> | |
| <img src="../images/over_img.jpg" width="300" height="120" alt="image" | |
| onmouseover="this.src=this.src.replace('over','on')" | |
| onmouseout="this.src=this.src.replace('on','over')" /> <!-- when the strings match, even the path gets swapped — careful --> |
|
| </p> | |
| </body> |
|
| </html> |
- Open in Google Docs Viewer
- Open link in new tab
- Open link in new window
- Open link in new incognito window
- Download file
- Copy link address
- Edit PDF File on PDFescape.com
