Filmtipps.at Mousehover5000

ftat-mousehover5k.jquery.js

/**
 *
 * Filmtipps.at Mouseover5000(tm)
 *
 * Author: Peter Geil
 * Created: 15.07.11
 * License: to kill
 * Description: When hovering a movie entry, the corresponding film poster will
 * be highlighted and vice versa. The code is written for the document/markup model
 * Filmtipps.at is using right now  (15.07.11)and might break when they change it. My intention
 * was to write a simple script that the Filmtipps.at-Webmaster can simply paste into
 * his template file without having to change something on the codebase.
 */

jQuery.mousehover5k = function(idLeft, idRight) {
    var containers = $('#'+idLeft+', #'+idRight)
      , left = { idx: {} }
      , right = { idx: {} }
      , active = null
      , onHover = function(evt) {
            var where = (evt.liveFired === left.node) ? right : left;
            if (null !== active) active.removeClass('hover');
            active = where.idx[this.getAttribute('href')] || null;
            if (null !== active) active.addClass('hover');
        };

    if (2 !== containers.length) return;

    left.node = containers[0];
    right.node = containers[1];

    // Index entries from left+right side
    for (var le=left.idx, a=$('a', left.node), b=0, c=a.length; b < c; b++)
        le[a[b].getAttribute('href')] = $(a[b]);
    for (var ri=right.idx, d=$('a', right.node), e=0, f=d.length; e < f; e++)
        ri[d[e].getAttribute('href')] = $(d[e]);

    containers
        .delegate('a', 'mouseenter', onHover)
        .delegate('a', 'mouseleave', onHover);
};

$(function() {
    // Some eyecandy
    $('head').append('<style type="text/css">'+
        '.row_image a img {'+
            '-moz-transition-duration:200ms; '+
            '-moz-transition-timing-function:easein; '+
            '-webkit-transition-duration:200ms; '+
            '-webkit-transition-timing-function:easein; '+
            '-o-transition-duration:200ms; '+
            '-o-transition-timing-function:easein; '+
            'transition-duration:200ms; '+
            'transition-timing-function:easein; }'+
        '#archiv_left a.hover { '+
            'background-color: #000000 !important;'+
            'color: #FFFFFF  !important; }'+
        '.row_image a.hover img { '+
            '-moz-transform:scale(1.2);'+
            '-webkit-transform:scale(1.2);'+
            '-o-transform:scale(1.2);'+
            'transform:scale(1.2);'+
            '-moz-box-shadow:0 0 25px 8px #000000;'+
            '-webkit-box-shadow:0 0 25px 8px #000000;'+
            '-o-box-shadow:0 0 25px 8px #000000;'+
            'box-shadow:0 0 25px 8px #000000; '+
            'border:2px solid #000; }'+
    '</style>');

    // Start Mousehover5000
    $.mousehover5k('archiv_left', 'archiv_right');
});

Just copy'n'paste it into the Firebug/Webkit-Devtools console and execute.