[Pro] How to make a image rollover in FW7

Oh Tim,

When I said I was having trouble “moving” I did not mean physically moving the overlay or child in FW, I meant when I MOUSE OVER on the webpage, nothing slides (moves). I cannot get the rollover effect at all. I do not even see a rollover action applied to yours or mine.

Can you help?

Thanks,

Barry


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

You appear to be missing the styles that make the overlay transparent and then fade it back into view when rolled over. These are ‘.overlay’ and ‘a:hover .overlay’ in the original example and need copying to your new document.
Regards,
Tim.

On 31 Mar 2015, at 13:03, Hoffkids wrote:

Thanks for the reply. I actually did see that point you made about the child (hope i did it right). I then fixed it and still nothing.

Can you check out this page I made for you with only this one instance trying to duplicate.
It includes a picture of my site pane.

http://hoffkids.com/temp.html

Thanks for letting me know what the heck I am missing.


FreewayActions.com - Freeware and commercial Actions for Freeway Express & Pro - http://www.freewayactions.com


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

Wow I never deal with styles (even though I know that is key to improving with web design).

I am always afraid styles will mess up my entire site across all pages.

Are you able to quickly tell how to apply those .overlay and a:hover.overlay

i never did that.

I did go click on Overlay in my site panel, item, extend and copied that stuff for table.

Thanks,

Barry


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

I added the .overlay

but do not see your
a:hover .overlay

and where it goes


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

Ok Tim,

I did the .overlay style clicked EXTEND and so saw more code to copy. I did that and a little change but still no effect. Probably because I have not added in the

a:hover .overlay

not sure where this goes.

here is the progress.

http://hoffkids.com/temp.html

thanks,

barry


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

i think I got it.

I had to add something in the TAG box!!

seems to work!!

not sure what I did but copy you!

cool!

Thanks,

Barry


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

getting closer.

My only problem now is that my OVERLAY is showing on page load and when I mouse over it shows my icon underneath. It seems reversed.

I need the icon showing first then when mouse over the overlay shows (like yours)

Barry


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

Make sure that the ‘overlay’ style has an opacity of zero and that the ‘a:hover .overlay’ style has an opacity of one and you should get the same result as the demo file. What you are doing here is setting the transparency (opacity) of the overlay to 0 (completely clear) so that the door icon shows through. When the icon is moused over (the hover state) the opacity of the overlay is set to 1 (100% solid) which will cover the door icon and display your text - hopefully.
Regards,
Tim.

On 31 Mar 2015, at 17:44, Hoffkids wrote:

I need the icon showing first then when mouse over the overlay shows (like yours)


FreewayStyle.com - Freeway templates and parts to download, use and explore - http://www.freewaystyle.com


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

Tim,

it is not working out for me.
It has to do with styles. I do not understand them.

I only have 1 style applied to overlay and it is .overlay
How do I apply a second style and keep the first?

I thought it had something to do with tags but no.

Can you make this real simple?

Barry


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

the problem is I do not see the
‘a:hover .overlay’ in the original example

to copy so I am guessing


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

How do I apply a second style and keep the first?

The style a:hover .overlay really means a Link that is hovered over that has the class of .overlay will have an opacity of 1

You do not apply it to anything - it just has to exist in your document as a tag style.

Any item that has a link attached to it and has the class of overlay will be affected on hover.

It is in the styles section of Tim’s example

D


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

Thanks Dave,

this whole thing is almost worth giving up as these styles “wet” every page of my entire site everytime and is taking me forever to play and get this right.

Seems not worth it maybe.


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

You should really work this out on a separate document until you are happy with the outcome.

As you have discovered changes to styles affect every page - simply because styles are set on a site wide basis.

Inevitably changing a style in one instance affects the whole site and it can be disconcerting watching your whole site upload every time because of a simple style change.

One of the reasons that we recommend setting up your base styles very early in the document build process.

Seems not worth it

Styles lie at the core of a good site and once you understand what they are all about it will make your whole construction process so much easier.

As a user you are not typical - you are not building sites for others so it seems more of a chore.

D


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

you pretty much summed it up!

I will break from this and revisit tomorrow as vacation is here.

Thanks Dave.


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

Tim, I actually got it to work with the help from you and Dave. Looks pretty good and may need some tweaks.

But before I go forward with a lot of exciting work, I’d like to ask.

I noticed that for my 2 samples I made, when I click on the icon and it brings me to the new page, when I hit the back arrow and COME back to the 2 icons I made, sometimes the OVERLAY (with the text) is showing and not the icon underneath at first, then when I move my mouse it “fixes itself.”

Do you have any idea why? I will have 24 of these so this could be really messy.

In other words, if people were navigating around and they come back to the page with them then instead of seeing the 24 navigation icons it would be some icons, some overlays, etc.

here is my work in progress. They are beneath the article (just ignore that).

http://hoffkids.com/temp.html

Thanks for telling me if you see this and what you think,

Barry


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

Well that’s how the back button in your browser works. If you reload the page with a link to the page (temp.html) then the page will load using the files on the server. if, however, you hit the back button and return to a page you’ve just come from the browser pulls the page from memory and shows you the page you left - rollovers in place and everything. You could try using JavaScript to ‘clean’ a page you thought has been returned to like this but personally I think it would be more trouble than it is worth.
Regards,
Tim.

On 1 Apr 2015, at 06:50, Hoffkids wrote:

In other words, if people were navigating around and they come back to the page with them then instead of seeing the 24 navigation icons it would be some icons, some overlays, etc.


FreewayStyle.com - Freeway templates and parts to download, use and explore - http://www.freewaystyle.com


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

Tim or Dave,

tiny question… I followed TIm’s words:

“Make sure that the ‘overlay’ style has an opacity of zero and that the ‘a:hover .overlay’ style has an opacity of one and you should get the same result as the demo file. What you are doing here is setting the transparency (opacity) of the overlay to 0 (completely clear) so that the door icon shows through. When the icon is moused over (the hover state) the opacity of the overlay is set to 1 (100% solid) which will cover the door icon and display your text”

but in Tim’s example, his Overlay allows to see through a little bit to the original graphic underneah. If everything has ‘0’ or ‘1’ opacity, which setting do I adjust to let it bleed thru a little behind my overlay?

Barry


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

i would think it would be the 0.75 of the extend attribute applied to the table cell

I copied tim’s

background-color:rgba(0,0,0,0.75)

but mine is still solid black with yellow text…

see my 2 work in progress below all other icons…


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

The layers below the captions (overlay, overlay1, overlay2 etc) all have a solid black background which obscures the underlying image. Remove this background colour and you should get the effect you are looking for.
Regards,
Tim.

On 2 Apr 2015, at 06:46, Hoffkids wrote:

but mine is still solid black with yellow text…


FreewayStyle.com - Freeway templates and parts to download, use and explore - http://www.freewaystyle.com


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

Well Tom, that did it, it seems so obvious when you put it that way.
I should have seen that.
last one.
when I mouse over it fades transition at a nice kind of slow pace (maybe that is the .4 thing) that is good.

When I move my mouse OFF, it is more of a sudden instant transition back to the icon.
How can I slow the 2nd fade like your example? WHich number is the 2nd one?

thanks,

Barry


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