cjy8s Posted August 13, 2010 Share Posted August 13, 2010 i want buttons to change image when you hover the mouse, but i dont know why its not working. it doesnt come up in the page. Here's the relevant CSS: /*---Buttons---*/ /*Button hovering capabilities*/ #buttons a.home:link, #buttons a.home:visited { background-image: url(property_files/Buttons/uhome.png); } #buttons a.earrings:link, #buttons a.earrings:visited { background-image: url(property_files/Buttons/uearrings.png); }#buttons a.rings:link, #buttons a.rings:visited { background-image: url(property_files/Buttons/urings.png); }#buttons a.watches:link, #buttons a.watches:visited { background-image: url(property_files/Buttons/uwatches.png); } #buttons a.braclets:link, #buttons a.braclets:visited { background-image: url(property_files/Buttons/ubraclets.png); } #buttons a.necklackes:link, #buttons a.necklackes:visited { background-image: url(property_files/Buttons/unecklackes.png); }#buttons a.sets:link, #buttons a.sets:visited { background-image: url(property_files/Buttons/usets.png); }#buttons a.bows:link, #buttons a.bows:visited { background-image: url(property_files/Buttons/ubows.png); } #buttons a.home:hover { background-image: url(property_files/Buttons/ahome.png); } #buttons a.earrings:hover { background-image: url(property_files/Buttons/aearrings.png); } #buttons a.rings:hover { background-image: url(property_files/Buttons/arings.png); } #buttons a.watches:hover { background-image: url(property_files/Buttons/awatches.png); } #buttons a.braclets:hover { background-image: url(property_files/Buttons/abraclets.png); } #buttons a.necklackes:hover { background-image: url(property_files/Buttons/anecklackes.png); } #buttons a.sets:hover { background-image: url(property_files/Buttons/asets.png); } #buttons a.bows:hover { background-image: url(property_files/Buttons/abows.png); } /*Button Positioning*/#buttons { width: 290px; height: 37px; position: absolute; top: 110px; margin-top: -31px; height: 100%; float: right; left: 50%; margin-left:-100px; } /*Button links*/ #buttons a { display: block; float: left; width: 95px; height: 37px; line-height: 37px; text-decoration: none; background-repeat: no-repeat; }/*END Buttons*/ and here is the relevant HTML: <head> <title>NycKnacks | Home</title> <meta name="description" content=""/> <meta name="keywords" content="Necklaces, jewlery, rings, bracelets, watches, sets, bows, earrings, beads, homemade, Nyckie Ouderkirk, NycKnacks, shined, polished"/><link rel="stylesheet" type="text/css" href="Index_files/cascade.css" /></head><!-- buttons and LINKS --><div id="buttons"><!-- buttons --> <a class="home" href="../Index.html" alt="Home"></a> <a class="earrings" href="Getting Started.html" alt="Getting Started"></a> <a class="rings" href="Our Mission.html" alt="Our Mission"></a> <a class="watches" href="Our Mission.html" alt="Our Mission"></a> <a class="braclets" href="Our Mission.html" alt="Our Mission"></a> <a class="necklackes" href="Our Mission.html" alt="Our Mission"></a> <a class="sets" href="Our Mission.html" alt="Our Mission"></a> <a class="bows" href="Our Mission.html" alt="Our Mission"></a></div><!-- end buttons --> I've made this work before, buuuuuttt.... that was a while ago and now i've forgotten :/ anyone able to help? Link to comment Share on other sites More sharing options...
dsonesuk Posted August 13, 2010 Share Posted August 13, 2010 are you sure you have the correct relative path to your images in you css, i just tested it and it seems to work fine Link to comment Share on other sites More sharing options...
cjy8s Posted August 13, 2010 Author Share Posted August 13, 2010 hahaha well, i had it saved on my desktop instead of my thumb drive where it belonged.... thanks! i might not have caught that! Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.