...

View Full Version : Mouseovers making link to change color



andynov123
10-26-2010, 05:45 PM
Hi
Im having trouble making an image change to the color #3333CC when I mouseover it.(The image is a link). Here is the html code.
<h2><a href="vgames.html"><img src="controller1.gif" alt="controller" border="0" usemap="#Map3" /></a><a href="vgames.html">
What do I need to do/add to my html or css documents???

wjrasmussen
10-26-2010, 05:54 PM
Try:

http://www.computerhope.com/issues/ch000075.htm

teedoff
10-26-2010, 06:08 PM
Can you provide a link or post your html and css code? The hover attribute controls the color for mouseovers.

andynov123
10-26-2010, 07:28 PM
Attached is my html and css document. go to index.html. I want the movie and video game icons/links on the top right to hover the same color as the blue background code:3333CC.

teedoff
10-27-2010, 12:27 AM
I wont download a zip file sorry. You can copy and paste your html here and enclose all code insode code tags.

andynov123
10-27-2010, 03:22 AM
How do I change the color of an image that I mouseover to #3333CC The images I want to change are controller1.gif and movie.gif.

Here is my HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- TemplateBeginEditable name="doctitle" -->
<title>Untitled Document</title>
<!-- TemplateEndEditable -->
<!-- TemplateBeginEditable name="head" -->
<!-- TemplateEndEditable -->

<link href="index.css" rel="stylesheet" type="text/css" />
</head>

<body bgcolor="#3333CC"></body>
<h10 style="background-image: url(greenbar1.jpg)" ></h10>
<h21><img src="blackbar.gif"/></h21>
<h22><img src="blackbar.gif"/></h22>
<h11> <img src="frame.gif" /></h11>
<h12><img src="frame.gif" /></h12>
<h13><img src="frame.gif" /></h13>
<h14><b>Video Games</b></h14>
<h15><b>Movie Reviews</b></h15>
<h16><b>Humor</b></h16>
<h20><a href="index.html">More Humor</a></h20>
<h18><a href="index.html"><b>More Reviews</b></a></h18>
<h19><a href="index.html">More Articles</a></h19>



<h1>
<img src="blackbar.gif" alt="blackbar" width="1492" height="478" border="0" usemap="#Map2" />

<!--
<map name="Map2" id="Map2">
<area shape="rect" coords="1131,291,1132,322" href="#" />
<area shape="poly" coords="1139,420" href="#" />
<area shape="rect" coords="1382,374,1389,378" href="#" />
</map>
-->
</h1>
<h2><a href="vgames.html"><img src="controller1.gif" alt="controller" border="0" usemap="#Map3" /></a><a href="vgames.html"></a>
<map name="Map3" id="Map3">
<area shape="poly" coords="42,28" href="#" />
<area shape="circle" coords="7,80,0" href="#" />
<area shape="rect" coords="41,98,108,142" href="#" />
<area shape="rect" coords="3,124,42,145" href="#" />
<area shape="circle" coords="40,119,10" href="#" />
<area shape="circle" coords="14,133,0" href="#" />
<area shape="circle" coords="34,126,7" href="#" />
<area shape="circle" coords="78,94,8" href="#" />
<area shape="circle" coords="122,147,22" href="#" />
<area shape="circle" coords="148,136,10" href="#" />
<area shape="rect" coords="94,123,155,152" href="#" />
<area shape="rect" coords="99,107,114,130" href="#" />
<area shape="circle" coords="112,124,10" href="#" />
<area shape="circle" coords="108,102,4" href="#" />
<area shape="circle" coords="67,97,7" href="#" />
<area shape="rect" coords="44,10,109,38" href="#" />
<area shape="rect" coords="-38,10,48,22" href="#" />
<area shape="rect" coords="5,17,19,35" href="#" />
<area shape="rect" coords="-6,24,12,41" href="#" />
<area shape="rect" coords="2,16,11,29" href="#" />
<area shape="rect" coords="104,10,157,23" href="#" />
<area shape="rect" coords="134,17,151,37" href="#" />
<area shape="rect" coords="144,34,160,88" href="#" />
<area shape="circle" coords="144,40,5" href="#" />
<area shape="circle" coords="135,24,4" href="#" />
<area shape="circle" coords="47,22,4" href="#" />
<area shape="circle" coords="-3,45,11" href="#" />
<area shape="circle" coords="-7,65,13" href="#" />
</map>
</h2>
<h3><img src="movie.gif" alt="movie" border="0" usemap="#Map" />
<map name="Map" id="Map">
<area shape="rect" coords="2,35,106,120" href="Movies.html" />
<area shape="rect" coords="106,63,113,65" href="#" />
<area shape="rect" coords="50,73,104,112" href="#" />
<area shape="rect" coords="62,36,110,120" href="#" />
<area shape="rect" coords="3,112,106,122" href="Movies.html" />
</map>
</h3>

</body>
</html>


Here is my CSS

h1 {float:right }
h1 {top-margin: -800px}

h1
{
position:absolute;
left:-214px;
top:-164px;
}
h2
{
position:absolute;
left:1080px;
top:-10px;
}
h3
{
position:absolute;
left:900px;
top:-10px;
}
h10 { background-repeat:repeat-y}

h2 a:hover {
color: #3333CC;
}
h11 {
position: absolute;
bottom: 20px;
left: -70px;

}
h12 {
position: absolute;
bottom: 20px;
left: 320px;

}
h13 {
position: absolute;
bottom: 20px;
left: 710px;

}
h14 {
position: absolute;
bottom: 350px;
left: 180px;
color:#FFF;

font-family:"courier", Times, serif;



}
h15 {
position: absolute;
bottom: 350px;
left: 570px;
color:#FFF;

font-family:"courier", Times, serif;
}
h16 {
position: absolute;
bottom: 350px;
left: 1000px;
color:#FFF;

font-family:"courier", Times, serif;
}
h20 {
position: absolute;
bottom: 70px;
left: 1090px;
color:#3333CC;

font-family:"courier", Times, serif;
}
h18 {
position: absolute;
bottom: 70px;
left: 690px;
color:#3333CC;

font-family:"courier", Times, serif;
}
h19 {
position: absolute;
bottom:70px;
left: 690px;
color:#3333CC;

font-family:"courier", Times, serif;
}

h20 a:hover {background-color:#3F0;}

h18 a:hover {background-color:#3F0;}

h19 A:hover {background-color:#3F0;}

h21 {position: absolute;
bottom: 420px;
left: 1250px;
}

h22 {position: absolute;
bottom: 392px;
left: 1250px;
}



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum