Today’s little tip comes from a bit of experimentation I did on one of my other pages. I’m not completely done with the experimentation, BUT I wanted to toss this out there.

iWeb does NOT currently allow you to do any sort of rollover effect on anything but text. The cool thing is that text doesn’t HAVE to be “text”. You already have a few fonts on your system that display as images or designs when you type them. These are called dingbats (Why? Check Google, you’ll be glad you did!) and, since they’re seen as fonts just like any other font, typing them onto a page and attaching a hyperlink makes them objects that can be rolled over!

A few things to think about when using this tip.

You don’t want to use these inline with other text

This may turn your ENTIRE text box into a .png graphic. If that’s the effect you’re looking for, then by all means, have at it!

Those unsightly underlines!

If you’re using a theme like mine (textual links are underlined) you’ll need to fake it by covering the underline with a color that matches the background (as I’ve done above and with the other links).

Any color you want... no, not really

You won’t have any control over the rollover colors. I tried! If you take some nice red text and apply a hyperlink to it, it changes to the rollover colors for that theme. You DO still have control over the Background Fill (in the inspector in the Text pane) so you can camouflage a link with that too!

Location, Location, and size too

Be careful of how close you put these together. If you’re using a largish font, go into the Text pane in the inspector and change the Line spacing and the Inset Margin to as low as they can go. This makes the bounding box hug as closely as possible to the image, allowing you to place them closer together without overlapping. (The layer iWeb places the image on is pretty big too. If the sun in the upper left were any further up, the Intaglio link would be obscured!) If your rollovers need to be REALLY close, just put them all in the same text box, applying the link to each character as I did in the ticket above.

Once you’ve made yourself familiar with those caveats, go to iWeb and hit command-T to bring up your font window.

In the Search area, type “ding” and, in true Spotlight fashion, it will display all the fonts currently installed that have “ding” in their name. These are good to start with to see what kind of design elements are available to you. Want more than that? Follow the “winning” links above to other sites with dingbat fonts of all shapes, styles, and subjects. The “losing” links, well, they’re different!

In iWeb, you can attach a hyperlink to anything and web users are used to looking for that little finger now when browsing a website, so the feedback a rollover gives isn’t as important in these days of the un-lightened internet. However, as a fun and easy little addition to your iWeb masterpiece (I can think of a few ideas just off the top of my head), it’s pretty neat!

Now, if you’ll excuse me, I suddenly have an urge to go buy a lotto ticket...