What is the HTML Code for changing a button's color on a mouseover?

  • Thread starter Thread starter ww1spy
  • Start date Start date
W

ww1spy

Guest
All I need is the HTML code for making a simple thing like a rectangle change color when a user's mouse hovers over it! Please be clear as to where in the code I must supply information to customize the button's color, or anything else.
 
Thats javascript that makes it do that, Not HTML.

Use this with javascript code:

<img src="normal.png" onmouseover="changepic()" />

I'm not that good with javascript so I can't make the code, Sorry.

IT'S A BUTTON GUYS NOT A LINK PLEASE RESPOND APPROPIATLY
 
It takes a bit of internal styling. in the body tag you use this outline to change the link's and the mouseover effects.

a {****}
a:link {*****}
a:hover {*****}

the atreiks are what you want the effect to be in your case your worried about the mouse over effects. we'll use the "a:hover {****}" tag'

in the curvy bracets type "background:-the color-;" this will change the color of the background but keeps the font color the same.

type "color:-your color-" to change the color of the font
 
It sounds like you mean a text link, not a button. A link is easy to change colors, a button(linked image) will require 2 separate images.

PUT THE FOLLOWING UNDER </TITLE> IN THE <HEAD> SECTION FOR CHANGING LINK TEXT COLORS

<style type="text/css">
a:link {color: #FFC211;}
a:visited {color: #CCCCCC;}
a:hover {color: #FFFFFF;}
a:active {color: #FFFFFF;}
<style>

(its technically CSS but you can use the above code in a HTML code)


In case you wanted to use images/buttons, or if someone gets here wanting to change a little bit more on a mouseover, the info is here....
I have this on my site, and it is also set to preload images so once it is moused over it is a quick and smooth image change....


UNDER <HEAD> GOES THE FOLLOWING:

===CODE BELOW===
<script type="text/javascript">
<!--
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a)&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a.indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a;}}
}

function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers.document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
===CODE ABOVE===



HERE IS THE BODY TAG: (MUST RENAME THE IMAGE1, IMAGE2 etc)

===CODE BELOW===
<body onload="MM_preloadImages('image1.png','image2.png')">
===CODE ABOVE===

IMAGE1, IMAGE2 ETC ARE THE MOUSEOVER IMAGES THAT WILL PRELOAD WITH THE PAGE. IF IT DOES NOT PRELOAD, IT WILL TRY TO LOAD ONCE THE MOUSE IS OVER THE IMAGE AND TYPICALLY WHILE HAVE A DELAY AND LOOK UNPROFESSIONAL.





AND HERE IS THE LINK CODE: (MUST EDIT THE ALL CAPS SECTIONS)

===CODE BELOW===
<a href="LINKTO.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('IMAGEMOUSEOVER','','IMAGEMOUSEOVER.png',1)">
<img src="IMAGENORMAL.png" name="IMAGENORMAL" id="IMAGENORMAL" /></a>
===CODE ABOVE===

LINKTO.HTML = WHERE YOU WANT TO LINK
IMAGEMOUSEOVER = NAME YOUR IMAGE THAT WILL SHOW ON MOUSEOVER
IMAGEMOUSEOVER.PNG = FILE NAME OF IMAGE TO SHOW ON MOUSEOVER
IMAGENORMAL.PNG = NORMAL IMAGE DISPLAYED
 
Back
Top