Question

I’m using the below code for a rollover effect, seems to be working okay!

What I’m interested in is taking this to the next step in a modular way. What I mean is that rather than stipulate every single possibility, how could I start to produce what I suppose would be a plugin?

Many thanks!

$(document).ready(function() {

    $('#damart_490').hide();
    $('#simply_490').hide();

    $('.damart_link').hover(
        function() {
            $('#damart_490').show('blind',250);
                    },
        function() {
            $('#damart_490').hide('blind',250);
    });

    $('.simply_link').hover(
        function() {
            $('#simply_490').show('blind',250);
                    },
        function() {
            $('#simply_490').hide('blind',250);
    });

});

---

UPDATE:
Sorry if this is very simple but how would I make this into a separate file plugin and reference it? At the moment I’ve got a file called rollover.js with this in…

function hover_link(link, element)
    {
        $(element).hide();

        $(link).hover(
            function() {
                $(element).show('blind',250);
            },
            function() {
                $(element).hide('blind',250);
        });
    }

And this in my page…

<script src="js/rollover.js" type="text/javascript"></script>
<script type="text/javascript">

$(document).ready(function() {

$hover_link('.damart_link', '#damart_490');
$hover_link('.simply_link', '#simply_490');

});

</script>

Am I just missing some syntax?! Thank-you!

Answer 1

The next step would be to reduce repetition by writing a function:

function hover_link(link, element)
{
    $(element).hide();

    $(link).hover(
        function() {
            $(element).show('blind',250);
        },
        function() {
            $(element).hide('blind',250);
    });
}

hover_link('.damart_link', '#damart_490');
hover_link('.simply_link', '#simply_490');