Okay, so I go on work experience tomorrow, where I will be making my Dad's website for his business, and I need a little bit of help. One of the things he wants is like on this website: http://www.fasthosts.co.uk/ See the way when you hover over the boxes saying 'domain names', 'email hosting', 'web hosting'. etc. the image above changes to match the thing you're hovering over. Well, I was wondering if anybody knew how I could achieve that sort of effect? Thanks for the help.
Their page looks pretty cool, although I didn't even notice the effect at first, even after you explicitly said it was there. I realised after a bit that I was moving the mouse too fast, scanning the page like an average web viewer. It's just a little bit unintuitive (meaning, I didn't expect relevant content to be related to where my mouse was). Of course, there's the problem of, does the site still work for people without Flash Player (there are more of them out there than you think)? ------------------------- So, your choices are Flash, Javascript, or CSS (maybe another I'm not thinking of, probably server-side). Flash is blocked by many people sinply because it is often used annoyingly, or loads very slowly on dial-up. I myself have Flash player on one browser, and my others without. If you use Flash, make sure there is some image and text behind it (using the <object> tag, not the crap Flash itself spews out, you can have a "child" image in there to appear for those without Flash Player). Javascript is also not used by everyone, and if you have anything you want teh Googlie-bots to see, don't use Flash or Javascript as the bots only see html. If you use Js, keep it out of the html page (use external scripts). Make sure the bulk of the site can function without it. You'd be looking for "Javascript image map mouseover" but most of them on teh Interwebz are not for two different areas on the page... change the end x and y coords to a different place on the page for that. There is a pure-CSS solution if you're interested. Look at the code on this page: http://mikecherim.com/experiments/css_map_pop.php Works whether people have Flash or not, Javascript or not. What your dad wants to make very sure of, though, is that his page works even without images or CSS. Meaning, a blind customer or someone with a text-only browser can read the site, know what's on there, can click all navigation links, can fill in all forms etc. and can generally use it. Great idea for a real estate site, actually. Mouse over the home, see big, changing images of the house.
Thanks a bunch, the last link was pretty much what I needed (with a little bit of editting of the positions). The information you gave above was also very helpful.