Well, fortunately, it is rather simple. Javascript is all about
listening to and binding to events. Right now in the code:
<a id="blink" style="cursor: pointer;" onclick = "new
Effect.Highlight('fun', {duration: 2});">Flash</a>
you are binding to the click event so that when the click event fires
you launch the highlight action.
You can just as easily bind to other events such as the page loading.
Currently, you are binding to the event inline meaning that the
"onclick" is being specified within the button.
I am an advocate of unobtrusive javascript when possible and you can
also bind to events through an unobtrusive method. That would be putting
the following in the application.js file in /public/javascripts:
$('blink).observe('click', function() {
new Effect.Highlight('fun', {duration: 2});
});
and then in the html:
<a id="blink" style="cursor: pointer;">Flash</a>
Using this method, putting it on the page load is as simple as changing
the event being observed:
Event.observe(window, 'load', function() {
new Effect.Highlight('fun', {duration: 2});
});