Picture hover linked to menu link hover in jQuery

Picture hover linked to menu link hover in jQuery

I have the following code on a site, but it doesn't work yet. I think I am close, but the classes of the <a>links are not getting the Active state when hover. It is the meaning that the hover over <picture> gives the corresponding hover over the name link and vice versa.

Can anybody help me out, please?

Thanks in advance!

  1. <script type="text/javascript" src="jquery-1.6.1.min.js"></script>

    <style>
    a.MedewerkerPicture Active   {
        color: red;
    }
    a.MedewerkerName Active   {
        color: red;
    }

    </style>

    <script>

    (function($) {
        $.fn.Medewerker = function(options) {
           
            options = $.extend( {
                       
                PictureIndentifier: 'MedewerkerPicture',
                NameIndentifier: 'MedewerkerName',
               
                core : {
                    Pictures: new Array(),
                    Names: new Array()
                }   
               
            }, options );
           
            init();
               
                options.core.Pictures = $(document).find('.' + options.PictureIndentifier );
                options.core.Names = $(document).find('.' + options.NameIndentifier );
               
                create();
               
            };
           
           
           
            function create() {
               
                // Create hovers for pictures
               
                $.each( options.core.Pictures, function(){
                    var _ID = this.id.substr( options.PictureIndentifier.length );
                    $(this).mouseenter(function(){
                        mouseEnter( _ID );
                    }).mouseleave(function(){
                        mouseLeave( _ID );
                    });
                });
               
                // Create hovers for names
               
                $.each( options.core.Names, function(){
                    var _ID = this.id.substr( options.NameIndentifier.length );
                    $(this).mouseenter(function(){
                        mouseEnter( _ID );
                    }).mouseleave(function(){
                        mouseLeave( _ID );
                    });
                });
               
            };
           
            function mouseEnter( ID ){
               
                // Show item with ID ' + ID )
               
                var Name = $('#' + options.NameIndentifier  + ID );
                var Picture = $('#' + options.PictureIndentifier  + ID );
               
                if ( Name && Picture ) {
                    $(Name).addClass( 'Active' );
                    $(Picture).addClass( 'Active' );
                }
            };
           
            function mouseLeave( ID ){
                // Hide item with ID ' + ID )
               
                var Name = $('#' + options.NameIndentifier  + ID );
                var Picture = $('#' + options.PictureIndentifier  + ID );
               
                if ( Name && Picture ) {
                    $(Name).removeClass( 'Active' );
                    $(Picture).removeClass( 'Active' );
                }
            };
           
    })

    </script>


    </head>

    <body>

    <a href="#" class="MedewerkerPicture" id="MedewerkerPicture1">picture 1</a>
    <a href="#" class="MedewerkerPicture" id="MedewerkerPicture2">picture 2</a>

    <br/><br/><br/>
    <li><a href="#" class="MedewerkerName" id="MedewerkerName1">name 1</a></li>
    <li><a href="#" class="MedewerkerName" id="MedewerkerName2">name 2</a></li>


    </body>
    </html>