TIP - Tools Of The Trade

I have touched on the subject of the tools you should try to use in a previous post, but I wanted to introduce another 'clever' little script and decided that it was worth resurrecting the advice so that I could '... kill two birds ...', in a manner of speaking!

 

A screenshot of EditPad Pro in use.

The thumbnail on the right is a screenshot of my favourite text editor. If you mouseover the image you will see the effect I am introducing you to in this post. Like 'Thickbox' and 'Lightbox', this is JavaSript, and it provides one way of displaying your graphics without costing you much in the way of overhead. The actual image is a large(ish) 912px by 710px display, and I have set the parameters for this display to show the image at its full scale, because I have textual matter in the image that I want my visitor to read. In practise, especially if you only want a photograph to be displayed at a larger size than the thumbnail, the larger image can be set to any reasonable size that can be accommodated within an average viewers browser window; probably 800px by 600px would be sufficient to showcase any image you post. The script also has a hidden function that allows the viewer to go to the full-sized raw image when clicked. This is good for Blogger, where clicking on an image usually takes the viewer to the raw image in another window.

 

EditPad Pro displaying 'syntax coloring'
for an HTML document.

Similar screenshot, but this time with the HTML document tab selected. Here you can clearly see the colour coding or 'syntax coloring' of the HTML document (stop squinting at the back - mouseover the image!) which makes it a breeze to check all the different lines of code. It also helps if you activate the line numbering feature. Most of these features are available in the 'Lite' version which is FREE for personal use. You really should visit the EditPad Lite homepage (it will open in a new window!) to check out the many features.

I was an avid user of EditPad Lite for years, then one day I realised I used it so frequently that perhaps the Pro version was something I ought to be investigating. Not one to part with my money easily, I checked (and double-checked) the features page and realised that there were some Pro features that would make my life a whole lot easier. So, out came the credit card. And being an impulsive sort of guy, I also bought AceText at the same time. I will introduce you to the author, Jan Goyvaerts, in my next post. Suffice it to say that he writes small utilities that do exactly what they say they will do, and you get lifetime updates and support. What's not to like about that?

BTW, I composed this whole post in EditPad, copied it and pasted it into the 'Edit HTML' window, NOT the 'Compose' (or WYSIWYG) window of the post. I previewed it, tweaked anything that didn't appear to display as it should, and then hit 'PUBLISH POST'. Done!

So much for the 'clever' thingy I promised to introduce you to. Now you have an idea how it works. The 'mouseover' effect enlarges a thumbnail without the visitor having to leave the page. And, if they really want to see the raw image, all they have to do is click the enlarged image to be taken to it.

Cool, huh? But you'll have to wait for the next post to read the full 'skinny' on the 'how to' ...

 

TIP - Mouseover Fun

A comment left on David McMahon's Blog by the blogger david of David's "Images of Nature" Photography Gallery fame, asked how the 'Mouse-over' effect was done on the "Invitation" graphic used on David McMahon's page.

It is a simple Javascript function that anybody can use, so here are some quick instructions on how to achieve it. And since david asked, I trolled across to his site and stole one of his graphics to best illustrate what I am about to do!

 

---

 

1. It isn't necessary to backup your template as you aren't going to touch that side of things!

 

---

 

2. Choose the image you want to display as the permanent image. Do all the image editing you need to display it at its best. One good idea is to give the image a border, one that you will use again in the second image (see below), so that the mouseover transition appears seamless. Try and make it a reasonable size for the display space of your page, but in any event Blogger will give you the best fit when you upload the image.

2a. Now select the image you want to use as the alternative (or mouseover image) and make sure you crop it to exactly the same size as the previous one. If you used a 'frame' of any description make sure that that frame is also used for the second image.

Here are the two images I intend to use, cropped, edited and framed:

 

 

---

 

3. I have decided that the picture of the Purple tulips is the one that will appear as the 'static' image and that the Pink tulip will appear as the alternative, or 'rollover', image.

Open a NEW post. You will not be publishing this one, and will eventually delete it after first saving it as a draft. It is only to help you upload your images and get the code that is returned.

 

 

 

 

---

 

4. Here is the code for the two images you uploaded. Make a note of the bits I have highlighted. That is what you will eventally copy to your actual post, totally ignoring the rest of the Blogger code. You don't want the displayed image to be 'clickable', and for it to open up in a new window. That would sure spoil the effect you are trying to achieve!

 

 

 

---

 

5. All that remains to do is to add the Javascript to 'envelope' the two images, or add the pic URL's to the Javascript, depends on how you see it. And here it is:

 

<table align="center"><tr><td align="center"> <img onmouseover="Javascript: this.firstsrc= this.getAttribute('src'); this.secondsrc= 'http://bp0.blogger.com/_fV9I2C_dAUY/R2Wrh1GGLRI/ AAAAAAAAASM/pn8sq1dh8vc/s400/tulip_pink_round_blu. gif'; this.setAttribute('src',this. secondsrc);" onmouseout="Javascript: this.setAttribute ('src',this.firstsrc);" alt="" src='http://bp2.blogger .com/_fV9I2C_dAUY/R2WrhVGGLQI/AAAAAAAAASE/ gPIt_Eq88zw/s400/tulip_purple_round_blu.gif' /> </td></tr></table>

 

Some things to draw to your attention:

• You can actually copy/paste the code from the box and save it somewhere, preferably in the [ Settings | Formatting | Post Template ] area of your Admin page (see this previous post).
• The SECOND (rollover, mouseover, whatever) picture link is the first one to appear in the script; the FIRST (static) picture link is included as the second link reference - (hey, it's not me being difficult - it's the way the script works!).
• You must (duhhh, obviously!) change the pic URL links in the script to the ones returned by Blogger when you upload your own pics.
• It is IMPORTANT that you make sure that the quotation marks that surround the URL links are single ( ' ) and not double quotes ( " ), as this has a relevance on how the script is executed.

 

---

 

So, did I manage to successfully tip-toe through david's tulips? Let's have a look:

 

 

---

 

Looks okay to me. I guess it's your turn now ...