javascript 예제(image)
이미지 관련 예제
//html
//JavaScript
1. 버튼 클릭시 image 너비 조절
var btn1, cat01;
window.onload = function(){
btn1 = document.all["btn1"];
cat01 = document.images["cat01"];
btn1.onclick = function(){
cat01.width = 125;
};
};
2. 롤오버 이미지
var cat02;
window.onload = function(){
cat02 = document.images["cat02"];
cat02.mouseover =function(){
cat02.src = "이미지 경로";
};
cat02.mouseout = function(){
cat02.src = "../images/cat02.jpg";
};
};
3. 스위치 이미지 버튼 on off
- 스위치 on : 배경색깔 흰색
- 스위치 off: 배경색깔
var btnSwitch;
window.onload = function(){
btnSwitch = document.images["switch"];
btnSwitch.onclick =fucntion(){
if(getFileName(btnSwitch.src)=="switch_off.png"){
btnSwitch.src = "../images/switch_on.png";
document.body.bgColor = "white";
}else{
btnSwitch.src = "../images/switch_off.png";
document.body.bgColor = "black";
}
};
};
//a를 눌렀을때 스위치 on off
window.onkeydown = function(){
if(event.keyCode==65){
btnSwitch.click();
}
};
//강아지 이미지를 눌렀을때 다른 사진으로 넘기기.(5가지사진)
var dog01;
var n=1;
window.onload =function(){
dog01 = document.images["dog01"];
dog01.onclick =function(){
n++;
if(n>5){
n=1;
}
dog01.src="../images/dog0"+n+".jpg";
};
};