블로그 헤더 리뉴얼 중 발견한 FireFox 버그 하나

FireFox와 IE를 동시에 테스트하면서 FireFox의 <img> 태그의 버그를 하나 발견했습니다.

(결과적으로 사용하지는 않았지만) 헤더에 있는 4가지 메뉴에 onmouseover 이벤트에서 이미지를 바꾸는 기능과 image map을 동시에 적용해봤습니다.

즉, 아래와 같은 코드를 적었습니다.

<img src="./images/02a3.png" width="68" height="20" name="m1"
   onmouseover="document.m1.src='./images/02a4.png'"
   onmouseout="document.m1.src='./images/02a3.png'" usemap="#_m1">

이 코드에서 사용하려는 기능은 다음 2가지 입니다.

1. 마우스 커서가 올라가면 02a3.png를, 그렇지 않으면 02a4.png를 보여줌
   
   
2. 마우스 커서가 올라가거나 클릭하면 _m1 이미지 맵에 따라 동작

그런데, 이 코드를 적용해보면 FireFox 2.0에서는 이미지 교체(1번)가 동작하지 않습니다.
"공공의 적" Internet Explorer 7.0에서는 두 기능 모두 정상동작 하고 말이죠.

물론, onmouseover와 usemap을 각각 따로 적용해보면 잘 동작합니다.
그렇다면 결론은, FireFox의 img 태그의 버그라는 것이죠.

---

그리고, 오랜만에 블로그 헤더를 리뉴얼했습니다. 무려 사흘씩이나 걸려서요…
블로그의 테마를 직접 만들 내공은 안 되지만, 그렇다고 있는 테마에 그림만 바꿔넣기는 싫어서 헤더를 직접 고쳤습니다.

Animated GIF를 이용해서 린이와 짱이가 티격태격하는 장면을 무한반복으로 만들어넣었는데, 정적인 것 보다는 더 나은 것 같습니다.

이 외에도 이번 리뉴얼에 살짝 바꾼 내용은 아래와 같습니다.

1. (앞에 언급한) 린/짱의 쌈 장면 AniGIF로 붙임
   
   
2. 헤더로 옮긴 Media/Guestbook/Admin/Newpost에 onmouseover 이미지 변경 기능 부여
   
   
3. rss도 AniGIF로 만들어 약간 반짝이게 수정
   
   
4. Line Calendar의 부활
   

※ 헤더 전체를 몽땅 표(table)로 만들어서 구현했는데, 모든 좌표를 종이에 일일이 적어서 그려냈습니다. 휴~