[Pro] Image maps and rollovers with tables?

Not sure if I’m going about this the right way, would love some advice… I want to make a picture which is 16 squares (4 by 4), like a chess board, and each square has a picture of a person in it, which is b/w, when the mouse hovers over it it goes colour and clicking takes you to another page.
I’m having trouble, thought making a table would be the best way, and then drop in rollovers of x2 images each. Unfortunately there are ugly gaps between the images.
Do I…
perservere with the table, crop and size all my images in PShop so they all identical sizes
or do I make one big image in PShop with all the pics and then make an imagemap in Freeway (but can I do 16 rollovers on an imagemap?). I’ve not tried doing an imagemap but would be good to know if that’s not a good idea before attempting it…
or best to place rollovers simply where I want them on page? Head’s spinning…


tutorials mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Something like this http://www.deltadzine.net/shader2.html

David


tutorials mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

That’s exactly the effect I wanted (but planning to use different pics for each square :slight_smile:
How did you do yours?
Ta

Heather


tutorials mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

use different pics for each square

Just done that way for speed!

This is constructed using 2 images the same in same sized boxes aligned horizontally and vertically. One image (the top one) has the Photo Magic Action applied to it to adjust the colours etc to greyscale. The images are then grouped and the Rollover action applied to the group and parameters set so that the colour version shows on Rollover.

Optionally a Hyperlink can be applied to the group to link to another page,

For ease of construction you could start with one group and then Duplicate (Item>Duplicate) the correct number of times with the offset dimensions of the starting image ie if the image is 120px x 130px then your offset on duplication would be Horizontal 120 Vertical 130.

If you do it this way then you can then import the different pics into the different boxes after creating them all.

If you want the sample file then just drop me a line at info(at)deltadzine.com - beware of the BoxTrapper Spam trap.

David


tutorials mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

And for anybody that wants a sample FW Pro 5 file to pull apart there is a download link at http://www.deltadzine.net/shader2.html

D


tutorials mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Wow - thanks for the help!
The plan is to have 16 different people pics and each picture will have a hyperlink to the page about that person. Will look at the photomagic tool as well - most of the greyscale I bumped up using Channel Mixer in Photoshop and not sure if that’s available in Freeway.
Phew, thank goodness I can avoid a clunky table…
Hoping to get the site up today, will put a link to this when I do
H


tutorials mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

If you use the Photo Magic action within FW it will mean that you only need 1 pic per person (preferably a psd for quality) and it will save you a LOT of time tooing and froing to PS

D


tutorials mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Hi I didn’t realise I was in for such a treat with the Freeway magic tools and just done the b/w images in a fraction of the time.
Unfortunately while experimenting I’ve aligned 2 images incorrectly and they’re sitting on top of each other and I can’t separate them and Freeway won’t let me ‘undo’… I’ve found this a problem a number of times but am sure I’m missing something obvious here…
H


tutorials mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

and I can’t separate them

Are you still struggling with this.

In the site pane (LHS of screen) you can change from ‘site’ view to ‘page’ view and if you have named your items correctly you will be able to select the one(s), by clicking on them in the site pane, that are causing you problems.


David


tutorials mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Hi

I managed to separate them, not sure how, but I’m still struggling.

I’ve sorted them out so they all align up. Each ‘pair’ is ‘grouped’ and the one of each image is greyscaled.

I’m now trying to put the rollover action on them but the action panel when I try to apply the rollover is only now showing one image, although in the page panel it’s clear each group has 2 images. Grrr. I’m applying the action to the ‘group’ as well.

I’m doing something else wrong now aren’t I?..

Heather


tutorials mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Hi,
I’ve tried to copy and paste a screen shot of what I’m doing but unfortunately with no success.
H


tutorials mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Dear God, at last. I’ve just played around and found I needed to click combine with children on the group action for all the options to show up.
Fingers crossed nearly there now…!
Ta
Heather


tutorials mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Website up… still work in progress but had to do it in 4 days from start to finish…

www.anacondabellydance.com

and the rollover pic’s on the Who’s Who page. Hope it works!

Thanks for your help, my eyes feel like they’re going to drop out at the moment…

Heather


tutorials mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Well done Heather - its looking good!

But which one is you?

D


tutorials mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Hi
I’m on there, but you’ll have to wait a couple of weeks while I build the links to the individuals :slight_smile:

When I view it in my browser it looks fine but a friend says everything has shifted to the left and there’s loads of blank space on the right. I’m not sure how to fix this, is it a browser thing or a Freeway thing?

H


tutorials mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Your page is left aligned so on a larger window/screen then yes there is space to the right.

You could centre align your page instead. By any chance are you using a MacBook?

Also your page width is 800 which by current standards is a touch on the small size. A lot of folk are basing their pages on a 960px width.

D


tutorials mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Yes, I’m using a Macbook - how did you know?
If I base it on 960px, does that mean anyone with a smaller screen will have to scroll horizontally?
Centre aligning the page sounds like the best start but will that mess up the layout at all?
H


tutorials mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Yes anybody with a smaller screen will have to scroll but the point is that the percentage of people with screens smaller than 1024 wide is pretty slim. I believe less than 6%.

And anyway they will be used to it!

But if you dont want to do that then centre aligning should be fine. You can try it on a page by page basis first of course.

D


tutorials mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Hi
I’ve centre aligned everything for now - but thanks for the tip on the screen size, that would solve a few problems. I can see I need to tidy up a few bits and get the styling consistent as well.
Thanks again, I so appreciate the help :slight_smile:
H


tutorials mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options