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.