adding rollover button to javascript code

**Repatilian** · 12-02-2011, 08:02 AM

Hi, how do you add a rollover button to my javascript code? My javascript delays the page from loading until the intro animation finishes. The rollover button filenames are profile.gif and profileover.gif. I have tried to add the filenames to the preload part of the javascript but that didn't work. The rollover button is specified in the CSS under id myrollover1. My website is www.creationindex.com/indextest.html My code is:

Code:

<!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>

</body>
</html>

Thank you.

**Repatilian** · 12-02-2011, 08:16 AM

i want the rollover button to be in CSS.

**vwphillips** · 12-02-2011, 10:10 AM

there is no element with an id of myRollover1

but

Code:

<!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('http://www.creationindex.com/logospining.gif','http://www.creationindex.com/backgroundgreen.gif','http://www.creationindex.com/lineback.gif','http://www.creationindex.com/lettering.gif','http://www.creationindex.com/alien.gif','http://www.creationindex.com/equalizer.gif','http://www.creationindex.com/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 {
 position:absolute;
 top:300px;
background-image:url(http://www.creationindex.com/profile.gif);
width:151px;
height:151px;
display:block;
border:solid red 1px;

}
#myRollover1:hover {
background-image:url(http://www.creationindex.com/profileover.gif);
}
</style>
</head>
<body>

<div id="images">
 <img id="backgroundgreen" class="hide" style="height:100%" src="http://www.creationindex.com/http://www.creationindex.com/backgroundgreen.gif" alt="">
 <img style="height:100%" src="http://www.creationindex.com/logospining.gif" alt="">
 <img id="lineback" class="hide" style="height:100%" src="http://www.creationindex.com/lineback.gif" alt="">
 <img id="lettering" class="hide" style="height:100%" src="http://www.creationindex.com/lettering.gif" alt="">
 <img id="alien" class="hide" style="height:100%" src="http://www.creationindex.com/alien.gif" alt="">
 <img id="equalizer" class="hide" style="height:100%" src="http://www.creationindex.com/equalizer.gif" alt="">
 <img id="buttonbar" class="hide" style="height:100%" src="http://www.creationindex.com/buttonbar.gif" alt="">

<noscript>
<div>
 <img id="backgroundgreen1" style="height:100%" src="http://www.creationindex.com/backgroundgreen.gif" alt="">
 <img id="lineback1" style="height:100%" src="http://www.creationindex.com/lineback.gif" alt="">
 <img id="lettering1"  style="height:100%" src="http://www.creationindex.com/lettering.gif" alt="">
 <img id="alien1" style="height:100%" src="http://www.creationindex.com/alien.gif" alt="">
 <img id="equalizer1" style="height:100%" src="http://www.creationindex.com/equalizer.gif" alt="">
 <img id="buttonbar1" style="height:100%" src="http://www.creationindex.com/buttonbar.gif" alt="">

</div>
</noscript>
</div>
<div id="myRollover1" ></div>

</body>
</html>

**Repatilian** · 12-03-2011, 06:29 AM

i tried your code but it didn't do anything. here's a page where i added your code www.creationindex.com/indextest13.html

**vwphillips** · 12-03-2011, 10:42 AM

I tested your page with IE and FF and it works for me

**Repatilian** · 12-04-2011, 12:43 AM

thank you

**Repatilian** · 12-04-2011, 10:28 AM

i got it fixed i added this code:

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.

Thread: adding rollover button to javascript code

Thread Tools

Search Thread

adding rollover button to javascript code

Bookmarks

Bookmarks

Posting Permissions