인터넷정보

스크립트로 이미지 모서리를 둥글게

알 수 없는 사용자 2007. 10. 10. 11:23

css + js 로 이미지 모서리를 둥글게 만들어 줍니다.
문서가 완전히 로딩된 후 실행되야 오류가 발생하지 않아요.

기본적인 사용은 아래와 같이 해주세요.
----------------------------------------------------------------------

<script type="text/javascript">
    image.rounded(id or element);
</script>

----------------------------------------------------------------------





여러 이미지에 자동으로 적용 하려면 onload 이벤트에, image.roundedAuto를 추가하신 후
img 태그 name 속성에 rounded를 적어 주시면 실행!
----------------------------------------------------------------------

<script type="text/javascript">
    window.onload= image.roundedAuto;
</script>

<img src=http://llllll.org/banner.gif name="rounded">

----------------------------------------------------------------------


익스플로러, 불여우, 오페라  잘돌아가네요~!



------------------------------  소    스  ----------------------------------------

<FONT size=1><style type="text/css"> .imageRounded div{ overflow:hidden; height:1px; } .imageRounded div.r1 { background-position:-5px 0; } .imageRounded div.r1, .imageRounded div.r9 { margin:0 5px; } .imageRounded div.r2 { background-position:-3px -1px; } .imageRounded div.r2, .imageRounded div.r8 { margin:0 3px; } .imageRounded div.r3 { background-position:-2px -2px; } .imageRounded div.r3, .imageRounded div.r7 { margin:0 2px; } .imageRounded div.r4 { background-position:-1px -3px; } .imageRounded div.r4, .imageRounded div.r6 { margin:0 1px; height:2px; } .imageRounded div.r5 { background-position:0px -5px; } </style> <pre class="scripts" type="text/javascript"> function id(str){ return (typeof(str) == "object")? str : document.getElementById(str); } function name(str){ return document.getElementsByName(str); } var image = { rounded : function(element){ var element = id(element); var r5Height = parseFloat(element.height) - 10; if(r5Height<=0) return false; var r6 = r5Height + 5; var r7 = r6 + 2 var r8 = r7 + 1; var r9 = r8 + 1; var inner = ""; inner += ""; inner += ""; inner += ""; inner += ""; inner += ""; inner += ""; inner += ""; inner += ""; inner += ""; var roundedElement = document.createElement("div"); roundedElement.className = "imageRounded"; roundedElement.style.width = element.width+"px"; roundedElement.innerHTML = inner; if(element.parentNode.style.textAlign=="center") roundedElement.style.margin = "0 auto"; element.style.display = "none"; element.parentNode.insertBefore(roundedElement, element.nextSibling); }, roundedAuto : function(){ var elements = name("rounded"); for(i=0, c=elements.length; i<c; i++){ image.rounded(elements[i]); } } } window.onload = image.roundedAuto; </pre> <img src="http://photo-media.hanmail.net/200703/22/newsis/20070322193323.653.0.jpg" name="rounded"><br /> <img src="http://photo-media.hanmail.net/200703/16/newsis/20070316165031.323.0.jpg" name="rounded"><br /> <A href="http://qurx.net/shovelers" target="_blank"><img src="http://qurx.net/sm/banner.gif" border="0"></a> <A href="http://llllll.org" target="_blank"><img src="http://llllll.org/banner.gif" border="0"></a></FONT>
반응형