CMS Made Simple Forums

if you are willing to have 7 different pictures you could use javascript.


-- Don't do a cut and paste -- this is Pseudo-code so you get the idea of what to do --



function changePicture()
{
$img = findByElementID('map');

$img.source = /dir/new_picture.jpg;
}

If you have a half decent image program like Adobe Fireworks (best for web images) you can swap the images with CSS.

A great resource to start with is http://www.alistapart.com/.
This is a great place to learn loads of CSS tips and tricks.

The one most relevant to what you are trying to do is this http://www.alistapart.com/d/sprites/ala-blobs2.html.

That is only good when the images are links though.

About a million years ago when I did my first company website I used a similar technique, it used javascript that was automatically pumped out by Dreamweaver. A WayBack Machine copy of the page on my old site is here http://web.archive.org/web/20030715194427/conceptfactory.com.au/portfolio.htm. All the javascript you would need is in that page if you copy the source or save the page.

Now if you can hack something together using those two techniques it'll be very cool.

Good Luck
Simon66

I've done something similar lately, and built out the image map in Photoshop and assembled the behaviors in Dreamweaver. It's a bit simplistic, and I still don't like the fact that the rollover turns off the current 'on' state, but it does the job: http://www.ajmpetroleumconsultants.com/ ... e=projects

The same piece is used on the subsequent pages, with a different initial 'on' state specified. And both the text on the side and the map itself are links, with rollovers.

@ tophers
Love the site - very crisp.
Quick question, are you using the "Top simple navigation + left subnavigation + 1 column" as the basis for your template navigation?

Simon66

Sorry for the radio silence - I've been buried in work for a few days.

Simon66 - it a variation on Top Simple + Left Subnav. I've added in some of Calguy's code to get the node alias at the top (in the black block): Flyboeing - I'm glad it worked! It seemed like a fairly similar project, and I hope the example helped.