Mouse-over Pop-ups, Images and Links

'Mouse-over pop-ups' are an interesting variation on the theme of image display. They can also be used when linking an image to another post, OR, to an anchor within the post in which they are displayed.

Here are some examples, with the HTML codes displayed...


1) A simple 'Mouse-over pop-up' explaining to click on the image for enlargement.




The HTML code appears, as follows - the changes made in bold-red:

<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://2.bp.blogspot.com/__v4nth5_ki0/SmFi1pXMFRI/AAAAAAAAJgI/_DNFuUt2xKQ/s1600-h/Hong+Kong+3+-+1988.jpg" title="Hello! Click the image to enlarge it."target="_blank"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 320px; height: 194px;" src="http://2.bp.blogspot.com/__v4nth5_ki0/SmFi1pXMFRI/AAAAAAAAJgI/_DNFuUt2xKQ/s320/Hong+Kong+3+-+1988.jpg" alt="" id="BLOGGER_PHOTO_ID_5359673705323304210" border="0" /></a>

2) A 'Mouse-over pop-up' explaining that the image is a link to the original post.



The HTML code appears, as follows - the additions in bold-red:

<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://photos.robertosblogs.net/2009/07/postcards-from-past.html#Australian" title="Click the image to link to the original post" target="_blank"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 320px; height: 216px;" src="http://3.bp.blogspot.com/__v4nth5_ki0/SmFzHt4xzII/AAAAAAAAJgQ/VjMKpUGK6tc/s320/Australian+Alps+3+-+1971.jpg" alt="" id="BLOGGER_PHOTO_ID_5359691607961619586" border="0" ></a>

The addition of target="_blank" opens a separate window for viewing.

3) 'Mouse-over pop-up' in an image used as a internal link to an 'Anchor'.

Mouse-over pop-ups can also be used with 'Anchor Links' within a post. Let's look at the next image, which will link back to the beginning of this post.



The HTML code is as follows - the additions in bold-red:

<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://blogging.robertosblogs.net/2009/07/mouse-over-pop-ups-images-and-links.html#%27Mouse" title="Click this image to return to the start"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 320px; height: 214px;" src="http://3.bp.blogspot.com/__v4nth5_ki0/SmGMbVpikrI/AAAAAAAAJgg/brbX5HMWf-A/s320/Tasman+Bridge+3+-+1975.jpg" alt="" id="BLOGGER_PHOTO_ID_5359719432843334322" border="0" /></a>

The mouse-over pop-up can also be used for 'ordinary' text, as well.

The HTML code for this, is:

<a title="normal, customary, quotidian, stock-standard">'ordinary'</a>

TOP