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[<span style="font-size:78%;"><style type="text/css">
<br />.imageRounded div{
<br />overflow:hidden;
<br />height:1px;
<br />}
<br />.imageRounded div.r1 {
<br />background-position:-5px 0;
<br />}
<br />.imageRounded div.r1,
<br />.imageRounded div.r9 {
<br />margin:0 5px;
<br />}
<br />.imageRounded div.r2 {
<br />background-position:-3px -1px;
<br />}
<br />.imageRounded div.r2,
<br />.imageRounded div.r8 {
<br />margin:0 3px;
<br />}
<br />.imageRounded div.r3 {
<br />background-position:-2px -2px;
<br />}
<br />.imageRounded div.r3,
<br />.imageRounded div.r7 {
<br />margin:0 2px;
<br />}
<br />.imageRounded div.r4 {
<br />background-position:-1px -3px;
<br />}
<br />.imageRounded div.r4,
<br />.imageRounded div.r6 {
<br />margin:0 1px;
<br />height:2px;
<br />}
<br />.imageRounded div.r5 {
<br />background-position:0px -5px;
<br />}
<br /></style>
<br />
<br /><pre class="scripts" type="text/javascript">
<br />function id(str){
<br /> return (typeof(str) == "object")? str : document.getElementById(str);
<br />}
<br />function name(str){
<br /> return document.getElementsByName(str);
<br />}
<br />var image = {
<br /> rounded : function(element){
<br /> var element = id(element);
<br /> var r5Height = parseFloat(element.height) - 10;
<br /> 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; onload =" image.roundedAuto;">
<br />
<br /><img name="rounded" src="https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_uyIRFBl4t4ZQ_zZDnjBmtVDOMNqiM9BqucJj85Jkes4KzblhrSQbY9Cg_qXTgsDH0LIgtUPGNc96RR-rDPkzWR2Z_ZQKFZspotpZp4Dp1yezhKFqgX797gYmZBywRvlfIiokyPyCiszrcb=s0-d">
<br />
<br /><img name="rounded" src="https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_vnPaPxzdqk5LEISBadPCX5eHpw8CQdntVnApUIG_FXE49qJKinmMt5zPASj5IRQeMen0SVpkVNC_mGYnTLYT2PWF7N7S7jTZlvNLWak3DxMd9eQJGnaKAK420TMYXW681-Tc1Mtjqae5cPbQ=s0-d">
<br />
<br />
<br /><a href="http://qurx.net/shovelers" target="_blank"><img border="0" src="https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_ulK_j56sltxxP3peR1J4OO3H4ZrCNrG-NQTv1oJc_Clsj_YmAuLUeN4lxO_552uV-eWMR-g15tBIfrauFZb-k=s0-d"></a>
<br /><a href="http://llllll.org" target="_blank"><img border="0" src="https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_vKlvaWcaKU3uZTqjUQP8YHTbf0aZZAig2MiDj3U8hED3gwtJgXaaOtchWaRWgwx42wq2tjVQpyMJ14Dsimjak=s0-d"></a></span>]]>
댓글 없음:
댓글 쓰기