Hi, how do you add a CSS rollover button to my javascript code? My site delays the page from loading until the intro animation finishes. The rollover button is specified as id myrollover1. The rollover filenames are profile.gif and profileover.gif. I have tried to add the filenames to the preload part of the javascript but didn't work.
My code is:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
<html lang="en">
<head>
<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','l ineback.gif','lettering.gif','alien.gif','equalize r.gif','buttonbar.gif');
function init(){
var delay=4950;
setTimeout(
function(){
document.getElementById('backgroundgreen').classNa me='';
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>
thank you
Del.icio.us
Digg
Google
Spurl
Blink
Furl
Simpy
Y! MyWeb
Linear Mode
