Printed from www.bltt.org
You are viewing the old version of this website. Visit the new site with updated content at www.charliedanger.com

Clicker 4 Hotspots

Introduction

Body with hot spots The Brain Lungs Heart Mouth Throat Kidney Kidney Liver? Small feline that was eaten alive as a dare one night and who has now taken up residence near the liver. A Hotspot is a part of an image that does something when you click on it or hover over it with the pointer. The Web is full of images that contain hotspots that are very useful in a variety of ways. For example, a picture of the human body could use hotspots to tell you more information about a particular part, without you having to know the word for it. Hovering over a hotspot tends to give you a 'tooltip' and clicking on it might open up another web page.

Hotspots in Clicker 4 work the same way. They are a great interactive way of labeling an image or navigating text-free through a set of grids.

Example

A great example of hotspots is to label a diagram or picture. When a pupil hovers the mouse over certain 'hot' areas of the picture a tooltip will appear to show what it is. Clicking on it will then go into further detail. Here's a picture of one of my flatmates - Iggy the Iguana. With a picture of this interesting fellow on the screen, pupils can find out more about him by daring to click on some of his scary parts.

Iggy the IguanaYou can make a series of hotspots over areas that you think your pupils will find interesting; and by keeping them invisible it makes it fun for them to hunt them down. The following step-by-step guide shows you how to make a simple grid in Clicker 4 that reveals information about the Iguana's biology in an interesting way.

Clicker 4 Welcome screen

Start Clicker.

If your version of Clicker pops up with the 'home grid' then click on the 'Make a Clicker Grid' option.

Clicker File Browser

If Clicker doesn't start with the home grid then go to the File menu and click on New Grid.

Clicker 4 Templates Dialog

Now my Iguana picture isn't intended to send any text to Clicker Writer (the top half of Clicker) so I'm not going to design it that way.

I'm going to choose 'blank' from the list of options and click on OK.

Incidentally - if you like my large, green cursor you can download it from here.

A Blank Fullscreen grid

Here we are with a blank grid. There are no cells in it and there isn't anywhere to write, either.

Insert Graphic Box menu item

Go to the Grid menu, down to Inset, and select Insert Graphic Box

Positioning a graphic box

An non-descriptive black outline should appear towards the top-left of the blue area. This is your graphic box inside which you'll place your picture.

It's best at this point to get this to the rough position where you want the picture to appear.

Hold down the ALT key on your keyboard and click and drag in the middle of the outlined area to move it.

Resizing a graphic box

To resize the shape, go to the bottom-right hand corner and hold the ALT key again. If your pointer is perfectly positioned over the corner you should see that it changes to a double-headed arrow, as shown in the picture opposite.

Continue holding down the ALT key as you drag the shape to a different size with your mouse.

Open File icon on the graphic box toolbar

In order to put an actual picture into this box you need to hold down the SHIFT key and click inside it.

You should see a toolbar appear just above the outline. Click on the open file icon (far left) to select your picture.

To start with it's best to insert the picture that you want to add the hotspots to. It's best to choose something fairly large so that it fills a big area without pixelating. You don't want to big an image, though, or the computer will run slowly and might even crash.

Any picture taken with a 1, 2 or 3 megapixel camera should work great. If your image is too large then you may need to reduce its size using a photographic program or Windows XP's free resize powertoy External Link.

Browse for file dialog

Up pops the Select Graphic dialog box. Graphic is a computer-term for picture. You may have your picture anywhere on the computer, but a good bet is the 'My Pictures' folder that sits inside 'My Documents'.

If you downloaded a picture on to your computer but you can't remember where it might be then it's handy to know that the computer will use the same location the next time you download a picture. Therefore you can simply go to download another picture and your computer will reveal to you where it saved the first one. Makes sense?

Once you've found your picture click on it and press the Open button.

A fullscreen image using a graphic box

If your image looks distorted then resize the outline again using the ALT key and holding down the corner of the box.

Hurray! The first stage is completed. If that took longer than you thought it should and you're feeling a little tense then I suggest you go and find a cat to make a fuss of.

Insert Cell menu item

Now its time to add your hotspots. The more observant amongst you may have noticed that there aren't any mention of 'hotspots' in any of Clicker's menus. This is because we are cheating and using transparent cells.

To make a hotspot, start by going to the Grid menu, move down to Insert and select Insert Cell.

This will plonk a cell down on your grid somewhere, usually in the top-left of the screen. Using the ALT keys again, drag this cell to the part of the image you want it to be a hotspot for.

Drawing a cell

In my case I'm going to drag it to Iggy's nose. Then it will probably need resizing, and this is accomplished in exactly the same way as with the picture before. Hold down ALT while dragging the bottom-right corner of the cell until it reaches the size you're after. Don't worry about getting it exactly right - just cover the general area.

If you find that you can't resize the cell no matter what you do then this might be because you have 'Dwell Delay' selected as your access method. It is best to set your access method to 'Mouse Only' while making your own grids.

Cell Properties

Now make the cell completely invisible by removing its grey border and making it transparent.

You edit cells by holding down the SHIFT key whilst right-clicking somewhere near the middle of the cell. This should bring up the Cell Properties dialog box.

Towards the bottom of the box you'll see two checkboxes, Borders and Transparent. Clear the tick in the Borders box and put a tick in the Transparent one. This will make the cell completely invisible.

Before you click OK you'll need to tell the cell how to behave when someone hovers over it or clicks on it.

(if you have clicked on OK then right-click in the hotspot area to bring the dialog back up)

Cursor Selection

To set a tooltip click on the Advanced tab and type your tooltip into the tooltip box. Easy!

This tooltip text will appear next to the pointer when it hovers over the area.

Before moving on it's a good idea to select a new mouse pointer that will appear when the cursor is over the hotspot. This makes it a lot easier for your pupil to recognise what's a hotspot and what's a hotspot not.

I generally chose Pointer 2 as this fits in with how the web works, too (hover the mouse over the screenshot on the left and you'll see the pointer turns into a hand)

Sound and Video Cell Options

To make the grid more 'interactive' you can get it to speak in more detail about the area when it is clicked on. You can use synthetic speech for this or use your own voice. If you've got a microphone Clicker makes it easier to chose the latter option. Most laptops have a microphone built-in to the case.

Simply select the Sound or video file option under 'Left Button' and press the record button to make your recording.

If you don't have a mic you can use Clicker's synthetic speech by typing in what you would like Clicker to say by selecting 'Software Speech' and typing your sentence in the adjacent box.

Click OK and you'll see that your cell has become invisible - it's now a hotspot! Test it by hovering the mouse over the area to see if the cursor changes and the tooltip pops up. When it does you can click the left mouse button to play back your recorded message.
Now all you have to do is repeat the previous few steps again for as many hotspots as you want! If you've got any questions then please contact me and I'll endeavour to help you.

More Clicker 4 Resources on this site

Follow this link to see all my resources for Clicker 4.

On The Web

Clicker 4 is made by Crick Software. Their official website is www.cricksoft.com External Link.