홈페이지에 첨부된 모든 이미지에 플래시 효과 주는 법?
본문
그런 방법 있으려나요? 예를 들어, 눈 내리는 효과나 비 내리는 효과라든지...
즉,
홈페이지에 체에디터나 첨부파일로 올리면 이미지 주소가 아래 두 가지 형식이 되잖아요.
<img src=체에디터 이미주 주소>
<img src=첨부파일 이미주 주소>
빌더 구성 요소 이미지는 제외하고, 이렇게 순수하게 게시판에 첨부된 이미지에만 특정 플래시 효과를 주고 싶습니다.
플래시가 안 되면, 눈이나 비 내리는 효과가 적용된 투명한 이미지를 첨부된 이미지를 배경삼아 위로 겹치게 하고 싶습니다.
어떤 걸 응용하면 이게 가능할까요?
답변 2
음... 일단 해당 효과에 대한 투명한 이미지를 준비하시구요.
rewrite모듈로 /data/ 안에있는 이미지파일들에 접근할 경우 php를 거치도록 연결을 하고,
GD 라이브러리를 이용하여 준비한 투명한 gif효과를 위에 겹쳐씌우는 식으로 표현을 해도 될 것 같네요.
답변 고맙습니다. 초보가 하기엔 쪼깨 어렵군요.
[http://blog-imgs-44.fc2.com/w/a/r/wareureu/217.gif]
이건 어떨까요...
반복이미지. 눈이라고한다면 10px? 이정도면되죠... 큰이미지에 복잡한 패턴은 다른방법을 더 생각해봐야할것같아요 ㅎ
반복이미지가 준비 되었다면 페이지에 로딩된 모든 이미지를 불러와서 jquery의 before로 이미지 바로앞에 불러온 이미지의 가로 세로값만한 div를 생성한후 포지션을 엡솔루트로하여 백그라운드를 repeat로 주면 될것도 같은데요?ㅎㅎ
한번 해봐야겠어요 ㅎㅎ
이렇게하면 개발자모드 모르는사람은 불펌하기 힘들겠네요 ^^
나중에 성공하시면 자세한 포스팅 부탁드려요. ^^
http://175.213.133.12/
눈이미지가 없어서 로고로 도배해버렸어요 ㅎㅎㅎ
포토샵 어렵네요 ㅠㅠ 움직이는 gif 만들기 블로그같은데 찾아서 해도 못하겠어요 ㅎㅎㅎ
눈이나 별빛같은걸로 하면 분위기좀 낼수 있을것같은데...
아래는 소스에요~ㅎ
<div>
<img src="/images/mainVisual/mrspipe08.png">
</div>
<script type="text/javascript">
$(window).load(function(){
var imgInfo = $("img")[0].width, imgCount = $("img").length, i, target;
for(i = 0; i < imgCount; i++){
target = $("img")[i];
$(target).before("<div style='background:url(/wartermark.png);width:"+$("img")[i].width+"px;height:"+$("img")[i].height+"px;position:absolute;'></div>");
}
});
</script>
급해서 되는데로 막썼는데 언능 퇴근하고 다듬어야겠네요 ㅎㅎ
근데 이런건 어디에 올려야하나요?ㅎㅎ
소스 고맙습니다. ^^ 그누팁게시판이나 개발자 팁 게시판에 올리시면 될 듯 하네요.