샘플소스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> |
'새로워지기 > 서른의 생활코딩' 카테고리의 다른 글
| 샘플소스4) javascript 기본 문서구조 : window객체 2)시간 메소드 (0) | 2011.04.22 |
|---|---|
| 샘플소스4) javascript 기본 문서구조 : window객체 1)오픈메소드 (0) | 2011.04.22 |
| 샘플소스4) javascript 기본 문서구조 ( string 객체2_예제1 ) (0) | 2011.04.19 |
| 히딩크님의 JavaScript OOP 스트레칭 (0) | 2011.04.15 |
| 숫자 객체 _ 응용 :: 가위.바위.보 게임 (0) | 2011.04.10 |
댓글