아..정신없어서 게시판 잘못보고 글 올렸네요..지울려고했는데 안지워지네요..코멘트가 있다고하네요..확인해보니 없는데..쩝..디자인 질문 게시판에 다시 올리죠. 운영자님께서 위글 보시면 삭제요망 부탁합니다.

웹브라우저가 지원하는 기본 이미지 파일은 jpg 와 gif 입니다.

png 가 최근에 나온 형식으로 24bit 에서 투명처리를 할 수 있지만

아직 인터넷 브라우저에서는 png 를 기본지원 하지 않습니다.

위 파일을 투명하게 저장하는 방법은 gif로 저장을 하셔야 합니다.

gif로 하면 글자가 지저분해지더라구요..그래서 png로 했습니다.

플래시로 처리하시면 됩니다.
플래시에서 모드를 transparent로 하시면 깨끗하게 이미지 위에 올릴 수 있습니다.

메뉴 한개도 아니고 4개 정도 되니.. 저 같으면 플래시로 처리하겠습니다. 속 편해요..
모션도 약간 주면 더 좋죠

그러면 일일이 각 버튼을 1개씩 만들어야하는군요? 에구..그 방법 밖에 없으면 그렇게라도 해야죠. 쩝.

제가 하는 방법인데 투명 이미지를 ie6 에서도 투명하게 보이게 하는방법.
우선 1x1px 짜리 투명 이미지를 만들어 blank.gif 로 저장합니다.

<public:component>
<public:attach event="onpropertychange" onevent="doFix()" />

<script type="text/javascript">
// IE5.5+ PNG Alpha Fix v1.0RC4
// (c) 2004-2005 Angus Turnbull http://www.twinhelix.com
// This is licensed under the CC-GNU LGPL, version 2.1 or later.
// For details, see: http://creativecommons.org/licenses/LGPL/2.1/
// This must be a path to a blank image. That's all the configuration you need.

if (typeof blankImg == 'undefined') var blankImg = '/img/blank.gif'; // 1x1px 짜리 투명 이미지 경로를
var f = 'DXImageTransform.Microsoft.AlphaImageLoader';

function filt(s, m)
{
if (filters[f])
{
filters[f].enabled = s ? true : false;
if (s) with (filters[f]) { src = s; sizingMethod = m }
}
else if (s) style.filter = 'progid:'+f+'(src="'+s+'",sizingMethod="'+m+'")';
}

function doFix()
{
// Assume IE7 is OK.
if (!/MSIE (5\.5|6\.)/.test(navigator.userAgent) ||
(event && !/(background|src)/.test(event.propertyName))) return;

var bgImg = currentStyle.backgroundImage || style.backgroundImage;

if (tagName == 'IMG')
{
if ((/\.png$/i).test(src))
{
if (currentStyle.width == 'auto' && currentStyle.height == 'auto')
style.width = offsetWidth + 'px';
filt(src, 'image');
// 'scale' 을 'image' 으로 변경하면 padding 적용시 나타나는 이미지 크기의 변화(잘못된 렌더링)를 방지할 수 있다. 하지만 border 표현에 문제가 생긴다.
src = blankImg;
}
else if (src.indexOf(blankImg) < 0) filt();
}
else if (bgImg && bgImg != 'none')
{
if (bgImg.match(/^url[("']+(.*\.png)[)"']+$/i))
{
var s = RegExp.$1;
if (currentStyle.width == 'auto' && currentStyle.height == 'auto')
style.width = offsetWidth + 'px';
style.backgroundImage = 'none';
filt(s, 'crop');
// IE link fix.
for (var n = 0; n < childNodes.length; n++)
if (childNodes[n].style) childNodes[n].style.position = 'relative';
}
else filt();
}
}

doFix();

</script>
</public:component>

위 소스를 복사해서 파일 확장자랑 이름을 iepngfix.htc 로 저장.

투명이미지를 쓰는 페이지의 css 화일에 .iePngFix {behaviorurl(iepngfix.htc);} 추가.

siamsiam 님! 감사합니다만..그냥 제가 플래시로 일일이 다 1개씩 버튼을 만들어 처리해버렸네요^^;

아, 다음번 홈페이지 만들 때 써먹도록 할께요..감사합니다.

브라우저 버전이 6버전이면 그런현상이 나타나는것 같습니다.