Hi guys,
I am currently doing a portfolio page similar to the one shown in the link below but have no idea how to create the ‘highlight’ effect when your mouse goes over the pictures.
Any help would be much appreciated,
thanks,
Seb
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Hi Sebastian,
Try the CSS Transparency Rollover Action;
http://www.freewayactions.com/test/css-transparency-rollover/
Regards,
Tim.
On 11 Apr 2011, at 17:29, Sebastian Crewe-Turrell wrote:
I am currently doing a portfolio page similar to the one shown in the link below but have no idea how to create the ‘highlight’ effect when your mouse goes over the pictures.
http://www.nickwildphotography.co.uk/galleries/
Any help would be much appreciated,
FreewayActions.com - Freeware and commercial 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
Simple, with a little JavaScript! Apply the Protaculous Action to your
page. And if you’re copying this layout, do yourself a huge favor and
make all of your target images inline children of a single HTML box.
Draw an HTML box somewhere on your pasteboard, large enough to hold
all of the images. Then cut each of your linked images in turn to the
clipboard, double-click inside your HTML box so the flashing text
cursor appears, and paste. Click once on the now-inline image, and set
its Float attribute to Left. Repeat until all your images are inside
the HTML box (adjust its size to fit) and move that box back into the
page where you want the effect to appear. While you have that box
selected, check out what name it has in the Inspector’s Title field.
Change it to something memorable like images (which I’ll use below).
Now click on the pasteboard somewhere, and look in your Actions
palette. You should see the Protaculous interface there. Set the
Library picker to prototype-packed, and click on the top Function Body
button.
Paste in the following code:
var images = $('images').select('img').invoke('setOpacity',0.6);
images.invoke('observe','mouseover',function(evt){
images.invoke('setOpacity',0.6);
this.setOpacity(1);
});
Things to fiddle with: the number 0.6 is the initial opacity of the
images, you may want to change that (in both places) to suit your
design; the name ‘images’ HAS to match whatever your outer HTML box
is named, including letter case.
Other than that, it’s a pretty easy and self-contained trick.
Oh, you could do this by using a separate Rollover for each image,
with a version of the image that you’ve darkened down using the Photo
Magic Action as one state of the rollover, and another at full-
strength as the mouseover version, but that’s a lot of work (and extra
images) that nobody needs!
Walter
On Apr 11, 2011, at 12:29 PM, Sebastian Crewe-Turrell wrote:
Hi guys,
I am currently doing a portfolio page similar to the one shown in
the link below but have no idea how to create the ‘highlight’ effect
when your mouse goes over the pictures.http://www.nickwildphotography.co.uk/galleries/
Any help would be much appreciated,
thanks,
Seb
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
And here is another method (with example file) http://www.deltadzine.net/shader2.html
This uses the Rollover and Photo Magic actions
David
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
I like these examples, I did the effect using rollovers and two images light and dark I used two images as the lighter image has text added…
I was wondering - Is there a way to make the image change from one to the other ‘fade’ as opposed to quickly change from one to the other - using the Protaculous Action?
http://www.easthalldesign.com/portfoliohomepag.html
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Not using the Rollover Action. The issue is that the Action writes its
code directly into the link tag, rather than using an observer the way
Prototype code is written. If you had used a Prototype rollover, then
you could switch it to add the fading effect very simply, just by
switching the library picker to scriptaculous-paciked and then
changing the setOpacity(1) function to morph({style:‘opacity:1’}) or
something like that. Since the Rollover effect happens directly in the
link tag, the observer doesn’t “hear” the event fire until after the
rollover has already done its thing.
Walter
On Apr 11, 2011, at 1:17 PM, Justin Easthall wrote:
I like these examples, I did the effect using rollovers and two
images light and dark I used two images as the lighter image has
text added…I was wondering - Is there a way to make the image change from one
to the other ‘fade’ as opposed to quickly change from one to the
other - using the Protaculous Action?http://www.easthalldesign.com/portfoliohomepag.html
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
So i can do this but need to remove the rolllover action? That’s fine I can redo as long as it fades from one to the other… Great! Thanks… Can you show how to do this?
CHEERS!
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Thank you very much!
All done and looks great! 
Seb
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options