Behold, Emmi, the apple of her parent’s eye and that of her grandparents. Now, to showcase Emmi’s Christmas day I’ve come up with, Bonza, a simple open source image gallery that contains no JavaScript. (see source code below)
If you pass your mouse cursor over the four quadrants of the image, four different clickable smaller images of Emmi will appear along with text describing the shot. Try it and see what you think.
Now for the source code: Yes, it looks gobbledygook. Don’t worry, just copy and paste the code below straight into the “Edit HTML” section of your blog post, or, into the source section when using Windows Live Writer and then follow the instructions below.
<div align="center"> <table style="margin: 0px auto" cellspacing="0" cellpadding="0" align="center" border-spacing="0"><tbody> <tr> <td width="91" align="center" border-spacing="0" cellpadding="0" cellspacing="0" border="0"><a href="http://lh3.ggpht.com/_tpq91pcqIw8/TRb2mqPiOiI/AAAAAAAAKGU/aCxI9DkciDo/emmione.jpg" target="_blank"><img style="padding-bottom: 0px; border-right-width: 0px; background-color: #cccccc; margin: 0px auto; padding-left: 6px; padding-right: 0px; display: block; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 6px" onmouseover="this.src='http://lh3.ggpht.com/_tpq91pcqIw8/TRb2mqPiOiI/AAAAAAAAKGU/aCxI9DkciDo/emmione.jpg'" title="Emmi on Christmas Day" onmouseout="this.src='http://lh6.ggpht.com/_tpq91pcqIw8/TRbnnpcVvxI/AAAAAAAAKFM/4F9l6O-ziH8/emmitopleft-1.jpg'" border="0" alt="Emmi" align="center" src="http://lh6.ggpht.com/_tpq91pcqIw8/TRbnnpcVvxI/AAAAAAAAKFM/4F9l6O-ziH8/emmitopleft-1.jpg" width="186" height="248" valign="bottom" /></a></td> <td width="91" align="center" border-spacing="0" cellpadding="0" cellspacing="0" border="0"><a href="http://lh6.ggpht.com/_tpq91pcqIw8/TRb21OcLQ8I/AAAAAAAAKGY/Topy5cbm2I0/emmitwo.jpg" target="_blank"><img style="padding-bottom: 0px; border-right-width: 0px; background-color: #cccccc; margin: 0px auto; padding-left: 0px; padding-right: 6px; display: block; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 6px" onmouseover="this.src='http://lh6.ggpht.com/_tpq91pcqIw8/TRb21OcLQ8I/AAAAAAAAKGY/Topy5cbm2I0/emmitwo.jpg'" title="Emmi admiring a Christmas present" onmouseout="this.src='http://lh5.ggpht.com/_tpq91pcqIw8/TRboAfn904I/AAAAAAAAKFQ/fRN3ZHdtVMY/emmitopright-1.jpg'" border="0" alt="Emmi" align="center" src="http://lh5.ggpht.com/_tpq91pcqIw8/TRboAfn904I/AAAAAAAAKFQ/fRN3ZHdtVMY/emmitopright-1.jpg" width="186" height="248" valign="bottom" /></a></td> </tr> <tr> <td width="91" align="center" border-spacing="0" cellpadding="0" cellspacing="0" border="0"><a href="http://lh6.ggpht.com/_tpq91pcqIw8/TRb3DHXnFJI/AAAAAAAAKGo/fnZTE9cI7aA/emmithree.jpg" target="_blank"><img style="padding-bottom: 6px; border-right-width: 0px; background-color: #cccccc; margin: 0px auto; padding-left: 6px; padding-right: 0px; display: block; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px" onmouseover="this.src='http://lh6.ggpht.com/_tpq91pcqIw8/TRb3DHXnFJI/AAAAAAAAKGo/fnZTE9cI7aA/emmithree.jpg'" title="Emmi on the phone thanking Santa Claus" onmouseout="this.src='http://lh4.ggpht.com/_tpq91pcqIw8/TRbodFa12II/AAAAAAAAKFw/5QBwfHqV8Hs/emmibottomleft-1.jpg'" border="0" alt="granddaughter" align="center" src="http://lh4.ggpht.com/_tpq91pcqIw8/TRbodFa12II/AAAAAAAAKFw/5QBwfHqV8Hs/emmibottomleft-1.jpg" width="186" height="248" valign="top" /></a></td> <td width="91" align="center" border-spacing="0" cellpadding="0" cellspacing="0" border="0"><a href="http://lh5.ggpht.com/_tpq91pcqIw8/TRb3QA4ex8I/AAAAAAAAKGs/FuLh6jaPB1o/emmifour.jpg" target="_blank"><img style="padding-bottom: 6px; border-right-width: 0px; background-color: #cccccc; margin: 0px auto; padding-left: 0px; padding-right: 6px; display: block; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px" onmouseover="this.src='http://lh5.ggpht.com/_tpq91pcqIw8/TRb3QA4ex8I/AAAAAAAAKGs/FuLh6jaPB1o/emmifour.jpg'" title="Emmi deciding which Christmas present to open first" onmouseout="this.src='http://lh6.ggpht.com/_tpq91pcqIw8/TRboKHK7LpI/AAAAAAAAKFg/fgRFXM7iQVY/emmibottomright-1.jpg'" border="0" alt="granddaughter" align="center" src="http://lh6.ggpht.com/_tpq91pcqIw8/TRboKHK7LpI/AAAAAAAAKFg/fgRFXM7iQVY/emmibottomright-1.jpg" width="186" height="248" valign="top" /></a></td> </tr> <tr> <td colspan="2"> <div align="right"><a style="text-decoration: none" title="Get this" href="http://stvincentsdarlinghurstmalenurses.blogspot.com/2011/01/open-source-image-gallery-bonza.html"><font color="#c0c0c0">Bonza</font></a></div> </td> </tr> </tbody></table> </div>
Further Instructions:
1. Divide main image into four equal parts. (here, each quadrant is 186 x 248 pixels)
2. Change blue code to their http address.
3. Their http address appears twice in the code.
4. Select four separate smaller images for the mouseover effect.
5. These will be the same size as the quartered main image. (186 x 248)
6. Change red code to their http address.
7. Change green code for image click event.
8. Adjust image width (186) and height (248) in the code to suit.
9. Adjust background-color: #cccccc; image alt and title to suit.
Note:
1. Tested in IE8, Firefox 3.6, Google Chrome 8, Opera 11 and Safari 5.
2. Some web feeds are devoid of the effect but the click event remains.
3. If using the source code please retain the credit.
If you have any questions I will endeavour to answer them the best I can. Well, that’s about it, enjoy.
| You might also like: |
| LinkWithin Alternative Howzat: Three stories | | | LinkWithin Alternative Howzat: Four stories | | | Flushed with success - Change Image on Mouseover | | | Random Rotating Header Images | |
| | | | |
| |
Read more...