Beginner Webdesign Filter: Big Pictures with Linking Parts

June 1, 2006 5:33 AM

When designing webpages, what's the easier way to makes big pictures that open-up new information when different parts are clicked?

I don't any experience with flash, but would flash be the easiest way to do this? (I'm not a huge fan either). I'm making a website that will contain maps of land plots under development, and I want it so that when certain "houses" are clicked, more info pops up on the property including pics, etc.

I'm not very experience webdesigner but I am accustomed to Joomla, HTML/CSS, and some basic javascripting.

posted by BigBrownBear to technology (11 comments total)

I think the easiest way would be imagemaps. For something more advanced you could use Ajax, which I believe is what Google Maps uses.
posted by justkevin at 5:40 AM on June 1, 2006

You could try Frank Manno's CSS Imagemaps, which might be what you're looking for...
posted by Katemonkey at 5:48 AM on June 1, 2006

AJAX or CCS would definitely make a more dynamic and powerful image map, but the old-school HTML method works better for me. It seems to be more compatible and much easier to make.

Also, You can make it yourself using the link that justkevin provided or you can check out the many Image mapping programs out there. I used to use CoffeeCup Image mapper, but that is only shareware and I believe there are quite a few freeware alternatives now.

Good luck.
posted by coolin86 at 5:53 AM on June 1, 2006

Depending on your resources, both Dreamweaver and Fireworks have features that will automatically do this for you. It's going to be uglier code, but it will be a WYSWYG process.
posted by Kimberly at 9:21 AM on June 1, 2006

I agree with Kimberly. This process is easy as pie in Dreamweaver.

It is also rather easy in Flash, but you've gotta be ready to do some basic ActionScripting.
posted by josh.ev9 at 9:51 AM on June 1, 2006

As a web surfer, I beg you not to use flash for something like this. It's perfectly possible to do this easily with an imagemap, and I tend to just close the page whenever a Flash object appears, unless I am specifically looking for it (e.g. youtube.)
posted by Rhomboid at 10:29 AM on June 1, 2006

GIMP is a free programs that will do image maps (Filter.. Web.. Image map). It's also very good at giving you options when you go to compress images for the web. If there's a minimal amount of colors use .gif with a low number of index colors. Things with lots of colors/big images use .jpg Gimp will let you preview the compression with a slider so you can get the smallest size/still looks ok. Also another n00b tip: find sites that you like and as long as they aren't flash you can totally just steal/borrow/look at the source code (I set opera to open source with a text editor like notepad and the firefox extension scrapbook is a good way to rip everything from a webpage to your hard drive). Flashkit.com is a good way to get code for specific things done in flash, but its always reccomended to avoid making things in flash unless its a game or youre feeling spiteful/lazy. :>
posted by psychobum at 10:43 AM on June 1, 2006

psychobum - that's awesome. I didn't realize that GIMP did image maps. I also hate flash and appreciate all the alternatives suggested by you guys.
posted by BigBrownBear at 11:21 AM on June 1, 2006

You don't need Ajax unless you have gobs of data.

1. Make the land plot an image map.
2. The expanded picture/info blurbs are absolutely-positioned divs that are initialized as 'display:none'.
3. The links on the image maps are to a JS function that changes the display property of the appropriate div, setting it to 'block'. The div will appear wherever you absolutely positioned it.
4. The div should have a "close" button or an onmouseoff event that closes automatically. And "close" just means re-setting it to 'display:none'.
posted by nev at 1:05 PM on June 1, 2006

I did something like this using an image map (made with the Gimp) and the lightbox js plugin for Wordpress.
posted by Biblio at 3:31 PM on June 1, 2006

-- find sites that you like and as long as they aren't flash you can totally just steal/borrow/look at the source code

The Firefox ViewSourceWith extension makes source viewable and editable from the right-click context menu in the text editor of your choice. It's great for looking up a code trick like this, and it's also great for sneaking in and correcting a typo on a local copy of an html document without firing up a big fancy html editor.
posted by gum at 2:12 PM on June 2, 2006