Stillnet Studios

CFIMAGE, the new image manipulation tag in CF8 is a great tag. One of the things its often used for is manipulating an image (resizing, cropping, etc.) and then displaying that image using the action=”writeToBrowser” attribute. If this image is linked to something by wrapping an anchor tag around it, many browsers by default will display a blue border around it.

Example:

If this is undesirable, there are several ways around it. Normally we’d just put a border=”0″ attribute in the <img> tag, but in this case, when we use the cfimage tag with action=”writeToBrowser”, ColdFusion is creating a temporary image and writting out the <img> tag pointing to it. So we can’t add the border=”0″ attribute.

You could use CSS to turn off the border on all your images. In your stylesheet you could use:

<style type="text/css">
img { border: 0px;}
</style>

Thats painting with a wide brush, though. We can also use a little trickier CSS to access the exact image element, by placing a class in the anchor tag that surrounds the image. For example, if you add an class of nobdr to the <a href…> tag, then use this:

<style type="text/css">
.nobdr img {border: 0px;}
</style>

If you want to place that CSS in the header of your document (technically, all style tags should be in your header), yet still have it right above the element in the unrendered source code (I find this easier to maintain later), then drop it into the cfhtmlhead tag:

<cfsavecontent variable="tmpCSS">
<style type="text/css">
.nobdr img {border: 0px;}
</style>
</cfsavecontent>

<cfhtmlhead text="#tmpCSS#">

This entry was posted on Monday, July 28th, 2008 at 5:46 pm and is filed under Web Development.