Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    Regular Coder
    Join Date
    Jul 2010
    Location
    Arizona
    Posts
    111
    Thanks
    14
    Thanked 0 Times in 0 Posts

    rollover button with animated gifs

    Hi, i was wondering if i can make a rollover button with the mouse over to be an animated gif and the mouse click a gif. I have three seperate files. thank you.

  • #2
    Regular Coder
    Join Date
    Jul 2010
    Location
    Arizona
    Posts
    111
    Thanks
    14
    Thanked 0 Times in 0 Posts
    My website is www.creationindex.com I'm still in the process of making the images. I was just wondering how the code would look.

  • #3
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello Repatilian,
    Something like this maybe?
    Code:
    <!DOCTYPE HTML>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    <style type="text/css">
    html, body {
    	margin: 0;
    	font: 100% "Trebuchet MS", Arial, Helvetica, sans-serif;
    	color: #000;
    	background: #fc6;
    }
    #buttons {
    	height: 175px;
    	width: 400px;
    	margin: 30px auto;
    	background: #99c;
    }
    	#rollover1 {
    		height: 100px;
    		width: 400px;
    	}
    		#rollover1 a:visited {background: url(third.gif);}
    		#rollover1 a:hover {background: url(animated.gif);}
    		#rollover1 a {
    			height: 100px;
    			width: 400px;
    			display: block;
    			background: url(first.gif);
    		}
    
    </style>
    </head>
    <body>
          <div id="buttons">	
                <div id="rollover1"><a href=""></a></div>
          <!--end roll--></div>
    </body>
    </html>
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #4
    Regular Coder
    Join Date
    Jul 2010
    Location
    Arizona
    Posts
    111
    Thanks
    14
    Thanked 0 Times in 0 Posts
    ok it's working but it's isn't showing the animation when mouse is over it. Also it is displaying a bunch of the same file which is profile.gif. I'm not sure what to put in the different height and width variables in the css. Right now i only have two files. Profile.gif and profileover.gif which is the animated gif. thank you.

  • #5
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    I've never tried using an animated gif before... not sure what support there is for that.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #6
    Regular Coder
    Join Date
    Aug 2005
    Location
    MS
    Posts
    845
    Thanks
    11
    Thanked 79 Times in 77 Posts
    Shouldn't be any different than using a static image although some delay may be experienced until all images are cached. Possibly a JS image preloader would help there. This may help:

    How to animate a link on mouse over

    Using CSS and GIF’s to animate a menu
    ☠ ☠RON☠ ☠

  • #7
    Regular Coder
    Join Date
    Jul 2010
    Location
    Arizona
    Posts
    111
    Thanks
    14
    Thanked 0 Times in 0 Posts
    Hi, i used the method of combining the two gifs into one. I used GIF movie gear. I was wondering if my code is right. I have a delay while the first animation runs before any other files. I was wondering how i could incorporate the animated button into my page. Here is the image. Here is the code for my page:


    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(){
    
    /* this value is 4 seconds, which is the time that logospintest.gif takes to run it's course */
    
       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; 
    }
    
    
    #main_nav a {
    	display: block;
    	width: 302px;
    	height: 151px;
    	background: url(profileover.gif); }
    
    #main_nav a:hover { background-position: -150px 0; }
    
    
    
    
    </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>
    <div id=”main_nav”>
    </div>
    </body>
    </html>
    Attached Thumbnails Attached Thumbnails rollover button with animated gifs-profileover.gif  

  • #8
    Regular Coder
    Join Date
    Jul 2010
    Location
    Arizona
    Posts
    111
    Thanks
    14
    Thanked 0 Times in 0 Posts
    i got it. i used this code: <a href="page.html" onmouseover="example.src='images/bt_rollover.jpg'" onmouseout="example.src='images/bt_normal.jpg'" onmousedown="example.src='images/bt_action.jpg'"><img src="images/bt_normal.jpg" alt="Image Alt text" name="example" width="100" height="100" border="0" /></a>


  •  

    Posting Permissions

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