Adding two rollover images to pausing javascript code

Hi i have two images which are part of a rollover button that i want to have paused until the intro animation finishes. I have the javascript code but the rollover images are specified in the css. I just have the id to them in the html. I was wondering if anyone knew how to include the rollover files with the pausing javascript code. the files are profile.gif and profileover.gif. I tried to add the files to the preload part of the javascript but that didn’t work. The website is www.creationindex.com/indextest.html thank you

A good option is to delay setting up the rollover until after the animation finishes.

how do you delay the rollover?

By supplying the intro animation with a callback, so that at the end of the animation it can run that callback function, from where you will setup what needs to be done afterwards.

this is all i can think of to use the callback. I’ve never used jquery before. It displays but it’s all messed up. if you want you can see what it did at www.creationindex.com/indextest5.html i see that it will clear the beginning animation then i can add everything else.

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN”
http://www.w3.org/TR/html4/strict.dtd”>
<html lang=“en”>
<head>
<base href=“http://www.creationindex.com/”>
<meta http-equiv=“Content-Type” content=“text/html; charset=iso-8859-1”>
<meta name=“language” content=“english”>
<meta http-equiv=“Content-Style-Type” content=“text/css”>

<title>Creation Index</title>
<script type=“text/javascript” src=“jquery.js”></script>

<script type=“text/javascript”>

$(document).ready(function(){
$(“p”).hide(1000,function(){

</script>

<style type=“text/css”>
html,body {

margin:0;
background-color:#000;
}

images img {
width:100%;

}
images #lettering,images #lettering1 {
width:80%; /* adjust this value to suit your requirements /
left:10%; /
this value=(100%-width value)/2 /
}
images #alien,images #alien1 {
width:12.8%; /
adjust this value to suit your requirements /
left:50%; /
this value=(100%-width value)/2 /
}
images #equalizer,images #equalizer1 {
width:60%; /
adjust this value to suit your requirements /
left:21%; /
this value=(100%-width value)/2 */
}

images img {
position: absolute;
top: 0;
left: 0;
}
.hide {
display:none;
}
#myRollover1 {
background-image:url(profile.gif);
width:151px;
height:151px;
display:block;

}

#myRollover1:hover {
background-image:url(profileover.gif);
}
</style>

</head>
<body>
<img style=“height:100%” src=“logospining.gif” alt=“”>
<div id=“images”>
<img id=“backgroundgreen” style=“height:100%” src=“backgroundgreen.gif” alt=“”>
<img id=“lineback” style=“height:100%” src=“lineback.gif” alt=“”>
<img id=“lettering” style=“height:100%” src=“lettering.gif” alt=“”>
<img id=“alien” style=“height:100%” src=“alien.gif” alt=“”>
<img id=“equalizer” style=“height:100%” src=“equalizer.gif” alt=“”>
<img id=“buttonbar” style=“height:100%” src=“buttonbar.gif” alt=“”>
<a href=“index.html” id=“myrollover1”>
</a>
</div>

</body>
</html>

I’m not seeing any animation code, and it seems that you’re missing some scripting code from what you posted above.

well i have this code too this was working but i couldn’t get a rollover button to work with it.

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN”
http://www.w3.org/TR/html4/strict.dtd”>
<html lang=“en”>
<head>
<base href=“http://www.creationindex.com/”>
<meta http-equiv=“Content-Type” content=“text/html; charset=iso-8859-1”>
<meta name=“language” content=“english”>
<meta http-equiv=“Content-Style-Type” content=“text/css”>

<title>Creation Index</title>

<script type=“text/javascript”>

var preloads=;
function preload(){
for(var c=0;c< arguments.length;c++) {
preloads[preloads.length]=new Image();
preloads[preloads.length-1].src=arguments[c];
}
}
preload(‘logospining.gif’,‘backgroundgreen.gif’,‘lineback.gif’,‘lettering.gif’,‘alien.gif’,‘equalizer.gif’,‘buttonbar.gif’);

function init(){

var delay=4950;

/*********************************************************************************************/

setTimeout(
function(){
document.getElementById(‘backgroundgreen’).className=‘’;
document.getElementById(‘lineback’).className=‘’;
document.getElementById(‘lettering’).className=‘’;
document.getElementById(‘alien’).className=‘’;
document.getElementById(‘equalizer’).className=‘’;
document.getElementById(‘buttonbar’).className=‘’;

},delay
);
}
window.addEventListener?
window.addEventListener(‘load’,init,false):
window.attachEvent(‘onload’,init);
</script>

<style type=“text/css”>
html,body {

margin:0;
background-color:#000;

}

images img {
width:100%;

}
images #lettering,images #lettering1 {
width:80%; /* adjust this value to suit your requirements /
left:10%; /
this value=(100%-width value)/2 /
}
images #alien,images #alien1 {
width:12.8%; /
adjust this value to suit your requirements /
left:50%; /
this value=(100%-width value)/2 /
}
images #equalizer,images #equalizer1 {
width:60%; /
adjust this value to suit your requirements /
left:21%; /
this value=(100%-width value)/2 */
}

images img {
position: absolute;
top: 0;
left: 0;
}
.hide {
display:none;
}
#myRollover1 {
background-image:url(profile.gif);
width:151px;
height:151px;
display:block;

}

#myRollover1:hover {
background-image:url(profileover.gif);
}
</style>

</head>
<body>

<div id=“images”>
<img id=“backgroundgreen” class=“hide” style=“height:100%” src=“backgroundgreen.gif” alt=“”>
<img style=“height:100%” src=“logospining.gif” alt=“”>
<img id=“lineback” class=“hide” style=“height:100%” src=“lineback.gif” alt=“”>
<img id=“lettering” class=“hide” style=“height:100%” src=“lettering.gif” alt=“”>
<img id=“alien” class=“hide” style=“height:100%” src=“alien.gif” alt=“”>
<img id=“equalizer” class=“hide” style=“height:100%” src=“equalizer.gif” alt=“”>
<img id=“buttonbar” class=“hide” style=“height:100%” src=“buttonbar.gif” alt=“”>

<noscript>
<div>
<img id=“backgroundgreen1” style=“height:100%” src=“backgroundgreen.gif” alt=“”>
<img id=“lineback1” style=“height:100%” src=“lineback.gif” alt=“”>
<img id=“lettering1” style=“height:100%” src=“lettering.gif” alt=“”>
<img id=“alien1” style=“height:100%” src=“alien.gif” alt=“”>
<img id=“equalizer1” style=“height:100%” src=“equalizer.gif” alt=“”>
<img id=“buttonbar1” style=“height:100%” src=“buttonbar.gif” alt=“”>

</div>
</noscript>

</div>
<a href=“index.html” id=“myRollover1”>
</a>

</body>
</html>

the intro animation is logospining.gif and the rollover button files are profile.gif and profileover.gif. I tried to put in profile.gif and profileover.gif in the preload part of the javascript but that didn’t work.

i got it fixed i added this code:

<a href=“index.html”
><img src=“profile.gif” class=“hide” border=“0”
onmouseover=“this.src=‘profileani.gif’;” onmouseout=“this.src=‘profile.gif’;”
></a>

and added an id.