TJKDesign: Home Page

ez-css Putting the 'less' in table-less layouts. css-101 logo
Bookmark this article at these sites:

Using IMG elements rather than background images in blockquote.

To keep their markup clean, most authors nowadays prefer to use background images instead of IMG elements to display quotes in BLOCKQUOTE.

This article is about keeping the markup clean while taking advantage of using IMG elements (they flow with the text and they are sent to the printer). Also, note that this solution uses PNG files. Yes, you read it right, I'm talking about transparency here (in Internet Explorer 6 and modern browsers).

Markup for the BLOCKQUOTE:

<blockquote cite="http://www.brainyquote.com/quotes/quotes/g/grouchomar137214.html">
<p>Anyone who says he can see through women is missing a lot.</p>
</blockquote>

Now that we are using neither the BLOCKQUOTE nor P to display our "quotes", we can use these elements to create rounded corner boxes (or whatever you want to use their background for).
So with two simple CSS rules like these:

blockquote {width:270px;margin-left:40px;padding:10px 0 0 0;background:#ffc url(../img/q_O.gif) 50% 0 no-repeat}
blockquote p {padding:10px;margin:0;background:#ffc url(../img/q_M.gif) 50% 0}

We get boxes like these:

Anyone who says he can see through women is missing a lot.

Women should be obscene and not heard.

When the page loads, the script parses the document, looking for BLOCKQUOTE elements, and then plugs in the two images with their proper attributes (src, alt, class, etc.). If there is a CITE attribute present in the markup, then the script creates a DIV to display the domain name as a link.

Editing the CSS rules:

IMG and DIV elements have each been given a CLASS name:

Opening quote: "q_O"
On this page I'm using:
blockquote .q_O {margin-right:5px}
Closing quote: "q_C"
On this page I'm using:
blockquote .q_C {margin-left:5px}
The DIV that contains "Quote from: ... ": "q_D"
On this page I'm using:
blockquote .q_D {
font-size:.85em;
padding:0 0 10px 10px;
font-family:Arial,Helvetica,sans-serif;
background:#ffc url(../img/q_C.gif) 50% 100% no-repeat
}

How to use this script:

First, download TJK_quote.zip (1 KB) and unzip the file into a directory within your site. Then, use a SCRIPT element to link the JS file (TJK_quote.js) to your pages within the HEAD element of your documents, as shown below:

<script type="text/javascript" src="/js/TJK_quote.js"></script>
</head>

Note: In this case, the file has been saved inside a directory called "JS" within the root folder.

Use the onload event to call the function; for example: <body onload="TJK_quote()"> or, better, use a technique like the one explained here: executing JavaScript on page load.

Three things to make sure of:

Stick with this particular (X)HTML markup.
For example, using <blockquote><div><p> (instead of <blockquote><p>) would put the images outside of the paragraph.
Insert your own image paths in the script where needed (see script below).
Paths to PNG files for the SRC and FILTER attributes are needed for both images.
Set padding values in the script where needed (see script below).
Top padding values should be equal to the HEIGHT of the images used.

For the curious:

This is the script:

<!--
function TJK_quote(){// v1.1.2 Copyright (c) 2006 TJKDesign - Thierry Koblentz
// use the same paths for: SRC and STYLE (filter) attributes
// set top padding values to match the height of your images
// you may style both images using CSS: blockquote img {...}
// or individually using classes: .q_O {...} and .q_C {...}
if (!document.getElementsByTagName || !document.createElement) return;
var z_Q=document.getElementsByTagName("blockquote");
for (var x=0;x<z_Q.length;x++){
var q_O = document.createElement('img');
q_O.alt="";
q_O.src="/img/q_O.png";
q_O.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',src='/img/q_O.png')";
if (document.all) q_O.style.paddingTop="15px";
q_O.style.verticalAlign="text-bottom";
q_O.className="q_O";
var q_C = document.createElement('img');
q_C.alt="";
q_C.src="/img/q_C.png";
q_C.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',src='/img/q_C.png')";
if (document.all) q_C.style.paddingTop="15px";
q_C.style.verticalAlign="top";
q_C.className="q_C";
z_Q[x].getElementsByTagName("p")[0].insertBefore(q_O,z_Q[x].getElementsByTagName("p")[0].firstChild)
z_Q[x].getElementsByTagName("p")[0].appendChild(q_C);
var z_URL=z_Q[x].getAttribute("cite");
if (z_URL){
var z_DIV = document.createElement('div');
var z_FROM = document.createTextNode("Quote from: ");
z_Q[x].appendChild(z_DIV);
z_DIV.className="q_D";
var z_A = document.createElement('a');
var z_DOMAIN = document.createTextNode(z_URL.slice(z_URL.indexOf("//")+2,z_URL.indexOf("/",9)));
z_A.href=z_URL;
z_A.appendChild(z_DOMAIN);
z_DIV.appendChild(z_FROM);
z_DIV.appendChild(z_A);
}
}
}
//-->

This script should degrade nicely in JS-challenged UAs (User Agent).

Check this clever CSS technique if you do not care about printing these images, exposing the cite attribute or do not "need" the background of the P element.

Please use this contact form to send feedback and report errors.