[네가지효과] 이미지에 마우스 포인터 올렸을때 변화 주기
로빈아빠
본문
흑백 -> 칼라로 ....
<img src='./image.gif' style= filter:gray onmouseover=this.style.filter='' onmouseout=this.style.filter='gray' width=100 heigth=100>
변화를 주시고 싶은 이미지에 삽입 합니다.
style= filter:gray onmouseover=this.style.filter='' onmouseout=this.style.filter='gray'
를 삽입 합니다.
칼라 -> 흑백 이미지에 마우스 포인터 올렸을때 변화 주기
<style>
.imgbase {}
.imgover {filter:gray}
.list3 {text-align:left;padding:12 0 9 5;width:100%;background-image: url();}
.list2 {text-align:left;width:100%;padding:11 10 8 20;line-height:140%;word-break:break-all;color:#777777;}
.list {text-align:left;padding:3 0 0 15;width:100%;height:25px;border-width:1 0 0 0;border-color:#F0F0F0;border-style:dotted;}
.subject{font-size:10pt;font-family:돋움;}
</style>
style='margin:5 5 4 5;' onMouseOver=this.className='imgover' onMouseOut=this.className='imgbase' class=imgbase
그라데이션 효과 흐렸다가 원본으로 ....
<script language="JavaScript1.2">
function high(which2){
theobject=which2
highlighting=setInterval("highlightit(theobject)",50)
}
function low(which2){
clearInterval(highlighting)
which2.filters.alpha.opacity=40
}
function highlightit(cur2){
if (cur2.filters.alpha.opacity<100)
cur2.filters.alpha.opacity+=20
else if (window.highlighting)
clearInterval(highlighting)
}
</script>
style=filter:alpha(opacity=40) onmouseover=high(this) onmouseout=low(this)
그라데이션 효과 반복
<script language="JavaScript">
<!--
var globopObject;
var opIndex=0;
var cleared=true;
var direction=10;
function dynOpacity(opObject,stop){
if (stop) {
clearInterval(window.tm);
cleared=true;
opIndex=10;
return;
}
globopObject=opObject;
if (opIndex>110) direction=-4;
if (opIndex<0) direction=4;
opIndex+=direction;
globopObject.style.filter='alpha(opacity:' + opIndex + ')';
if (cleared){
window.tm=setInterval("dynOpacity(globopObject,false);",1);
cleared=false;
}
//alert(window.tm);
}
function handleevent(){
if (event.type=="mouseover")
if(event.srcElement.tagName=="IMG")
if (event.srcElement.parentElement.tagName=="A") {
dynOpacity(event.srcElement,false);
}
if (event.type=="mouseout")
if(event.srcElement.tagName=="IMG") {
event.srcElement.style.filter="";
dynOpacity(event.srcElement,true);
}
}
document.onmouseover=handleevent;
document.onmouseout=handleevent;
// -->
</script>
출처 : http://qdata.co.kr/bo/bbs/board.php?bo_table=jt&wr_id=79
<img src='./image.gif' style= filter:gray onmouseover=this.style.filter='' onmouseout=this.style.filter='gray' width=100 heigth=100>
변화를 주시고 싶은 이미지에 삽입 합니다.
style= filter:gray onmouseover=this.style.filter='' onmouseout=this.style.filter='gray'
를 삽입 합니다.
칼라 -> 흑백 이미지에 마우스 포인터 올렸을때 변화 주기
<style>
.imgbase {}
.imgover {filter:gray}
.list3 {text-align:left;padding:12 0 9 5;width:100%;background-image: url();}
.list2 {text-align:left;width:100%;padding:11 10 8 20;line-height:140%;word-break:break-all;color:#777777;}
.list {text-align:left;padding:3 0 0 15;width:100%;height:25px;border-width:1 0 0 0;border-color:#F0F0F0;border-style:dotted;}
.subject{font-size:10pt;font-family:돋움;}
</style>
style='margin:5 5 4 5;' onMouseOver=this.className='imgover' onMouseOut=this.className='imgbase' class=imgbase
그라데이션 효과 흐렸다가 원본으로 ....
<script language="JavaScript1.2">
function high(which2){
theobject=which2
highlighting=setInterval("highlightit(theobject)",50)
}
function low(which2){
clearInterval(highlighting)
which2.filters.alpha.opacity=40
}
function highlightit(cur2){
if (cur2.filters.alpha.opacity<100)
cur2.filters.alpha.opacity+=20
else if (window.highlighting)
clearInterval(highlighting)
}
</script>
style=filter:alpha(opacity=40) onmouseover=high(this) onmouseout=low(this)
그라데이션 효과 반복
<script language="JavaScript">
<!--
var globopObject;
var opIndex=0;
var cleared=true;
var direction=10;
function dynOpacity(opObject,stop){
if (stop) {
clearInterval(window.tm);
cleared=true;
opIndex=10;
return;
}
globopObject=opObject;
if (opIndex>110) direction=-4;
if (opIndex<0) direction=4;
opIndex+=direction;
globopObject.style.filter='alpha(opacity:' + opIndex + ')';
if (cleared){
window.tm=setInterval("dynOpacity(globopObject,false);",1);
cleared=false;
}
//alert(window.tm);
}
function handleevent(){
if (event.type=="mouseover")
if(event.srcElement.tagName=="IMG")
if (event.srcElement.parentElement.tagName=="A") {
dynOpacity(event.srcElement,false);
}
if (event.type=="mouseout")
if(event.srcElement.tagName=="IMG") {
event.srcElement.style.filter="";
dynOpacity(event.srcElement,true);
}
}
document.onmouseover=handleevent;
document.onmouseout=handleevent;
// -->
</script>
출처 : http://qdata.co.kr/bo/bbs/board.php?bo_table=jt&wr_id=79
관련링크
댓글목록
등록된 댓글이 없습니다.