Comments on: Beginner Webdesign Filter: Big Pictures with Linking Parts

Question: Beginner Webdesign Filter: Big Pictures with Linking Parts

BigBrownBear — Thu, 01 Jun 2006 05:33:10 -0800

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.

By: justkevin

justkevin — Thu, 01 Jun 2006 05:40:59 -0800

I think the easiest way would be imagemaps. For something more advanced you could use Ajax, which I believe is what Google Maps uses.

By: Katemonkey

Katemonkey — Thu, 01 Jun 2006 05:48:57 -0800

You could try Frank Manno's CSS Imagemaps, which might be what you're looking for...

By: coolin86

coolin86 — Thu, 01 Jun 2006 05:53:35 -0800

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.

By: Kimberly

Kimberly — Thu, 01 Jun 2006 09:21:53 -0800

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.

By: josh.ev9

josh.ev9 — Thu, 01 Jun 2006 09:51:45 -0800

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.

By: Rhomboid

Rhomboid — Thu, 01 Jun 2006 10:29:51 -0800

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.)

By: psychobum

psychobum — Thu, 01 Jun 2006 10:43:32 -0800

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. :>

By: BigBrownBear

BigBrownBear — Thu, 01 Jun 2006 11:21:35 -0800

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.

By: nev

nev — Thu, 01 Jun 2006 13:05:32 -0800

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'.

By: Biblio

Biblio — Thu, 01 Jun 2006 15:31:14 -0800

I did something like this using an image map (made with the Gimp) and the lightbox js plugin for Wordpress.

By: gum

gum — Fri, 02 Jun 2006 14:12:18 -0800

-- 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.