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
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.