[Pro] mouse over colour background change

Can anybody offer advice

I have always tried to do this but never been able to

Looking at the links the when you roll over the backcolour changes smoothly can anybody shed some light in how to do this as its lovely and simple

stu


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

Hi Stuart
this is using JQuery to manipulate the background colour depending on which link you rollover

So each link has an individual title associated with the actual link and when you rollover that link JQuery is triggered to change the background depending on the title of the link…

If you look at the source code you can see how its done. but if you have any problems then let me know

max


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

Hi Stu,
This page uses jQuery to blend the page colour when the user rolls over the links. You should be able to replicate the effect by adding the following code to the head of the page (Page > HTML Markup > Before End Head);

<script type="text/javascript" charset="utf-8" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
	<script type="text/javascript" charset="utf-8" src="public/js/jquery-color.min.js"></script>
	<script type="text/javascript" charset="utf-8">		
		$(document).ready(function() {
			$('a.product').hover(function() {
				var color = '#000';
				var title = $(this).attr('title');
				if(title == 'Houdini') color = '#a856a9';
				if(title == 'Episodes') color = '#fa9527';
				if(title == "AppStoreRank") color = '#8db4d8';
				if(title == 'SpriteRight') color = '#72c459';
				$('body').stop().animate({ backgroundColor: $.Color(color) }, 500);
			}, function() {
				$('body').stop().animate({ backgroundColor: $.Color('#e8524e') }, 500);
			});
		});
	</script>

You can change the background colours (a856a9, fa9527, 8db4d8 etc) and the title names here too. Then you just need to add titles to your links (Houdini, Episodes, AppStoreRank etc or whatever you called them) using the title field in the Edit > Hyperlink dialog.

If you want to be a bit more retro you can try the same sort of effect (without the transitions) using this old Action I wrote many moons ago;
http://www.freewayactions.com/product.php?id=012

Regards,
Tim.

On 17 Jan 2012, at 21:48, stuart wrote:

Looking at the links the when you roll over the backcolour changes smoothly can anybody shed some light in how to do this as its lovely and simple


FreewayActions.com - Freeware and commercial Actions for Freeway Express & Pro - http://www.freewayactions.com
FreewayStyle.com - Free 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