Advanced Search

Imagen con vertices redondeados

/ Published in: JavaScript
Save to your folder(s)
No es necesario redondear los vertices de la imagen para darle una apariencia tal. Más info en: http://www.curvycorners.net/

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  3. <head>
  4. <title>curvyCorners Demo</title>
  5. <script type="text/javascript">
  6. <!--
  7.  
  8.  /****************************************************************
  9.   *                                                              *
  10.   *  curvyCorners                                                *
  11.   *  ------------                                                *
  12.   *                                                              *
  13.   *  This script generates rounded corners for your divs.        *
  14.   *                                                              *
  15.   *  Version 1.2.9                                               *
  16.   *  Copyright (c) 2006 Cameron Cooke                            *
  17.   *  By: Cameron Cooke and Tim Hutchison.                        *
  18.   *                                                              *
  19.   *                                                              *
  20.   *  Website: http://www.curvycorners.net                        *
  21.   *  Email:   [email protected]                             *
  22.   *  Forum:   http://www.curvycorners.net/forum/                 *
  23.   *                                                              *
  24.   *                                                              *
  25.   *  This library is free software; you can redistribute         *
  26.   *  it and/or modify it under the terms of the GNU              *
  27.   *  Lesser General Public License as published by the           *
  28.   *  Free Software Foundation; either version 2.1 of the         *
  29.   *  License, or (at your option) any later version.             *
  30.   *                                                              *
  31.   *  This library is distributed in the hope that it will        *
  32.   *  be useful, but WITHOUT ANY WARRANTY; without even the       *
  33.   *  implied warranty of MERCHANTABILITY or FITNESS FOR A        *
  34.   *  PARTICULAR PURPOSE. See the GNU Lesser General Public       *
  35.   *  License for more details.                                   *
  36.   *                                                              *
  37.   *  You should have received a copy of the GNU Lesser           *
  38.   *  General Public License along with this library;             *
  39.   *  Inc., 59 Temple Place, Suite 330, Boston,                   *
  40.   *  MA 02111-1307 USA                                           *
  41.   *                                                              *
  42.   ****************************************************************/
  43.  
  44. var isIE = navigator.userAgent.toLowerCase().indexOf("msie") > -1; var isMoz = document.implementation && document.implementation.createDocument; var isSafari = ((navigator.userAgent.toLowerCase().indexOf('safari')!=-1)&&(navigator.userAgent.toLowerCase().indexOf('mac')!=-1))?true:false; function curvyCorners()
  45. { if(typeof(arguments[0]) != "object") throw newCurvyError("First parameter of curvyCorners() must be an object."); if(typeof(arguments[1]) != "object" && typeof(arguments[1]) != "string") throw newCurvyError("Second parameter of curvyCorners() must be an object or a class name."); if(typeof(arguments[1]) == "string")
  46. { var startIndex = 0; var boxCol = getElementsByClass(arguments[1]);}
  47. else
  48. { var startIndex = 1; var boxCol = arguments;}
  49. var curvyCornersCol = new Array(); if(arguments[0].validTags)
  50. var validElements = arguments[0].validTags; else
  51. var validElements = ["div"]; for(var i = startIndex, j = boxCol.length; i < j; i++)
  52. { var currentTag = boxCol[i].tagName.toLowerCase(); if(inArray(validElements, currentTag) !== false)
  53. { curvyCornersCol[curvyCornersCol.length] = new curvyObject(arguments[0], boxCol[i]);}
  54. }
  55. this.objects = curvyCornersCol; this.applyCornersToAll = function()
  56. { for(var x = 0, k = this.objects.length; x < k; x++)
  57. { this.objects[x].applyCorners();}
  58. }
  59. }
  60. function curvyObject()
  61. { this.box = arguments[1]; this.settings = arguments[0]; this.topContainer = null; this.bottomContainer = null; this.masterCorners = new Array(); this.contentDIV = null; var boxHeight = get_style(this.box, "height", "height"); var boxWidth = get_style(this.box, "width", "width"); var borderWidth = get_style(this.box, "borderTopWidth", "border-top-width"); var borderColour = get_style(this.box, "borderTopColor", "border-top-color"); var boxColour = get_style(this.box, "backgroundColor", "background-color"); var backgroundImage = get_style(this.box, "backgroundImage", "background-image"); var boxPosition = get_style(this.box, "position", "position"); var boxPadding = get_style(this.box, "paddingTop", "padding-top"); this.boxHeight = parseInt(((boxHeight != "" && boxHeight != "auto" && boxHeight.indexOf("%") == -1)? boxHeight.substring(0, boxHeight.indexOf("px")) : this.box.scrollHeight)); this.boxWidth = parseInt(((boxWidth != "" && boxWidth != "auto" && boxWidth.indexOf("%") == -1)? boxWidth.substring(0, boxWidth.indexOf("px")) : this.box.scrollWidth)); this.borderWidth = parseInt(((borderWidth != "" && borderWidth.indexOf("px") !== -1)? borderWidth.slice(0, borderWidth.indexOf("px")) : 0)); this.boxColour = format_colour(boxColour); this.boxPadding = parseInt(((boxPadding != "" && boxPadding.indexOf("px") !== -1)? boxPadding.slice(0, boxPadding.indexOf("px")) : 0)); this.borderColour = format_colour(borderColour); this.borderString = this.borderWidth + "px" + " solid " + this.borderColour; this.backgroundImage = ((backgroundImage != "none")? backgroundImage : ""); this.boxContent = this.box.innerHTML; if(boxPosition != "absolute") this.box.style.position = "relative"; this.box.style.padding = "0px"; if(isIE && boxWidth == "auto" && boxHeight == "auto") this.box.style.width = "100%"; if(this.settings.autoPad == true && this.boxPadding > 0)
  62. this.box.innerHTML = ""; this.applyCorners = function()
  63. { for(var t = 0; t < 2; t++)
  64. { switch(t)
  65. { case 0:
  66. if(this.settings.tl || this.settings.tr)
  67. { var newMainContainer = document.createElement("DIV"); newMainContainer.style.width = "100%"; newMainContainer.style.fontSize = "1px"; newMainContainer.style.overflow = "hidden"; newMainContainer.style.position = "absolute"; newMainContainer.style.paddingLeft = this.borderWidth + "px"; newMainContainer.style.paddingRight = this.borderWidth + "px"; var topMaxRadius = Math.max(this.settings.tl ? this.settings.tl.radius : 0, this.settings.tr ? this.settings.tr.radius : 0); newMainContainer.style.height = topMaxRadius + "px"; newMainContainer.style.top = 0 - topMaxRadius + "px"; newMainContainer.style.left = 0 - this.borderWidth + "px"; this.topContainer = this.box.appendChild(newMainContainer);}
  68. break; case 1:
  69. if(this.settings.bl || this.settings.br)
  70. { var newMainContainer = document.createElement("DIV"); newMainContainer.style.width = "100%"; newMainContainer.style.fontSize = "1px"; newMainContainer.style.overflow = "hidden"; newMainContainer.style.position = "absolute"; newMainContainer.style.paddingLeft = this.borderWidth + "px"; newMainContainer.style.paddingRight = this.borderWidth + "px"; var botMaxRadius = Math.max(this.settings.bl ? this.settings.bl.radius : 0, this.settings.br ? this.settings.br.radius : 0); newMainContainer.style.height = botMaxRadius + "px"; newMainContainer.style.bottom = 0 - botMaxRadius + "px"; newMainContainer.style.left = 0 - this.borderWidth + "px"; this.bottomContainer = this.box.appendChild(newMainContainer);}
  71. break;}
  72. }
  73. if(this.topContainer) this.box.style.borderTopWidth = "0px"; if(this.bottomContainer) this.box.style.borderBottomWidth = "0px"; var corners = ["tr", "tl", "br", "bl"]; for(var i in corners)
  74. { if(i > -1 < 4)
  75. { var cc = corners[i]; if(!this.settings[cc])
  76. { if(((cc == "tr" || cc == "tl") && this.topContainer != null) || ((cc == "br" || cc == "bl") && this.bottomContainer != null))
  77. { var newCorner = document.createElement("DIV"); newCorner.style.position = "relative"; newCorner.style.fontSize = "1px"; newCorner.style.overflow = "hidden"; if(this.backgroundImage == "")
  78. newCorner.style.backgroundColor = this.boxColour; else
  79. newCorner.style.backgroundImage = this.backgroundImage; switch(cc)
  80. { case "tl":
  81. newCorner.style.height = topMaxRadius - this.borderWidth + "px"; newCorner.style.marginRight = this.settings.tr.radius - (this.borderWidth*2) + "px"; newCorner.style.borderLeft = this.borderString; newCorner.style.borderTop = this.borderString; newCorner.style.left = -this.borderWidth + "px"; break; case "tr":
  82. newCorner.style.height = topMaxRadius - this.borderWidth + "px"; newCorner.style.marginLeft = this.settings.tl.radius - (this.borderWidth*2) + "px"; newCorner.style.borderRight = this.borderString; newCorner.style.borderTop = this.borderString; newCorner.style.backgroundPosition = "-" + (topMaxRadius + this.borderWidth) + "px 0px"; newCorner.style.left = this.borderWidth + "px"; break; case "bl":
  83. newCorner.style.height = botMaxRadius - this.borderWidth + "px"; newCorner.style.marginRight = this.settings.br.radius - (this.borderWidth*2) + "px"; newCorner.style.borderLeft = this.borderString; newCorner.style.borderBottom = this.borderString; newCorner.style.left = -this.borderWidth + "px"; newCorner.style.backgroundPosition = "-" + (this.borderWidth) + "px -" + (this.boxHeight + (botMaxRadius + this.borderWidth)) + "px"; break; case "br":
  84. newCorner.style.height = botMaxRadius - this.borderWidth + "px"; newCorner.style.marginLeft = this.settings.bl.radius - (this.borderWidth*2) + "px"; newCorner.style.borderRight = this.borderString; newCorner.style.borderBottom = this.borderString; newCorner.style.left = this.borderWidth + "px"
  85. newCorner.style.backgroundPosition = "-" + (botMaxRadius + this.borderWidth) + "px -" + (this.boxHeight + (botMaxRadius + this.borderWidth)) + "px"; break;}
  86. }
  87. }
  88. else
  89. { if(this.masterCorners[this.settings[cc].radius])
  90. { var newCorner = this.masterCorners[this.settings[cc].radius].cloneNode(true);}
  91. else
  92. { var newCorner = document.createElement("DIV"); newCorner.style.height = this.settings[cc].radius + "px"; newCorner.style.width = this.settings[cc].radius + "px"; newCorner.style.position = "absolute"; newCorner.style.fontSize = "1px"; newCorner.style.overflow = "hidden"; var borderRadius = parseInt(this.settings[cc].radius - this.borderWidth); for(var intx = 0, j = this.settings[cc].radius; intx < j; intx++)
  93. { if((intx +1) >= borderRadius)
  94. var y1 = -1; else
  95. var y1 = (Math.floor(Math.sqrt(Math.pow(borderRadius, 2) - Math.pow((intx+1), 2))) - 1); if(borderRadius != j)
  96. { if((intx) >= borderRadius)
  97. var y2 = -1; else
  98. var y2 = Math.ceil(Math.sqrt(Math.pow(borderRadius,2) - Math.pow(intx, 2))); if((intx+1) >= j)
  99. var y3 = -1; else
  100. var y3 = (Math.floor(Math.sqrt(Math.pow(j ,2) - Math.pow((intx+1), 2))) - 1);}
  101. if((intx) >= j)
  102. var y4 = -1; else
  103. var y4 = Math.ceil(Math.sqrt(Math.pow(j ,2) - Math.pow(intx, 2))); if(y1 > -1) this.drawPixel(intx, 0, this.boxColour, 100, (y1+1), newCorner, -1, this.settings[cc].radius); if(borderRadius != j)
  104. { for(var inty = (y1 + 1); inty < y2; inty++)
  105. { if(this.settings.antiAlias)
  106. { if(this.backgroundImage != "")
  107. { var borderFract = (pixelFraction(intx, inty, borderRadius) * 100); if(borderFract < 30)
  108. { this.drawPixel(intx, inty, this.borderColour, 100, 1, newCorner, 0, this.settings[cc].radius);}
  109. else
  110. { this.drawPixel(intx, inty, this.borderColour, 100, 1, newCorner, -1, this.settings[cc].radius);}
  111. }
  112. else
  113. { var pixelcolour = BlendColour(this.boxColour, this.borderColour, pixelFraction(intx, inty, borderRadius)); this.drawPixel(intx, inty, pixelcolour, 100, 1, newCorner, 0, this.settings[cc].radius, cc);}
  114. }
  115. }
  116. if(this.settings.antiAlias)
  117. { if(y3 >= y2)
  118. { if (y2 == -1) y2 = 0; this.drawPixel(intx, y2, this.borderColour, 100, (y3 - y2 + 1), newCorner, 0, 0);}
  119. }
  120. else
  121. { if(y3 >= y1)
  122. { this.drawPixel(intx, (y1 + 1), this.borderColour, 100, (y3 - y1), newCorner, 0, 0);}
  123. }
  124. var outsideColour = this.borderColour;}
  125. else
  126. { var outsideColour = this.boxColour; var y3 = y1;}
  127. if(this.settings.antiAlias)
  128. { for(var inty = (y3 + 1); inty < y4; inty++)
  129. { this.drawPixel(intx, inty, outsideColour, (pixelFraction(intx, inty , j) * 100), 1, newCorner, ((this.borderWidth > 0)? 0 : -1), this.settings[cc].radius);}
  130. }
  131. }
  132. this.masterCorners[this.settings[cc].radius] = newCorner.cloneNode(true);}
  133. if(cc != "br")
  134. { for(var t = 0, k = newCorner.childNodes.length; t < k; t++)
  135. { var pixelBar = newCorner.childNodes[t]; var pixelBarTop = parseInt(pixelBar.style.top.substring(0, pixelBar.style.top.indexOf("px"))); var pixelBarLeft = parseInt(pixelBar.style.left.substring(0, pixelBar.style.left.indexOf("px"))); var pixelBarHeight = parseInt(pixelBar.style.height.substring(0, pixelBar.style.height.indexOf("px"))); if(cc == "tl" || cc == "bl"){ pixelBar.style.left = this.settings[cc].radius -pixelBarLeft -1 + "px";}
  136. if(cc == "tr" || cc == "tl"){ pixelBar.style.top = this.settings[cc].radius -pixelBarHeight -pixelBarTop + "px";}
  137. switch(cc)
  138. { case "tr":
  139. pixelBar.style.backgroundPosition = "-" + Math.abs((this.boxWidth - this.settings[cc].radius + this.borderWidth) + pixelBarLeft) + "px -" + Math.abs(this.settings[cc].radius -pixelBarHeight -pixelBarTop - this.borderWidth) + "px"; break; case "tl":
  140. pixelBar.style.backgroundPosition = "-" + Math.abs((this.settings[cc].radius -pixelBarLeft -1) - this.borderWidth) + "px -" + Math.abs(this.settings[cc].radius -pixelBarHeight -pixelBarTop - this.borderWidth) + "px"; break; case "bl":
  141. pixelBar.style.backgroundPosition = "-" + Math.abs((this.settings[cc].radius -pixelBarLeft -1) - this.borderWidth) + "px -" + Math.abs((this.boxHeight + this.settings[cc].radius + pixelBarTop) -this.borderWidth) + "px"; break;}
  142. }
  143. }
  144. }
  145. if(newCorner)
  146. { switch(cc)
  147. { case "tl":
  148. if(newCorner.style.position == "absolute") newCorner.style.top = "0px"; if(newCorner.style.position == "absolute") newCorner.style.left = "0px"; if(this.topContainer) this.topContainer.appendChild(newCorner); break; case "tr":
  149. if(newCorner.style.position == "absolute") newCorner.style.top = "0px"; if(newCorner.style.position == "absolute") newCorner.style.right = "0px"; if(this.topContainer) this.topContainer.appendChild(newCorner); break; case "bl":
  150. if(newCorner.style.position == "absolute") newCorner.style.bottom = "0px"; if(newCorner.style.position == "absolute") newCorner.style.left = "0px"; if(this.bottomContainer) this.bottomContainer.appendChild(newCorner); break; case "br":
  151. if(newCorner.style.position == "absolute") newCorner.style.bottom = "0px"; if(newCorner.style.position == "absolute") newCorner.style.right = "0px"; if(this.bottomContainer) this.bottomContainer.appendChild(newCorner); break;}
  152. }
  153. }
  154. }
  155. var radiusDiff = new Array(); radiusDiff["t"] = Math.abs(this.settings.tl.radius - this.settings.tr.radius)
  156. radiusDiff["b"] = Math.abs(this.settings.bl.radius - this.settings.br.radius); for(z in radiusDiff)
  157. { if(z == "t" || z == "b")
  158. { if(radiusDiff[z])
  159. { var smallerCornerType = ((this.settings[z + "l"].radius < this.settings[z + "r"].radius)? z +"l" : z +"r"); var newFiller = document.createElement("DIV"); newFiller.style.height = radiusDiff[z] + "px"; newFiller.style.width = this.settings[smallerCornerType].radius+ "px"
  160. newFiller.style.position = "absolute"; newFiller.style.fontSize = "1px"; newFiller.style.overflow = "hidden"; newFiller.style.backgroundColor = this.boxColour; switch(smallerCornerType)
  161. { case "tl":
  162. newFiller.style.bottom = "0px"; newFiller.style.left = "0px"; newFiller.style.borderLeft = this.borderString; this.topContainer.appendChild(newFiller); break; case "tr":
  163. newFiller.style.bottom = "0px"; newFiller.style.right = "0px"; newFiller.style.borderRight = this.borderString; this.topContainer.appendChild(newFiller); break; case "bl":
  164. newFiller.style.top = "0px"; newFiller.style.left = "0px"; newFiller.style.borderLeft = this.borderString; this.bottomContainer.appendChild(newFiller); break; case "br":
  165. newFiller.style.top = "0px"; newFiller.style.right = "0px"; newFiller.style.borderRight = this.borderString; this.bottomContainer.appendChild(newFiller); break;}
  166. }
  167. var newFillerBar = document.createElement("DIV"); newFillerBar.style.position = "relative"; newFillerBar.style.fontSize = "1px"; newFillerBar.style.overflow = "hidden"; newFillerBar.style.backgroundColor = this.boxColour; newFillerBar.style.backgroundImage = this.backgroundImage; switch(z)
  168. { case "t":
  169. if(this.topContainer)
  170. { if(this.settings.tl.radius && this.settings.tr.radius)
  171. { newFillerBar.style.height = topMaxRadius - this.borderWidth + "px"; newFillerBar.style.marginLeft = this.settings.tl.radius - this.borderWidth + "px"; newFillerBar.style.marginRight = this.settings.tr.radius - this.borderWidth + "px"; newFillerBar.style.borderTop = this.borderString; if(this.backgroundImage != "")
  172. newFillerBar.style.backgroundPosition = "-" + (topMaxRadius + this.borderWidth) + "px 0px"; this.topContainer.appendChild(newFillerBar);}
  173. this.box.style.backgroundPosition = "0px -" + (topMaxRadius - this.borderWidth) + "px";}
  174. break; case "b":
  175. if(this.bottomContainer)
  176. { if(this.settings.bl.radius && this.settings.br.radius)
  177. { newFillerBar.style.height = botMaxRadius - this.borderWidth + "px"; newFillerBar.style.marginLeft = this.settings.bl.radius - this.borderWidth + "px"; newFillerBar.style.marginRight = this.settings.br.radius - this.borderWidth + "px"; newFillerBar.style.borderBottom = this.borderString; if(this.backgroundImage != "")
  178. newFillerBar.style.backgroundPosition = "-" + (botMaxRadius + this.borderWidth) + "px -" + (this.boxHeight + (topMaxRadius + this.borderWidth)) + "px"; this.bottomContainer.appendChild(newFillerBar);}
  179. }
  180. break;}
  181. }
  182. }
  183. if(this.settings.autoPad == true && this.boxPadding > 0)
  184. { var contentContainer = document.createElement("DIV"); contentContainer.style.position = "relative"; contentContainer.innerHTML = this.boxContent; contentContainer.className = "autoPadDiv"; var topPadding = Math.abs(topMaxRadius - this.boxPadding); var botPadding = Math.abs(botMaxRadius - this.boxPadding); if(topMaxRadius < this.boxPadding)
  185. contentContainer.style.paddingTop = topPadding + "px"; if(botMaxRadius < this.boxPadding)
  186. contentContainer.style.paddingBottom = botMaxRadius + "px"; contentContainer.style.paddingLeft = this.boxPadding + "px"; contentContainer.style.paddingRight = this.boxPadding + "px"; this.contentDIV = this.box.appendChild(contentContainer);}
  187. }
  188. this.drawPixel = function(intx, inty, colour, transAmount, height, newCorner, image, cornerRadius)
  189. { var pixel = document.createElement("DIV"); pixel.style.height = height + "px"; pixel.style.width = "1px"; pixel.style.position = "absolute"; pixel.style.fontSize = "1px"; pixel.style.overflow = "hidden"; var topMaxRadius = Math.max(this.settings["tr"].radius, this.settings["tl"].radius); if(image == -1 && this.backgroundImage != "")
  190. { pixel.style.backgroundImage = this.backgroundImage; pixel.style.backgroundPosition = "-" + (this.boxWidth - (cornerRadius - intx) + this.borderWidth) + "px -" + ((this.boxHeight + topMaxRadius + inty) -this.borderWidth) + "px";}
  191. else
  192. { pixel.style.backgroundColor = colour;}
  193. if (transAmount != 100)
  194. setOpacity(pixel, transAmount); pixel.style.top = inty + "px"; pixel.style.left = intx + "px"; newCorner.appendChild(pixel);}
  195. }
  196. function insertAfter(parent, node, referenceNode)
  197. { parent.insertBefore(node, referenceNode.nextSibling);}
  198. function BlendColour(Col1, Col2, Col1Fraction)
  199. { var red1 = parseInt(Col1.substr(1,2),16); var green1 = parseInt(Col1.substr(3,2),16); var blue1 = parseInt(Col1.substr(5,2),16); var red2 = parseInt(Col2.substr(1,2),16); var green2 = parseInt(Col2.substr(3,2),16); var blue2 = parseInt(Col2.substr(5,2),16); if(Col1Fraction > 1 || Col1Fraction < 0) Col1Fraction = 1; var endRed = Math.round((red1 * Col1Fraction) + (red2 * (1 - Col1Fraction))); if(endRed > 255) endRed = 255; if(endRed < 0) endRed = 0; var endGreen = Math.round((green1 * Col1Fraction) + (green2 * (1 - Col1Fraction))); if(endGreen > 255) endGreen = 255; if(endGreen < 0) endGreen = 0; var endBlue = Math.round((blue1 * Col1Fraction) + (blue2 * (1 - Col1Fraction))); if(endBlue > 255) endBlue = 255; if(endBlue < 0) endBlue = 0; return "#" + IntToHex(endRed)+ IntToHex(endGreen)+ IntToHex(endBlue);}
  200. function IntToHex(strNum)
  201. { base = strNum / 16; rem = strNum % 16; base = base - (rem / 16); baseS = MakeHex(base); remS = MakeHex(rem); return baseS + '' + remS;}
  202. function MakeHex(x)
  203. { if((x >= 0) && (x <= 9))
  204. { return x;}
  205. else
  206. { switch(x)
  207. { case 10: return "A"; case 11: return "B"; case 12: return "C"; case 13: return "D"; case 14: return "E"; case 15: return "F";}
  208. }
  209. }
  210. function pixelFraction(x, y, r)
  211. { var pixelfraction = 0; var xvalues = new Array(1); var yvalues = new Array(1); var point = 0; var whatsides = ""; var intersect = Math.sqrt((Math.pow(r,2) - Math.pow(x,2))); if ((intersect >= y) && (intersect < (y+1)))
  212. { whatsides = "Left"; xvalues[point] = 0; yvalues[point] = intersect - y; point = point + 1;}
  213. var intersect = Math.sqrt((Math.pow(r,2) - Math.pow(y+1,2))); if ((intersect >= x) && (intersect < (x+1)))
  214. { whatsides = whatsides + "Top"; xvalues[point] = intersect - x; yvalues[point] = 1; point = point + 1;}
  215. var intersect = Math.sqrt((Math.pow(r,2) - Math.pow(x+1,2))); if ((intersect >= y) && (intersect < (y+1)))
  216. { whatsides = whatsides + "Right"; xvalues[point] = 1; yvalues[point] = intersect - y; point = point + 1;}
  217. var intersect = Math.sqrt((Math.pow(r,2) - Math.pow(y,2))); if ((intersect >= x) && (intersect < (x+1)))
  218. { whatsides = whatsides + "Bottom"; xvalues[point] = intersect - x; yvalues[point] = 0;}
  219. switch (whatsides)
  220. { case "LeftRight":
  221. pixelfraction = Math.min(yvalues[0],yvalues[1]) + ((Math.max(yvalues[0],yvalues[1]) - Math.min(yvalues[0],yvalues[1]))/2); break; case "TopRight":
  222. pixelfraction = 1-(((1-xvalues[0])*(1-yvalues[1]))/2); break; case "TopBottom":
  223. pixelfraction = Math.min(xvalues[0],xvalues[1]) + ((Math.max(xvalues[0],xvalues[1]) - Math.min(xvalues[0],xvalues[1]))/2); break; case "LeftBottom":
  224. pixelfraction = (yvalues[0]*xvalues[1])/2; break; default:
  225. pixelfraction = 1;}
  226. return pixelfraction;}
  227. function rgb2Hex(rgbColour)
  228. { try{ var rgbArray = rgb2Array(rgbColour); var red = parseInt(rgbArray[0]); var green = parseInt(rgbArray[1]); var blue = parseInt(rgbArray[2]); var hexColour = "#" + IntToHex(red) + IntToHex(green) + IntToHex(blue);}
  229. catch(e){ alert("There was an error converting the RGB value to Hexadecimal in function rgb2Hex");}
  230. return hexColour;}
  231. function rgb2Array(rgbColour)
  232. { var rgbValues = rgbColour.substring(4, rgbColour.indexOf(")")); var rgbArray = rgbValues.split(", "); return rgbArray;}
  233. function setOpacity(obj, opacity)
  234. { opacity = (opacity == 100)?99.999:opacity; if(isSafari && obj.tagName != "IFRAME")
  235. { var rgbArray = rgb2Array(obj.style.backgroundColor); var red = parseInt(rgbArray[0]); var green = parseInt(rgbArray[1]); var blue = parseInt(rgbArray[2]); obj.style.backgroundColor = "rgba(" + red + ", " + green + ", " + blue + ", " + opacity/100 + ")";}
  236. else if(typeof(obj.style.opacity) != "undefined")
  237. { obj.style.opacity = opacity/100;}
  238. else if(typeof(obj.style.MozOpacity) != "undefined")
  239. { obj.style.MozOpacity = opacity/100;}
  240. else if(typeof(obj.style.filter) != "undefined")
  241. { obj.style.filter = "alpha(opacity:" + opacity + ")";}
  242. else if(typeof(obj.style.KHTMLOpacity) != "undefined")
  243. { obj.style.KHTMLOpacity = opacity/100;}
  244. }
  245. function inArray(array, value)
  246. { for(var i = 0; i < array.length; i++){ if (array[i] === value) return i;}
  247. return false;}
  248. function inArrayKey(array, value)
  249. { for(key in array){ if(key === value) return true;}
  250. return false;}
  251. function addEvent(elm, evType, fn, useCapture) { if (elm.addEventListener) { elm.addEventListener(evType, fn, useCapture); return true;}
  252. else if (elm.attachEvent) { var r = elm.attachEvent('on' + evType, fn); return r;}
  253. else { elm['on' + evType] = fn;}
  254. }
  255. function removeEvent(obj, evType, fn, useCapture){ if (obj.removeEventListener){ obj.removeEventListener(evType, fn, useCapture); return true;} else if (obj.detachEvent){ var r = obj.detachEvent("on"+evType, fn); return r;} else { alert("Handler could not be removed");}
  256. }
  257. function format_colour(colour)
  258. { var returnColour = "#ffffff"; if(colour != "" && colour != "transparent")
  259. { if(colour.substr(0, 3) == "rgb")
  260. { returnColour = rgb2Hex(colour);}
  261. else if(colour.length == 4)
  262. { returnColour = "#" + colour.substring(1, 2) + colour.substring(1, 2) + colour.substring(2, 3) + colour.substring(2, 3) + colour.substring(3, 4) + colour.substring(3, 4);}
  263. else
  264. { returnColour = colour;}
  265. }
  266. return returnColour;}
  267. function get_style(obj, property, propertyNS)
  268. { try
  269. { if(obj.currentStyle)
  270. { var returnVal = eval("obj.currentStyle." + property);}
  271. else
  272. { if(isSafari && obj.style.display == "none")
  273. { obj.style.display = ""; var wasHidden = true;}
  274. var returnVal = document.defaultView.getComputedStyle(obj, '').getPropertyValue(propertyNS); if(isSafari && wasHidden)
  275. { obj.style.display = "none";}
  276. }
  277. }
  278. catch(e)
  279. { }
  280. return returnVal;}
  281. function getElementsByClass(searchClass, node, tag)
  282. { var classElements = new Array(); if(node == null)
  283. node = document; if(tag == null)
  284. tag = '*'; var els = node.getElementsByTagName(tag); var elsLen = els.length; var pattern = new RegExp("(^|\s)"+searchClass+"(\s|$)"); for (i = 0, j = 0; i < elsLen; i++)
  285. { if(pattern.test(els[i].className))
  286. { classElements[j] = els[i]; j++;}
  287. }
  288. return classElements;}
  289. function newCurvyError(errorMessage)
  290. { return new Error("curvyCorners Error:\n" + errorMessage)
  291. }
  292.  
  293. // -->
  294. </script>
  295. <style>
  296.  
  297. .myBox
  298. {
  299.     margin: 0 auto;
  300.     border: 0px solid #ffffff;
  301.     color: #ffffff;
  302.     width: 800px;
  303.     height: 550px;
  304.     padding: 20px;
  305.     text-align: left;
  306.     /*border: 3px solid #ffffff;*/
  307.     background-image: url(http://img175.imageshack.us/img175/2277/backtestuy2.jpg);
  308.     background-repeat: no-repeat;
  309. }
  310.  
  311. html,body{
  312.     height: 100%;
  313.     text-align: center;
  314.   	 font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
  315.     font-size: 12px;
  316.     margin: 0px;
  317.     background-image: url(http://img212.imageshack.us/img212/1779/grassvq9.jpg);
  318. }
  319.  
  320. </style>
  321. <script type="text/JavaScript">
  322.  
  323.   window.onload = function()
  324.   {
  325.       /*
  326.       The new 'validTags' setting is optional and allows
  327.       you to specify other HTML elements that curvyCorners
  328.       can attempt to round.
  329.  
  330.       The value is comma separated list of html elements
  331.       in lowercase.
  332.  
  333.       validTags: ["div", "form"]
  334.  
  335.       The above example would enable curvyCorners on FORM elements.
  336.       */
  337.       settings = {
  338.           tl: { radius: 20 },
  339.           tr: { radius: 20 },
  340.           bl: { radius: 20 },
  341.           br: { radius: 20 },
  342.           antiAlias: true,
  343.           autoPad: true,
  344.           validTags: ["div"]
  345.       }
  346.  
  347.       /*
  348.       Usage:
  349.  
  350.       newCornersObj = new curvyCorners(settingsObj, classNameStr);
  351.       newCornersObj = new curvyCorners(settingsObj, divObj1[, divObj2[, divObj3[, . . . [, divObjN]]]]);
  352.       */
  353.       var myBoxObject = new curvyCorners(settings, "myBox");
  354.       myBoxObject.applyCornersToAll();
  355.   }
  356.  
  357. </script>
  358. </head>
  359.  
  360. <body>
  361.  
  362.     <br><br><br><br>
  363.  
  364.     <div class="myBox">
  365.  
  366.     <!--
  367.     Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur mi est, cursus sit amet, pellentesque et, ultricies a, ipsum. Nulla facilisi. Sed quis lacus. Aenean ut risus et lectus blandit gravida. Nam sed nunc. Aliquam non felis non diam aliquam gravida. Phasellus quis sem. Curabitur at velit. Vivamus libero velit, condimentum sit amet, tempus ut, aliquam sit amet, velit. Nunc hendrerit ante. Quisque egestas feugiat erat. Morbi tellus.
  368.     <br /><br />
  369.     Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla ac ante sit amet metus hendrerit euismod. Aenean vestibulum, lectus in eleifend tempor, quam libero iaculis dolor, pellentesque pellentesque lorem nibh ut urna. Nulla rhoncus, ante sit amet tristique interdum, eros nulla nonummy justo, eu dapibus risus quam sit amet metus. Maecenas tristique augue vel enim. Duis blandit euismod pede. Pellentesque facilisis. Fusce dapibus sapien tristique massa. Nunc accumsan. Integer pretium risus et odio. Phasellus tincidunt rhoncus velit. Donec eu neque at massa mollis iaculis. Aliquam pellentesque auctor mi. Cras ante justo, ultricies quis, iaculis eu, tincidunt ac, velit. Etiam nunc erat, tincidunt sit amet, luctus quis, interdum a, nunc. Suspendisse elit.
  370.     <br /><br />
  371.     Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla ac ante sit amet metus hendrerit euismod. Aenean vestibulum, lectus in eleifend tempor, quam libero iaculis dolor, pellentesque pellentesque lorem nibh ut urna. Nulla rhoncus, ante sit amet tristique interdum, eros nulla nonummy justo, eu dapibus risus quam sit amet metus. Maecenas tristique augue vel enim. Duis blandit euismod pede. Pellentesque facilisis. Fusce dapibus sapien tristique massa. Nunc accumsan. Integer pretium risus et odio. Phasellus tincidunt rhoncus velit. Donec eu neque at massa mollis iaculis. Aliquam pellentesque auctor mi. Cras ante justo, ultricies quis, iaculis eu, tincidunt ac, velit. Etiam nunc erat, tincidunt sit amet, luctus quis, interdum a, nunc. Suspendisse elit.
  372.     -->
  373.  
  374.     </div>
  375.  
  376. </body>
  377. </html>

URL: http://www.curvycorners.net/examples/demos/demo2.html

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.