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 6 of 6
  1. #1
    Regular Coder
    Join Date
    Oct 2010
    Posts
    272
    Thanks
    8
    Thanked 1 Time in 1 Post

    Question Mouseovers making link to change color

    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???

  • #2
    New Coder
    Join Date
    May 2008
    Posts
    33
    Thanks
    11
    Thanked 0 Times in 0 Posts

  • #3
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,338
    Thanks
    5
    Thanked 363 Times in 360 Posts
    Can you provide a link or post your html and css code? The hover attribute controls the color for mouseovers.

  • #4
    Regular Coder
    Join Date
    Oct 2010
    Posts
    272
    Thanks
    8
    Thanked 1 Time in 1 Post

    Attached is HTML AND CSS document

    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.
    Attached Files Attached Files

  • #5
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,338
    Thanks
    5
    Thanked 363 Times in 360 Posts
    I wont download a zip file sorry. You can copy and paste your html here and enclose all code insode code tags.

  • #6
    Regular Coder
    Join Date
    Oct 2010
    Posts
    272
    Thanks
    8
    Thanked 1 Time in 1 Post
    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;
    }


  •  

    Posting Permissions

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