freshwaterwest
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
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
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"></scri pt>
<script type="text/javascript" src="javascript/effects.js "></script >
<script type="text/javascript" src="javascript/accordion. js"></scri pt>
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
<script type="text/javascript" src="javascript/prototype.
<script type="text/javascript" src="javascript/effects.js
<script type="text/javascript" src="javascript/accordion.
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.get ElementByI d('thePict ureId'));
}
window.onload = begin;
You will also need to define your function:
function begin()
{
new Effect.Appear(document.get
}
ASKER
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" />
<script type="text/javascript">
window.onload = begin;
function begin()
{
new Effect.Appear('pageimage',
</script>
</head>
<body>
<div id="container"><img id="pageimage" style="display:none;" src="images/about_back.jpg
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
You might try JQuery, instead of prototype. www.jquery.com
Then it would be very simple:
Then it would be very simple:
$('#element').fadeIn();
ASKER
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?
probably smaller code too perhaps?
http://www.malsup.com/jquery/cycle/
http://cssbeauty.com/skillshare/discussion/1593/jquery-fade-in-on-mouse-over/