본문 바로가기

Web/Javascript

이미지에 6개의 효과주기

<SCRIPT language="Javascript">
<!--

var Init;
var H;
var W;
var tmpH;
var tmpW;
var Opacity = 100;
var GrayScale = 0;
var FH = 0;
var FV = 0;
var Inverse = 0;
var Command;

function action()
{
        Command = 'alpha(opacity=100, style=3, finishopacity=' + Opacity +') ';
        Command += (GrayScale == 1 ? 'gray ':'');
        Command += (FH == 1 ? 'FlipH ' : '');
        Command += (FV == 1 ? 'FlipV ' : '');
        Command += (Inverse == 1 ? 'Invert' : '');
        return Command;
}

function clearEffect()
{        
        Opacity = 100;
        GrayScale = 0;
        FH = 0;
        FV = 0;
        Inverse = 0;
        Command = "";        
        imgObj.style.filter = action();
        //reSize(100);
}

function increaseOpacity()
{        
        if (Opacity >= 100) Opacity = 100;
        else Opacity += 10;
        imgObj.style.filter = action();
}

function decreaseOpacity()
{        
        if (Opacity <= 0) Opacity = 0;
        else Opacity -= 10;        
        imgObj.style.filter = action();

}

function gray()
{
        if (GrayScale == 1) GrayScale = 0;
        else GrayScale = 1;
        imgObj.style.filter = action();        
}

function vertical()
{
        if (FV == 1) FV = 0;
        else FV = 1;
        imgObj.style.filter = action();        
}

function horizontal()
{
        if (FH == 1) FH = 0;
        else FH = 1;
        imgObj.style.filter = action();        
}

function invert()
{
        if (Inverse == 1) Inverse = 0;
        else Inverse = 1;
        imgObj.style.filter = action();        
}

-->
</script>


<table border=0 cellpadding=10 cellspacing=1 width=800 bgcolor=#CCCCCC>
<tr>
        <td height=3></td>
</tr>
<tr>
        <td bgcolor=#FFFFFF><img name="imgObj" src="이미지 경로" width=800 height=600 border=0 alt="확대하기"></td>
</tr>
<tr>
        <td align=center bgcolor=#FFFFFF>
                <input type=button value="원본" class=input4 onclick="clearEffect();">
                <input type=button value="필름효과" class=input4 onclick="invert();">
                <input type=button value="흑백사진" class=input4 onclick="gray();">
                <input type=button value="투명도증가" class=input4 onclick="decreaseOpacity();">
                <input type=button value="투명도감소" class=input4 onclick="increaseOpacity();">
                <input type=button value="상하회전" class=input4 onclick="vertical();">
                <input type=button value="좌우회전" class=input4 onclick="horizontal();">
        </td>
</tr>
<tr>
        <td bgcolor=#FFFFFF>
                                        </td>
</tr>
<tr>
        <td height=3></td>
</tr>
</table>

'Web > Javascript' 카테고리의 다른 글

키코드  (0) 2013.09.26
주민번호,외국인번호,사업자번호 체크 Script  (0) 2013.09.26
전체선택 전체취소  (0) 2013.09.26
모달창  (0) 2013.09.26
한글만 입력하기  (0) 2013.09.26