이 글에서는 사진의 불투명도를 조절하는 것과 칼라를 흑백으로 하여 이미지를 롤오버하는 것에 대해서 알아본다. 이것은 우리나라 사람이 많이 사용하는 익스플로러 7,8에서도 되니 걱정 말기 바란다. 내가 아래에서 하는 것은 http://min-blog.tistory.com에서 많이 사용하는 방법이다.
위 사진은 투명도 조절을 사용한 롤오버이다. 크롬,사파리,파이어폭스,익스플로러9/10 등 최신 브라우저는 CSS3의 Opacity를 지원하여 간단히 opacity 수치를 주면 된다. 그러나 우리나라 사람이 많이 사용하는 익스플로러 7,8의 경우 CSS3의 Opacity 속성을 지원하지 않아 filter:alpha(opacity=수치)을 더해야 한다. 익스플로러....
모든 익스플로러(IE)와 크롬(Chrome),사파리(Safari),파이어폭스(Firefox) 등에서 만족하도록 하고 싶다면 opacity:수치; filter:alpha(opacity=수치) 처럼 해야 한다. 예로 아래는 opacity:0.7; filter:alpha(opacity=70); 라고 했다. 참고로 opacity를 불투명도라고 하고, 투명도는 transparency라고 한다.
위는 컬러를 흑백으로 만드는 경우이다. 나의 익스플로러8,크롬,사파리,파이어폭스로 봤더니 제대로 나왔다. IE Tester로 익스플로러7로 봤고 거기서도 잘 나왔다.원본 사진에 아래 소스를 추가한다.
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");
-webkit-filter: grayscale(0%);
그리고 마우스 포인터를 사진에 가져갔을 때 흑백으로 변하게 하기 위해서 아래 소스를 추가한다. CSS에서 마우스 포인터가 링크에 갔을 때의 선택자는 hover라는 것은 CSS를 공부한 사람은 알 것이다. 아래 소스에서 롤오버하면 흑백으로 되는 브라우저가 나와있으니 참고 바란다. 참고로 IE는 익스플로러,Firefox는 파이어폭스,Chrome은 크롬,Safari는 사파리이다. 익스플로러만 말하면 아래에 익스플로러 버전에서 6에서 9는 흑백으로 되고 10은 안 된다고 나왔다. 모든 브라우저가 흑백으로 되는 것은 아니라는 것을 알았으면 한다.
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */
filter: gray; /* IE6-9 */
-webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */
그런데 이것은 컬러사진과 흑백사진에 각각 소스를 삽입해야 하므로 상당히 귀찮다. 최근에 알았는데 아래와 같이 흑백이 컬러로 나오는 것이 효과가 좋은 것 같다. 컬러에서 흑백으로 변하는 것은 별로인 것 같다. 그냥 내 생각이다.
