샘플소스4) javascript 기본 문서구조 ( string 객체2_예제2 )
이번에는 스트링 객체를 이용한 마우스 롤오버 예제를 만들어본다.
조금씩 실전에 쓰이는 예제들이 등당하기 시작한다.
보통은 이미지의 경로는 직접 지정을 해서 이미지를 보여주지만
아래의 예제를 사용하면 문자열의 일정 한 규칙에 의한 순서 또는 문자를 바꿔줌으로써
자동으로 호출할 수 있게 해준다.
이를테면,그림이 50개 또는 그 이상일 경우와 같이 일일이 다 경로를 지정하기 어려운 경우에 쓰이게된다.
우선 두장짜리 이미지 작업을 먼저 해보기로 하자.
| <!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 객체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="이미지" onmouseover="document.getElementsByTagName('img')[0].src='../images/on_img.jpg' " /> | |
| </p--> | |
| <!--p> | |
| <img src="../images/over_img.jpg" width="300" height="120" alt="이미지" onmouseover="this.src='../images/on_img.jpg' " /> | |
| </p--> | |
| <p> | |
| <img src="../images/over_img.jpg" width="300" height="120" alt="이미지" | |
| onmouseover="this.src=this.src.replace('over','on')" | |
| onmouseout="this.src=this.src.replace('on','over')" /> <!-- 같은 문자열일 경우 경로까지 바꿔준다..주의 --> |
|
| </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
