Code:
<div id="view">
<img id="viewimg" src="defaultimage.gif" height="100" width="100">
<p id="imgdesc">dummy text</p>
</div>
Make the div visible initially and use css on all three elements until it looks good. The div should be
position: absolute with a
z-index so that it sits above other content - I'm assuming this is your requirement?
I think the src is set using css() (I should double-check this
):
Code:
$('#viewimg').css('src','someother.gif');
$('#imgdesc').text('What a great image!');
$('#view').css('display','block'); //or fadeIn() etc.
If you will be substituting different images and descriptions then I would store, and retrieve this information from, an array - or probably an object. Something like this:
Code:
var imgDetails = { "key1" : ["newimagesrc.gif", "Great description here"],
"key2" : ["newimagesrc.gif", "Great description here"]
//etc..
};
NB I haven't checked any of this - I'm just offering a few pointers/suggestions.