Results 1 to 7 of 7

Thread: adding rollover button to javascript code

  1. #1
    Join Date
    Jul 2010
    Posts
    13
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default adding rollover button to javascript code

    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.

  2. #2
    Join Date
    Jul 2010
    Posts
    13
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    i want the rollover button to be in CSS.

  3. #3
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,891
    Thanks
    2
    Thanked 441 Times in 435 Posts

    Default

    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>
    Vic
    God Loves You and will never love you less.
    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  4. #4
    Join Date
    Jul 2010
    Posts
    13
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

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

  5. #5
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,891
    Thanks
    2
    Thanked 441 Times in 435 Posts

    Default

    I tested your page with IE and FF and it works for me
    Vic
    God Loves You and will never love you less.
    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  6. #6
    Join Date
    Jul 2010
    Posts
    13
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    thank you

  7. #7
    Join Date
    Jul 2010
    Posts
    13
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    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.

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •