티스토리 뷰

기존 IE6 까지는 image.src = [image URL] 하면 이미지가 바뀌어 나타났었다.
하지만 IE7 에서는 바뀌지 않고 공백이 나타나버리는 현상이 발생했다.

물론 보안상 막아놨겠지만 개발자 입장에선 참으로 답답하다.
이전 글에서 .src 속성에 직접 넣는 방법이 아닌 div 태그 이용한 방법은 제시를 해보았기에
이번엔 직접 적용하는 방법을 소개한다.

※ 이 스크립트는 구글링 중 여기에서 자료를 얻어 편집했다.

1. 이미지 태그와 그것을 스크립트로 새로고치는 링크가 있다.

<img id="tmpImg" src="tmp.jpg" />
<a href="javascript:void(0)" onclick="return(RefreshImage('tmpImg'))">Change Image</a>

2. 이것에 대한 스크립트는 아래와 같다.

<script language="javascript">
function RefreshImage(valImageId) {
    if (gImageCapableBrowser) {
          var objImage = document.images[valImageId];
          if (objImage == undefined) {
               return;
          }
          var newImageURL = "새로운 이미지 경로";
         objImage.src = newImageURL;
        
         return false;
    } else {
         return true;
    }

}

function canManipulateImages() {
    if (document.images) return true;
    else return false;
}

var gImageCapableBrowser = canManipulateImages();
</script>

예전의 스크립팅 제작과 다른점은

return ← 요녀석을 많이 썼다는거다.

그 하나를 더 쓰면 IE7에서도 .src 속성은 아주 잘 작동된다.

댓글