I don%26#039;t know what they are called (tell me if you know), but, basically, how do you make buttons for the web that highlight or change colors or whatever, when you click on them or put your mose over them. I%26#039;m trying to make a simple website and would like for my buttons to be sorta animated. I use dreamweaver and photoshop. Provide a link to a tutorial if you want to 10 points best answer|||there are 2 ways you can use javascript or css.
here is a code just replace with images and tweek it so it will fit your needs. keep in mind you will have to make 2 images for each for it so swap to..
%26lt;head%26gt;
%26lt;script type = %26quot;text/javascript%26quot;%26gt;
var myImages = new Array (%26quot;login1.gif%26quot;, %26quot;login2.gif%26quot;, %26quot;contact1.gif%26quot;, %26quot;contact2.gif%26quot;, %26quot;home1.gif%26quot;, %26quot;home2.gif%26quot;, %26quot;paymentplans1.gif%26quot;, %26quot;paymentplans2.gif%26quot;, %26quot;joinnow1.gif%26quot;, %26quot;joinnow2.gif%26quot;, %26quot;faq1.gif%26quot;, %26quot;faq2.gif%26quot;, %26quot;tos1.gif%26quot;, %26quot;tos2.gif%26quot;, %26quot;empty.gif%26quot;);
var myPreload = new Array ();
for (var i = 0; i %26lt; myImages.length; i++ )
{
myPreload[ i ]= new Image();
myPreload[ i ].src = myImages[ i ];
}
function mySwap(s)
{
if ( s == 0 )document.images.one.src = %26quot;home1.gif%26quot;;
if ( s == 1 )document.images.one.src = %26quot;home2.gif%26quot;;
if ( s == 2 )document.images.two.src = %26quot;paymentplans1.gif%26quot;;
if ( s == 3 )document.images.two.src = %26quot;paymentplans2.gif%26quot;;
if ( s == 4 )document.images.three.src = %26quot;joinnow1.gif%26quot;;
if ( s == 5 )document.images.three.src = %26quot;joinnow2.gif%26quot;;
if ( s == 6 )document.images.login.src = %26quot;login1.gif%26quot;;
if ( s == 7 )document.images.login.src = %26quot;login2.gif%26quot;;
if ( s == 8 )document.images.five.src = %26quot;contact1.gif%26quot;;
if ( s == 9 )document.images.five.src = %26quot;contact2.gif%26quot;;
if ( s == 10 )document.images.six.src = %26quot;faq1.gif%26quot;;
if ( s == 11 )document.images.six.src = %26quot;faq2.gif%26quot;;
if ( s == 12 )document.images.seven.src = %26quot;tos1.gif%26quot;;
if ( s == 13 )document.images.seven.src = %26quot;tos2.gif%26quot;;
}
%26lt;/script%26gt;
%26lt;/head%26gt;
%26lt;body topmargin = 0%26gt;
%26lt;center%26gt;
%26lt;table bgcolor = ffffff width = 758 cellpadding = 0 cellspacing = 0%26gt;
%26lt;tr%26gt;
%26lt;td%26gt;%26lt;a href = %26quot;main.php?ref=%26lt;?=$ref?%26gt;%26amp;firstname=%26lt;?=$fi鈥?target = %26quot;doc%26quot;%26gt;%26lt;img src = %26quot;home1.gif%26quot; width = 151 height = 36 border = 0 id=%26quot;one%26quot; onmouseout=%26quot;mySwap(0)%26quot; onmouseover=%26quot;mySwap(1)%26quot;%26gt;%26lt;/a%26gt;%26lt;/td%26gt;
%26lt;td%26gt;%26lt;a href = %26quot;payplans.php?ref=%26lt;?=$ref?%26gt;%26amp;firstname=%26lt;?鈥?target = %26quot;doc%26quot;%26gt;%26lt;img src = %26quot;paymentplans1.gif%26quot; width = 151 height = 36 border = 0 id=%26quot;two%26quot; onmouseout=%26quot;mySwap(2)%26quot; onmouseover=%26quot;mySwap(3)%26quot;%26gt;%26lt;/a%26gt;%26lt;/td%26gt;
%26lt;td%26gt;%26lt;a href = %26quot;m_signup.php?ref=%26lt;?=$ref?%26gt;%26amp;firstname=%26lt;?鈥?target = %26quot;doc%26quot;%26gt;%26lt;img src = %26quot;joinnow1.gif%26quot; width = 151 height = 36 border = 0 id=%26quot;three%26quot; onmouseout=%26quot;mySwap(4)%26quot; onmouseover=%26quot;mySwap(5)%26quot;%26gt;%26lt;/a%26gt;%26lt;/td%26gt;
%26lt;td%26gt;%26lt;a href = %26quot;m_login.php?ref=%26lt;?=$ref?%26gt;%26amp;firstname=%26lt;?=鈥?target = %26quot;doc%26quot;%26gt;%26lt;img src = %26quot;login1.gif%26quot; width = 151 height = 36 border = 0 id=%26quot;login%26quot; onmouseout=%26quot;mySwap(6)%26quot; onmouseover=%26quot;mySwap(7)%26quot;%26gt;%26lt;/a%26gt;%26lt;/td%26gt;
%26lt;td%26gt;%26lt;a href = %26quot;contact.php?ref=%26lt;?=$ref?%26gt;%26amp;firstname=%26lt;?=鈥?target = %26quot;doc%26quot;%26gt;%26lt;img src = %26quot;contact1.gif%26quot; width = 154 height = 36 border = 0 id=%26quot;five%26quot; onmouseout=%26quot;mySwap(8)%26quot; onmouseover=%26quot;mySwap(9)%26quot;%26gt;%26lt;/a%26gt;%26lt;/td%26gt;
%26lt;/tr%26gt;
%26lt;tr%26gt;
%26lt;td%26gt;%26lt;a href = %26quot;faq.php?ref=%26lt;?=$ref?%26gt;%26amp;firstname=%26lt;?=$fir鈥?target = %26quot;doc%26quot;%26gt;%26lt;img src = %26quot;faq1.gif%26quot; width = 151 height = 36 border = 0 id=%26quot;six%26quot; onmouseout=%26quot;mySwap(10)%26quot; onmouseover=%26quot;mySwap(11)%26quot;%26gt;%26lt;/a%26gt;%26lt;/td%26gt;
%26lt;td%26gt;%26lt;a href = %26quot;tos.php?ref=%26lt;?=$ref?%26gt;%26amp;firstname=%26lt;?=$fir鈥?target = %26quot;doc%26quot;%26gt;%26lt;img src = %26quot;tos1.gif%26quot; width = 151 height = 36 border = 0 id=%26quot;seven%26quot; onmouseout=%26quot;mySwap(12)%26quot; onmouseover=%26quot;mySwap(13)%26quot;%26gt;%26lt;/a%26gt;%26lt;/td%26gt;
%26lt;td%26gt;%26lt;img src = %26quot;empty.gif%26quot; width = 151 height = 36%26gt;%26lt;/td%26gt;
%26lt;td%26gt;%26lt;img src = %26quot;empty.gif%26quot; width = 151 height = 36%26gt;%26lt;/td%26gt;
%26lt;td%26gt;%26lt;img src = %26quot;empty.gif%26quot; width = 154 height = 36%26gt;%26lt;/td%26gt;
%26lt;/tr%26gt;
%26lt;/table%26gt;
%26lt;/center%26gt;
%26lt;/body%26gt;
