window.document.images[배열속성].속성
그림이름.속성
image 객체의 속성
속성 |
설명 |
| name | 그림에 설정된 name 속성 값을 알려줌 |
| length | 문서에 삽입된 그림의 개수를 알려줌 |
| src | 그림의 src속성에 설정된 경로를 알려줌 |
| lowsrc | 그림의 lowsrc속성에 설정된 저해상도 그림의경로를 알려줌 |
| hspace | 그림의 hspace 속성에 설정된 좌우 여백 값을 알려줌 |
| vspace | 그림의 vspace 속성에 설정된 상하 여백 값을 알려줌 |
| width | 그림의 width 속성에 설정된 너비 값을 알려줌 |
| height | 그림의 height 속성에 설정된 길이 값을 알려줌 |
| border | 그림의 border 속성에 설정된 테두리두께를 알려줌 |
| complet | 그림 전송이 완료되면 true, 그렇지 않으면 false 값을 반환 |
image 예제
마우스를 위에 올리면 이미지 바꾸게 하기
<img src="luffy_off.jpg" width="110" height="150"
onMouseOver="this.src='luffy_on.jpg'" onMouseOut="this.src='luffy_off.jpg'" />
<img src="nami_off.jpg" width="110" height="150"
onMouseOver="this.src='nami_on.jpg'" onMouseOut="this.src='nami_off.jpg'" />
마우스를 위에 올리면 이미지 바꾸게 하기(함수사용)
<HEAD>
<script language="JavaScript">
<!--
function on(obj) {
obj.src = obj.src.replace('_off', '_on');
}
function off(obj) {
obj.src = obj.src.replace('_on', '_off');
}
-->
</script>
</HEAD>
<BODY>
<img src="luffy_off.jpg" width="110" height="150" onMouseOver="on(this)" onMouseOut="off(this)" />
<img src="nami_off.jpg" width="110" height="150" onMouseOver="on(this)" onMouseOut="off(this)" />
</BODY>
글에 마우스를 올리면 맞는 그림으로 변하게 하기
<script language="JavaScript">
<!--
pic1 = new Image;
pic1.src="./images/img1.jpg";
pic2 = new Image;
pic2.src="./images/img2.jpg";
-->
</script>
<a href="#" onMouseOver="document.images.text.src=pic1.src" onMouseOut="document.images.text.src=pic1.src"> | <a href="#" onMouseOver="document.images.text.src=pic2.src" onMouseOut="document.images.text.src=pic2.src">
페이드인 페이드 아웃 효괄르 주면서 자동으로 바뀌는 이미지
<script language="javascript">
<!--
var img1 = new Image();
var img2 = new Image();
var img3 = new Image();
img1.src="./img1.jpg";
img2.src="./img2.jpg";
img3.src="./img3.jpg";
var maxLoops=3;
var interval=3;
var count=2;
function init(){
picture1.filters.blendTrans.apply();
//document.images.picture1.play();
document.images.picture1.src=eval("img"+count+".src");
picture1.filters.blendTrans.play();
if(count<maxLoops)
{
count++
}
else
{
count=1;
}
setTimeout(init,8000);
}
//-->
</script>
<div style="position:absolute:z-index:10;top160;left:170;width:186">
<img src="./img1.jpg" name="picture1" border="0" style="filter:blendTrans(duration=3)" width="300" height="250">
</div>
반응형
'웹프로그래밍 > javascript' 카테고리의 다른 글
| math 객체 (0) | 2011.03.02 |
|---|---|
| javascript - event 객체 (0) | 2011.03.02 |
| javascript - frame 객체 (0) | 2011.03.02 |
| javascript - Array객체 (0) | 2011.03.02 |
| javascript - Date 객체 (0) | 2011.03.02 |