The Magento CMS will corrupt your content if you try to wrap block elements like Heading tags in an anchor. This example below will be broken when you try to reopen it after a save:-

<a title="Take a virtual tour" href="/virtual-tour.html">
	<img src="shop.png" alt="our shop" />
	<h4>VISIT OUR LOCAL STORE</h4>
	<p>or click here to take a <strong>Virtual Tour</strong></p>
</a>

Why? In HTML4 you are not supposed to wrap block elements with anchors.  This however is a desirable scenario when you want to create a call to action box containing images and text and still have the whole area clickable. I guess it's a good thing that the editor is strict but it can be utterly baffling to an end user why their site breaks when they just tried to make an edit.  The lack of revision history in Mage makes this a fearsome issue.

Option 1.  See no evil (lazy method)

Turn off the WYSIWYG editor in Config->System->Content Management->Enable WYSIWYG Editor. Hey presto, your content won't get validated and you can get away with all sorts of naughtiness in the CMS. Pretty slack and not really an acceptable solution though...read on.

Option 2.  Use inline elements instead of blocks.

This code now will save perfectly:-

<a title="Take a virtual tour" href="/virtual-tour.html">
	<img src="shop.png" alt="our shop" /><br />
	<strong>VISIT OUR LOCAL STORE</strong><br />
	<span class="primary">or click here to take a <strong>Virtual Tour</strong></span>
</a>

We've swapped the heading and paragraphs for inline elements like span and strong, also we need breaks to push the  text on a new line.  Still it feels like a fudge and we've lost the SEO perks of the heading tag.

Option 3.   Do it properly

<div class="call2action">
	<a title="Take a virtual tour" href="/virtual-tour.html">
		<img src="shop.png" alt="our shop" />
	</a>
	<h4>VISIT OUR LOCAL STORE</h4>
	<p>or click here to take a <strong>Virtual Tour</strong></p>
</div>

First we revert back to using headings and paragraphs but only wrap the anchor tag around the image which will stop Magento corrupting our content. Then add a wrapper around everything we want clickable and create a jquery click event on any item with this class to find the first a href from within the box.

$(document).ready(function() {
	$('body').on('click','.call2action',function(e){ //bind to body incase the block is loaded via ajax after page load
		e.preventDefault();   //Prevent the default action if the user clicks the A tag
		var url = $(this).find('a').first().attr('href');  //Find the first href in our container
		window.location.assign(url); //Go there
	});
});

Now you can add as many call2action divs as you need and the javascript will trigger when any of them are clicked and jump to the right URL. Happy Days! Don't forget a lil CSS to add the cursor pointer and different hover or border colour to feedback to the user that the area is clickable. Then we can remove the pesky text decoration too:-

.call2action:hover { cursor:pointer; background-color:#F7F4E1; text-decoration:none;}

Conclusion: This method can be used on any site not just Magento to create call to action content blocks which are completely clickable, with correct and SEO optimised markup. Hope this is useful for someone who's been pulling their hair out with Mage static blocks or pages.