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">
----------------------------------------------------------------------
익스플로러, 불여우, 오페라 잘돌아가네요~!
------------------------------ 소 스 ----------------------------------------
<![CDATA[<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>]]>