Well, what do ya know, it’s time for one of those mildly useful posts that are related to iWeb! You know that whole iWeb 2.0 thing, right? Kinda put a hurt on .Mac websites everywhere? Mine was no exception. I’m currently working through a few issues and this is the first one where I’ve actually found something new as a result. It’s at least new to me even though it may be a pre-owned thought.

You may be familiar with my Visual Archive page. It’s set up to be an Archive page for the more visual visitors (hence, the rather appropriate name). The idea is, if you remember the image that went to a story, you can scan my VA, find it, follow the link, and enjoy it all over again! I describe on this page the idea behind setting it up and some of the steps I went through to make it. In summary, I wanted it to be visual and easy to set up and (if needed) re-do. The first version of iWeb 2 wouldn’t even keep the images after opening and saving so the first step to re-engineering that page was what I like to call a causal temporal deferment. Other people may prefer the term waiting. Either way, step one was to acquire iWeb 2.0.1.

After successful completion of step one, step two was to look at how badly the page was affected. Previously, objects on photo pages were forced into one of two rectangular 4:3 ratio shapes, portrait or landscape. If your image wasn’t originally 4:3, then it got padded with white to fit. In iWeb 2, the images are displayed as they were created with the border of your choice. If you’ve got a tall thin image, it gets placed in the photo page tall and thin, no padding. I realized bringing forward the old way of doing things wasn’t goint to work. Since each image has it’s own unique ratio, I’d have to create a separate white rectangle to fit over each and every image. Additionally, each image would then be covered by a different sized link area. Not a major problem exactly, but it’s good to have nice large targets for iPhone users (iPhone peeps, I’m thinkin’ ‘bout cha!).

The problem of small space/large link led me to begin considering borderless options. The common way to create an unseen borderless link using iWeb is to create a rectangular shape with no stroke and a 1% fill. No one notices this nearly invisible object, and as a result it won’t throw off your look at all. This works great in almost every case... except for me, of course. My previous solution of using a white link shape border over each photo’s white border gave the illusion of borderlessness with a truly transparent fill. I wanted to recreate the magic of complete transparency, but iWeb doesn’t do zero percent .png’s. From some tests, I found that while iWeb won’t create .png’s from shapes with None for the fill and stroke, it’s very happy using them once you’ve got them and will publish them (unlike fully transparent shapes). So, how to create them?

There are many ways to do it, but one way I’ve found to be cheap (free!) and easy is to use BeLight’s Image Tricks application. In iWeb, create an object with no fill and no stroke. Copy that object. Switch to Image Tricks and do File -> New From Clipboard (you won’t see anything but, once you’re used to working with invisible images, this won’t bother you at all). Now, do File -> Save As... and choose PNG for the format. Problem solved, right? Not exactly. Through even further testing I found that iWeb seems to allow interactivity with an object based on it’s transparency! This doesn’t appear to affect shapes at all as, if you remember where it was, you can always grab a transparent shape again. Bringing in a fully transparent PNG image, though, causes problems as you can’t click on it, there’s no border to click on, no way at all of interacting with it or moving it around the page after it’s in iWeb. You basically get one chance to interact with it when you bring it in, then after that, it’s done (I couldn’t even drag a selection rectangle to where I KNEW I’d put it!). We’re going to have to make that one chance at interaction count!

This is how we do it. Drag and drop the fully transparent PNG into iWeb and then, immediately assign it a hyperlink. Doesn’t matter where it links to, just assign it. You’ll see the

small blue hyperlink indicator but it’ll just be sitting there apparently attached to nothing. Err, ok, it’s actually attached to nothing! This little trick not only allows the fully transparent PNG to exist, but also gives you a nice handle to drag it with (and that handle doesn’t publish)!

Once I’d figured that out, it was time to put it ALLL together! I decided on just ONE square shape large enough to cover each picture (since no one can see it anyway, I didn’t have to worry about having a specifically sized shape), created it’s transparent equivalent, brought it to my Visual Archive page, immediately assigned a link, then, just Copy and Paste’d it over and over, changing the link to represent the page it hovered over. I’m happy with the result!

As a final step, I deactivated the Allow visitors to subscribe button. I may turn it back on eventually, but for right now, other issues with my site causes it not to work anyway.