Hi guys,
I'm after some general advice on how people think I should best code the following scenario.. Before I start I'll admit to being a HTML/CSS hacker, I have a basic understanding but can normally hack together the code I need so if you're able to help please write your reply for a newb..

I want to create a home/launch page for a Unified Communications project I'm working on. As per the attached JPG examples, the first shot (JPG1) would be the first/default displayed page. When the use clicks on an icon (refer 2nd pic) the icon colour/hue changes (or is replaced with a coloured one) and a pop out message appears with a little description of the message plus some URL's for additional info. Jpg3 shows the same operation but for another (the 'help') icon.

The message would remain popped out/displayed until the user either clicks on another icon at which that message disappears and the new icon message pops out -OR- the user clicks on the general page area (off the icons) at which point the pop out disappears and the user is returned to home/launch page (JPG1). It'd be nice (but not essential) for the messages to slide in and out rather than simple appear/disappear.

The last bit I need to handle is the whole page needs to be displayed within a webpart on a SharePoint (2007) site.

Ideally I'd like to minimise the use of any special code, scripts but if they're need then I'm happy to try them. Also the page would need to work for all the latest versions of browsers (chrome, IE etc.).

Appreciate any and all advice

Cheers Budgie