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
freshwaterwestAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

freshwaterwestAuthor Commented:
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
hieloCommented:
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'));
}
Price Your IT Services for Profit

Managed service contracts are great - when they're making you money. Yes, you’re getting paid monthly, but is it actually profitable? Learn to calculate your hourly overhead burden so you can master your IT services pricing strategy.

freshwaterwestAuthor Commented:
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" />
hieloCommented:
Save the code as Hielo.html and test it.
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" src="http://wiki.script.aculo.us/javascripts/global.js"></script>
<script type="text/javascript" src="http://wiki.script.aculo.us/javascripts/prototype.js"></script>
<script type="text/javascript" src="http://wiki.script.aculo.us/javascripts/scriptaculous.js"></script>
<script type="text/javascript" src="http://wiki.script.aculo.us/javascripts/effects.js"></script>
</head>
<body>
<script type="text/javascript">
window.onload = begin;
 
function begin()
{
new Effect.Appear(document.getElementById('pageimage'), { duration: 3.0 });
 
}
 
</script>
</head>
 
<body>
<div id="container"><img id="pageimage" style="display:none;" src="http://emiliewood.com/photos/june2005/7-june-05-flower.jpg" alt="About us" width="800" height="170" />
 
</body>
</html>

Open in new window

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
oleosjoCommented:
You might try JQuery, instead of prototype. www.jquery.com

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

Open in new window

freshwaterwestAuthor Commented:
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?
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.