SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Member
    Join Date
    Nov 2011
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by Repatilian View Post
    Hi i have two images which are part of a rollover button that i want to have paused until the intro animation finishes.
    A good option is to delay setting up the rollover until after the animation finishes.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Member
    Join Date
    Nov 2011
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    how do you delay the rollover?

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by Repatilian View Post
    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.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #5
    SitePoint Member
    Join Date
    Nov 2011
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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>

  6. #6
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    I'm not seeing any animation code, and it seems that you're missing some scripting code from what you posted above.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  7. #7
    SitePoint Member
    Join Date
    Nov 2011
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  8. #8
    SitePoint Member
    Join Date
    Nov 2011
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.


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
  •