Link to home
Start Free TrialLog in
Avatar of freshwaterwest
freshwaterwestFlag for United Kingdom of Great Britain and Northern Ireland

asked on

Fade-in image on page load using scriptaculous / prototype

I'm trying to find how to simply fade-in or slide-in an image on page load using scriptaculous/prototype (avoid using flash for such a simple requirement)-

I'm sure there is probably a very simple solution but unfortunately my lack of javascript knowledge is preventing me from sussing it out.

I have the javascripts loaded correctly as I also have a vertical accordion menu which is working fine.

Tried using a couple of examples online (body onload and also a head script) to affect an id either on a div or an image (with a display:none; style added directly to the div/image), but can't get any to work.

thanks
Avatar of hielo
hielo
Flag of Wallis and Futuna image

Avatar of freshwaterwest

ASKER

sorry, think I' might have misled you by adding to jscript section - I already have prototype scriptaculous effects etc. loaded - so would prefer to utilise the effects within these..

<script type="text/javascript" src="javascript/prototype.js"></script>
<script type="text/javascript" src="javascript/effects.js"></script>
<script type="text/javascript" src="javascript/accordion.js"></script>

I'm simply looking to have an image fade-in or slide-down when the page first loads

i.e. Effect.Appear - just not sure how to use it on page load

thanks
You need to "schedule" a function to be executed upon page load:
window.onload = begin;

You will also need to define your function:
function begin()
{
new Effect.Appear(document.getElementById('thePictureId'));
}
This is what I have tried based on your comment and previous attempts, not sure what I need to do here to make it work:


<script type="text/javascript">
window.onload = begin;

function begin()
{
new Effect.Appear('pageimage', { duration: 3.0 });}

</script>
</head>

<body>
<div id="container"><img id="pageimage" style="display:none;" src="images/about_back.jpg" alt="About us" width="800" height="170" />
ASKER CERTIFIED SOLUTION
Avatar of hielo
hielo
Flag of Wallis and Futuna image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of oleosjo
oleosjo

You might try JQuery, instead of prototype. www.jquery.com

Then it would be very simple:
$('#element').fadeIn();

Open in new window

thanks - I've used jQuery once before for a menu so I'll give that a try seems very simple..

probably smaller code too perhaps?