combine image and text on the fly and make whole div works as an hypelink

A picture worth thousands of words:

Question:

How to layout the image and text so they can work as an anchor as开发者_StackOverflow社区 a whole?

---

make your html

var varhtml="<div id="somid">// give background url as image
text goes here
</div>"

('#parentHtmlid').append(varhtml); or
('#parentHtmlid').html(varhtml); if you have place holder

$('#someid').live('click', function() { // as this id added at run time use live in document.ready//
   location.href="http://yoururl";
});

---

Create a parent element for both the image and the text, with position: relative. Each of its children should be position: absolute, with appropriate top/bottom left/right to line things up the way you want.