image-hover

I would like to ad this to my site
http://www.marijkeaerden.com/flash_content/flash_content.html
how can I do this. Someone said CSS, but I am not familiar with that. Any help.
Thanks
Raymond


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

Someone said CSS

Yes that was Tim and he showed an example of how to achieve it with CSS (Cascading Style Sheets) http://www.freewayactions.com/test/css-image-hover/

On your linked page it is done entirely within Flash - no CSS there - but as you are probably aware Flash is not Search Engine friendly so if you want meaningful results with Google then Flash is not the way to go.

Have a look in the FW manual about CSS (styling) and with Tim’s example in front of you you should get a good idea of what is going on.

And post some more questions here when you are ready.

David


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

David

This interests me but I remain baffled. I downloaded Tim’s file and noticed the styles img and img:hover in the styles palette. I also saw the code tucked between the two tags when I view page source. I could change the photos and keep it working. I then opened up a new FR document, imported the styles and made it work there too. But how do I switch it off? Every image I import to any page in any folder is now performing the same trick? Clicking on no style does not do it.

Suplementary question. Clicking on the style img or img.hover in the styles palette tells me this can only be applied to text. (and when I select text img says it can not be applied to text!). So if they are selectable why are they there?

Best wishes Richard


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

These are Tag styles which means that any item that has the Tag img or img:hover will receive the style

It does mean that every image will get the style whether you like it or not. Unless you bin the style or change it to be more specific. (Not sure about how to do that)

David


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

Hi Richard,
In retrospect I can see how that example Freeway file (http://www.freewayactions.com/test/css-image-hover/
) would generate more questions than answers. Unfortunately when I put
it together I didn’t have time to really do the subject justice or
even explain how the thing really worked. Apologies for that.

I’ve taken the concept and expanded it out into an action so you can
apply the fading rollovers through the actions interface and without
having to think about the code.
Here’s the download link for the action and sample Freeway 5 Pro file;
http://www.freewayactions.com/test/css-transparency-rollover/

The transparency should work in IE 6+, Firefox 2+, Safari 1+, and
Opera 9+. I’ve also added in Webkit transitions (works in Konqueror,
Safari, Google Chrome etc) so that the images fade back (or rise from
a faded state) gracefully over a given time. Other browsers that don’t
support these transitions will simply ‘snap’ between the two image
states.
Both the HTML and CSS the action generates fully validate as well.

Give the action a spin Richard and let me know how you get on with it.
I’ve a few more things planned for it and once done I’ll post it
somewhere a bit more permanent.
Regards,
Tim.

FreewayActions.com - Freeware and shareware actions for Freeway
Express & Pro.

Protect your mailto links from being harvested by spambots with Anti
Spam.
Only available at FreewayActions.com

http://www.freewayactions.com


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

Good morning Tim . That’s really neat and works very well. I have only taken it for a brief spin but can see possibilities. I also see they continue to work with overlapping images/text. And I note they will happily accept links too. Also added a transition FX and that worked too. (Is all this wise ?)

The fade that comes with Webkit transition is a lovely elegant touch - is this effect going to roll out eventually accross all browsers?

It appears that your London/Oxford commute at least gives you good thinking time. Many thanks

Richard


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

Hi Richard,
Thanks for the feedback. I’ve yet to stack the action up against too
many others so it’s great a that you are testing it with other
actions. Let me know if find anything that doesn’t work as you expected.
Webkit’s transitions are very cool and allow us to be a bit more
subtle when changing states like this. Admittedly the transitions only
work in Webkit browsers (Safari, Chrome, Konqueror etc) but I think
it’s worth the few extra bytes of code to add this level of polish to
the rollover. I doubt you’ll see any existing browsers switch to
Webkit overnight but you may see new browsers come on board that use
the framework.
The action is very similar to the CSS3 Rollovers one I wrote recently (http://www.freewayactions.com/test/css3-rollovers/
) and the two actions may merge at some point in the future.
The commute can be a bit of long haul at times but, as you say, it
does give me time to think through things and explore ideas without
the temptation of jumping in and just getting started. I’ve often
labored over coding issues and stared at the screen waiting for an
answer to jump out at me only to have the answer come to me when I’m
far away from a computer and I’m commuting.
It’s good thinking time.
All the best,
Tim.

On 6 Nov 2009, at 09:26, Richard Lowther wrote:

Good morning Tim . That’s really neat and works very well. I have
only taken it for a brief spin but can see possibilities. I also
see they continue to work with overlapping images/text. And I note
they will happily accept links too. Also added a transition FX and
that worked too. (Is all this wise ?)

The fade that comes with Webkit transition is a lovely elegant touch

  • is this effect going to roll out eventually accross all browsers?

It appears that your London/Oxford commute at least gives you good
thinking time.

FreewayActions.com - Freeware and shareware actions for Freeway
Express & Pro.

Protect your mailto links from being harvested by spambots with Anti
Spam.
Only available at FreewayActions.com

http://www.freewayactions.com


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

Wow, that action really simplifies things. I’ve been working on something like this, but with Target/Show Hide Layer. Your action is a much better way to get it done.
Big ups Tim!


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