...

View Full Version : rollover button with animated gifs



Repatilian
11-21-2011, 10:45 AM
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.

Repatilian
11-21-2011, 10:49 AM
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.

Excavator
11-21-2011, 10:54 AM
Hello Repatilian,
Something like this maybe?
<!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>

Repatilian
11-21-2011, 11:10 AM
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.

Excavator
11-21-2011, 04:13 PM
I've never tried using an animated gif before... not sure what support there is for that.

Major Payne
11-22-2011, 07:46 PM
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 (http://herselfswebtools.com/2007/06/how-to-animate-a-link-on-mouse-over.html)

Using CSS and GIF’s to animate a menu (http://3.7designs.co/blog/2008/06/using-css-and-gifs-to-animate-a-menu/)

Repatilian
11-23-2011, 02:02 AM
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:






<!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','equalize r.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>

Repatilian
11-24-2011, 11:51 PM
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>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum