Tutorials

21 replies to this thread. Most Recent

Heather Hughes

4 Apr 2010, 9:25 pm

[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

quote

DeltaDave

4 Apr 2010, 10:24 pm

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

David


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

quote

Glasgow, Scotland

iMac 27 Snow and Pro 5.6.3

Heather Hughes

5 Apr 2010, 6:58 am

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

Heather


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

quote

DeltaDave

5 Apr 2010, 9:37 am

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

quote

Glasgow, Scotland

iMac 27 Snow and Pro 5.6.3

DeltaDave

5 Apr 2010, 10:08 am

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

quote

Glasgow, Scotland

iMac 27 Snow and Pro 5.6.3

Heather Hughes

5 Apr 2010, 10:24 am

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

quote

DeltaDave

5 Apr 2010, 10:38 am

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

quote

Glasgow, Scotland

iMac 27 Snow and Pro 5.6.3

Heather Hughes

5 Apr 2010, 11:18 am

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

quote

DeltaDave

5 Apr 2010, 2:47 pm

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.

testpic testpic

David


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

quote

Glasgow, Scotland

iMac 27 Snow and Pro 5.6.3

Heather Hughes

5 Apr 2010, 2:57 pm

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

quote

Heather Hughes

5 Apr 2010, 3:06 pm

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

quote

Heather Hughes

5 Apr 2010, 3:12 pm

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

quote

Heather Hughes

5 Apr 2010, 7:43 pm

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

quote

DeltaDave

5 Apr 2010, 8:13 pm

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

quote

Glasgow, Scotland

iMac 27 Snow and Pro 5.6.3

Heather Hughes

5 Apr 2010, 9:28 pm

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

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

quote

DeltaDave

5 Apr 2010, 10:10 pm

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

quote

Glasgow, Scotland

iMac 27 Snow and Pro 5.6.3

Heather Hughes

5 Apr 2010, 10:29 pm

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

quote

DeltaDave

5 Apr 2010, 10:51 pm

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

quote

Glasgow, Scotland

iMac 27 Snow and Pro 5.6.3

Heather Hughes

6 Apr 2010, 12:12 pm

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 :-) H


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

quote

Paul Everett

28 May 2010, 5:11 am

Heather, wow you are the ‘Web’ Material Girl. Nice


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

quote

Heather Hughes

5 Jun 2010, 7:47 am

Ah, you went back to check! Looks like I’ll be changing the pics soon, we had feedback that they didn’t really reflect the type of dance we normally do, which was right :-)


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

quote

Back to Top

richie hume

15 Jul 2010, 4:40 pm

hi folks, I need some help with slave triggers and image maps please! I’m trying to create a one page site with a tabbed area, here it is http://www.vmobilehair.com/index2.html but I want to make the tabs rollover grey/pink and then stay pink if that tabs open. I downloaded this tutorial http://www.softpress.com/products/greatfeatures/tabs/ but the second option I need to follow has no detailed instructions and I’ve tried taking the components apart but not succeeding. if anyone can help or point me in the direction of proper instructions I’d be very grateful. cheers richie, glasgow


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

quote

Richie