[jQuery] 자바스크립트를 이용한 이미지 그레이스케일 변환

작업 중인 사이트에서 컬러 이미지를 그레이스케일로 변환하고 마우스 오버시 테두리와 원래 이미지가 보여야 하는
기능이 필요해서 구글링을 해본 결과 쉽게 적용할 수 있는 자바스크립트 소스가 있어 급하게 테스트용으로 코드를
작성해 봤다. 아래 이미지와 같은 기능을 구현하는 것이다.

cfile8.uf.194F183C4EB7942E255FBE.js
이미지를 그레이스케일로 변환하는 자바스크립트 소스는 위 grayscale.js 파일을 다운로드 하여 사용하면 된다.
테스트에 사용한 소스코드는 아래와 같다. 그누보드 기반으로 작업 중이기 때문에 그누보드의 상수를 사용했다.

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html>
<head>
<meta http-equiv=”content-type” content=”text/html; charset=<?=$g4[‘charset’]?>”>
<script type=”text/javascript” src=”<?=$g4[‘path’]?>/js/jquery-1.6.4.min.js”></script>
<script type=”text/javascript” src=”<?=$g4[‘path’]?>/js/grayscale.js”></script>

<style type=”text/css”>
ul { margin: 0; padding: 0; list-style: none; clear: both; }
li { float: left; position: relative; width: 225px; height: 169px; border: 5px solid #ccc; margin-left: -5px; margin-top: -5px; }
img { display: block; }
.overborder { border: 5px solid #690; margin-left: -5px; margin-top: -5px; z-index: 1000; }
</style>
</head>

<body>
<ul>
    <li><img src=”<?=$g4[img_path]?>/index_good_item_01.jpg” class=”recent” /></li>
    <li><img src=”<?=$g4[img_path]?>/index_good_item_02.jpg” class=”recent” /></li>
</ul>
<ul>
    <li><img src=”<?=$g4[img_path]?>/index_good_item_01.jpg” class=”recent” /></li>
    <li><img src=”<?=$g4[img_path]?>/index_good_item_02.jpg” class=”recent” /></li>
</ul>
<ul>
    <li><img src=”<?=$g4[img_path]?>/index_good_item_01.jpg” class=”recent” /></li>
</ul>

<script type=”text/javascript”>
var idx;

$(function(){
    grayscale($(‘img.recent’)); // 이미지 그레이스케일로 변환

    $(‘img.recent’).hover(
        function() {
            idx = $(‘img.recent’).index($(this));
            grayscale.reset($(this));
            $(‘li:has(img.recent):eq(‘ + idx + ‘)’).addClass(“overborder”);
        },function() {
            grayscale($(this));
            $(‘li:has(img.recent):eq(‘ + idx + ‘)’).removeClass(“overborder”);
        }
    );
});
</script>
</body>
</html>

jQuery를 이용해서 마우스 오버시 원래 이미지와 테두리가 그려지도록 했다. 이 코드를 작성하면서 하나의 문제가
있었는데 그것은 float 상태에서 z-index 가 적용되지 않는 문제였다. 그래서 float 상태의 엘리먼트에 position 값을
지정해서 이 문제를 해결했다. 위 소스코드의 CSS 부분을 보면 금방 이해될 것 같다. 이 코드는 파이어폭스 7.01,
인터넷익스플로러 9, 6에서 테스트 되었고 정상 작동하는 것을 확인했다.

참고사이트 : http://blog.codovations.com/2009/12/gray-scale-images-in-all-browsers.html

편리

PHP와 MariaDB, jQuery 등을 사용해 게시판, 쇼핑몰 솔루션을 개발합니다. 그누보드5와 영카트5 개발에 참여 했습니다. Linux와 Nginx는 물론 WordPress, Git 등에도 관심이 많습니다. 자전거 타기 및 사진 촬영을 취미로 하고 있습니다.

카카오톡 플러스친구 채팅 : NCUBE.NET

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.