Runde Ecken in Bildern

cornerframed.tmpl

<!--IMAGES_HEADER_START//-->
 
[TITLE]<h3>{TITLE}</h3>[/TITLE]
[SUBTITLE]<h4>{SUBTITLE}</h4>[/SUBTITLE]
[TEXT]{TEXT}[/TEXT]
 
<div class="images" id="images{ID}">
<!--IMAGES_HEADER_END//-->
 
<!--IMAGES_ENTRY_START//-->
 
[PHP]
$GLOBALS['block']['css']['cornerframed'] = 'specific/cornerframed.css';
$GLOBALS['block']['custom_htmlhead']['cornerframed'] = '  <script type="text/javascript">
// RCS added: escapes and ID and CDATA stuff. Original script stolen from: http://www.sitepoint.com/examples/rounded_images/
//* <![CDATA[ *//
//window.addEvent(\'domready\', function() {                  //commented. perhaps someone will get it going?
function roundedImages() {
   var content = document.getElementById(\'images{ID}\');   //here the necessary ID will be inserted (RCS)
   var imgs = content.getElementsByTagName(\'img\');
 
   for (var i = 0; i < imgs.length; i++) {                        // start loop
 
      var wrapper = document.createElement(\'div\');            // Create the outer-most div (wrapper)
      wrapper.className = \'rwrapper\';                              // Give it a classname - wrapper
      wrapper.style.width = imgs[i].width+\'px\';               // give wrapper the same width as the current img
      var original = imgs[i];                                             // take the next image
      //Swap out the original img with our wrapper div (we will put it back later)
      if(original.parentNode.tagName.toUpperCase()==\'A\') original = original.parentNode;   // if you link the image this will help the script find the right parent wrapper
      original.parentNode.replaceChild(wrapper, original);
      // IE crash fix - c/o Joshua Paine - http://fairsky.us/home
 
      //Create the four other inner nodes and give them classnames
      var tl = document.createElement(\'div\');
      tl.className = \'tl\';
      var br = document.createElement(\'div\');
      br.className = \'br\';
      var tr = document.createElement(\'div\');
      tr.className = \'tr\';
      var bl = document.createElement(\'div\');
      bl.className = \'bl\';
 
      //Glue the nodes back inside the wrapper
      wrapper.appendChild(tl);
      wrapper.appendChild(tr);
      wrapper.appendChild(bl);
      wrapper.appendChild(br);
 
      //And glue the img back in after the DIVs
      wrapper.appendChild(original);
   }
}
//});                                                                                 //commented
//Run the function once the page has loaded:
 
   window.onload = roundedImages;
 
//* ]]> *//
</script>'
[/PHP]
 
   <div class="imageEntry" id="img{IMGID}" style="float:left;padding:0;border:0px solid #CCCCCC;margin:0.5em 0.5em 0 0;" >
           {IMAGE}
   </div>
 
<!--IMAGES_ENTRY_END//-->
 
<!--IMAGES_ENTRY_SPACER_START//--><!-- space between images "{SPACE}px" --><!--IMAGES_ENTRY_SPACER_END//-->
<!--IMAGES_ROW_SPACER_START//--><br style="clear:both" /><!-- space between image rows --><!--IMAGES_ROW_SPACER_END//-->
 
<!--IMAGES_FOOTER_START//-->
   <br style="clear:both" />
</div>
<!--IMAGES_FOOTER_END//-->

cornerframed.css

/* CSS Document */
div.rwrapper {
   margin:3px;
   position:relative;
   float:left;
   vertical-align:top;
}
div.rwrapper img{
   float:left;
   border:0 none;
}
div.rwrapper div{
   position:absolute;
   left:0;
   height:7px;
   width:100%
}
div.rwrapper div.tl{
   background:transparent url(/pics/tl.gif) top left no-repeat;
   top:0
}
div.rwrapper div.tr{
   background:transparent url(/pics/tr.gif) top right no-repeat;
   top:0;
   }
 
div.rwrapper div.bl{
   background:transparent url(/pics/bl.gif) bottom left no-repeat;
   bottom:0
}
div.rwrapper div.br{
   background:transparent url(/pics/br.gif) bottom right no-repeat;
   bottom:0;
}