## 하늘소 - Since 1989

오늘 희백이형이 홈페이지에 사진사이즈로 인한 깨짐 문제에 대한 문제점을 제기해 주셔서 수정해 보기로 하였습니다.
일단 희백이형 홈페이지 게시판을 보니 이미지 자동 리사이즈가 되고 있더군요.
여러가지 실험(?)을 통해 소스 분석을 해 보니
자바스크립트
<script>
function resize_pic()
{
if (document.pic_resize != null)
{
var i = 0;
var resize_width = 682;
var manyPics = document.pic_resize.length;

if (manyPics > 0)
{
for (i=0; i < manyPics; i++)
{
if (document.pic_resize[i].width > resize_width)
document.pic_resize[i].width = resize_width;
}
}
else
{
if (document.pic_resize.width > resize_width)
document.pic_resize.width = resize_width;
}
}
}
</script>
를 사용하고 있음을 볼 수 있었습니다.
그리고 <img src=...>테그가 자동으로 <img name=pic_resize style="cursor:hand" onclick=window.open(this.src) src=...> 변경됨을 볼 수 있었습니다.
희백이형 홈페이지는 ASP기반이지만 하늘소 홈페이지는 PHP기반이므로 PHP방식으로 설명하겠습니다.
일단 순서는 다음과 같습니다.

1. 내용에 이미지 테그가 보이면 자바스크립트에 적용시킬 수 있도록 테그를 수정
2. 자바스크립트를 이용해 이미지 사이즈를 줄임

좀 더 자세히 설명하자면
내용 테그중 "<img" 가 발견되면 "<img name=pic_resize style="cursor:hand" onclick=window.open(this.src)"로 수정
name=pic_resize
를 지정하면 이미지를 자바스크립트에서 제어가 가능해 지구요
이 부분이 가장 중요합니다.
pic_resize 가 싫다면 바꿔주시고 자바스크립트 안의 pic_resize 부분도 똑같이 바꿔주시면 됩니다.

style="cursor:hand"
는 이미지 위에 커서를 가져가면 커서 모양은 hand로 바꿔줍니다.
링크 거는 테그인 a 테그에서만 커서모양이 손으로 바뀌기 때문에 그림위에서 커서모양을 바꾸려면 스타일을 지정해 주어야 합니다.
하지만 익스플로러 계열에서만 됩니다.

onclick=window.open(this.src)"
은 그림을 클릭하면 새 창에 그림을 띄우는 기능을 합니다.

php에서 위처럼 문자열을 치환해 주려면
str_replace 함수를 사용해 줍니다.

$contents = str_replace( "<img", "<img name=pic_resize style=\"cursor:hand\" onclick=window.open(this.src)", $contents );
위처럼 사용해 주면 $contents 안의 내용중 img 테그 부분을 두번째 인자값의 형식으로 바꿔 줍니다.
하지만 대소문자 구별을 하기 때문에
"<IMG"처럼 대분자가 들어가면 바꾸어 주지 못합니다. 큰 문제는 없지만 대소문자 구별없이 바꾸어 주려면 아래와 같이 해 주시면 됩니다.

$contents = eregi_replace( "<img", "<img name=pic_resize style=\"cursor:hand\" onclick=window.open(this.src)", $contents );

다음으로 자바스크립트를 이용하여 이미지의 사이즈를 줄여줍니다.

<script>
function resize_pic()
{
if (document.pic_resize != null)
{
var i = 0;
var resize_width = 682;
var manyPics = document.pic_resize.length;

if (manyPics > 0)
{
for (i=0; i < manyPics; i++)
{
if (document.pic_resize[i].width > resize_width)
document.pic_resize[i].width = resize_width;
}
}
else
{
if (document.pic_resize.width > resize_width)
document.pic_resize.width = resize_width;
}
}
}
</script>
스크립트를 적당한(?) 부분에 삽입시켜 줍니다.
그림의 width가 resize_width 에 지정된 값보다 크면 resize_width 값으로 바꾸어 주는 기능을 합니다.
그리고 나서 body 에 onLoad부분을 추가해 줍니다.
ex) <body onload='resize_pic();'>

☞ 마무리 요약
PHP 의 문자열 치환함수를 이용하여 img 테그 수정
$contents = eregi_replace( "<img", "<img name=pic_resize style=\"cursor:hand\" onclick=window.open(this.src)", $contents );

자바 스크립트 추가 및 body onload추가

<script>
function resize_pic()
{
if (document.pic_resize != null)
{
var i = 0;
var resize_width = 682;
var manyPics = document.pic_resize.length;

if (manyPics > 0)
{
for (i=0; i < manyPics; i++)
{
if (document.pic_resize[i].width > resize_width)
document.pic_resize[i].width = resize_width;
}
}
else
{
if (document.pic_resize.width > resize_width)
document.pic_resize.width = resize_width;
}
}
}
</script>

<body onload='resize_pic();'>

임시 사이드바

최근 글

최근 꼬릿글