you're not seeing my point, lol. Im well aware of view source and firefox web developer, but in the long run in order to write working code you'd have to copy past all the code into files, along with the images. The rar file i uploaded contains all of it. Thus making it the easiest possible solution.. I dont see why you'd want a link and make yourself have to go through the trouble of copy pasting everything and saving all the images on the website when it takes less time to follow my link, open it up, and just click index.html and it's all right there. Also triple, I tried the first solution you provided before coming on here, I wish it were that simple I would've figured it out by now .

Again, to determine the problem and provide a solution no file needs to be copied, pasted or saved. Not a single file. Not if you know what you're doing anyway. You are making this a heck of a lot more difficult then it needs to be. If you want help, upload the site.

Again, good luck on finding the solution, I'm throwin' in the towel with this one.

well the solution you provided didnt work. so without putting your "test" code inside of my code how could you possibly know what you've provided me with works or not? If you "knew what you were doing" your first solution would have solved the problem. lol. http://wblistings.com/kris/boresight.html

there's a simple fix, but that's with no images so no good.

The code I provided couldn't have just been plugged into your CSS and expected to work. You would have had to change the image names and the divs in your XHTML to match the CSS or change the CSS to match your existing images and divs. I did state "something like this" not "put this into your CSS and it will work."

However, all of that is a moot point because now looking at your website (since you have finally provided a link), it is evident that you have some serious programming issues that isn't just revolving around the hover image. The entire website breaks in FF for Mac which means you more then likely have problems in other browsers.

The image you would like to have the hover effect on isn't even positioned properly in the XHTML in the first place. It is also not in a list format so you can do what I suggested in the first place. With the code you have, you my as well just do a Javascript rollover since it's a mess anyway.

Your attitude and lack of understanding has been frustrating. Your excuses for not providing what is necessary to help you (something I or anyone else does not have to do) is infuriating.

So...With that out...

Start by positioning your divs correctly in the XHTML (example below), validate both your XHTML & CSS and we'll go from there.

CSS:

ul#lasersights li a:link, ul#lasersights li a:visited, ul#lasersights li a:active {
    display: block;
    width: 237px;
    height: 49px;
    background-image: url(images/lasersights-up.png);
    text-indent: -9999px;
}

ul#lasersights li a:hover  {
    background-image: url(images/lasersights-down.png);
}

XHTML:

<div id="left">
<a href="index.html"><img src="http://www.webmaster-talk.com/images/logo.png" width="238" height="158" /></a>

<ul>
<li><a href="#">Compact Laser Sights</a></li>
<li><a href="#">Precision Green Laser Sights</li>
<li><a href="#">Universal Laser Boresights</li>
<li><a href="#">Holographic Sights</li>
<li><a href="#">Heatseeker</li>
<li><a href="#">Xenon Illuminator Flashlight</li>
<li><a href="#">Universal Mounting System</li>
<li><a href="#">Accessories</li>
</ul>

<ul id="lasersights"> 
<li><a href="#">Precision Green Laser Sights</a></li>
</ul>

</div>

While you're coding, it would be advisable to label your XHTML by sections (using <!---BEGIN LEFT---> & <!---END LEFT---> for example) to make it easier for you to make changes in the future.

Originally Posted by TripleMoons

The code I provided couldn't have just been plugged into your CSS and expected to work. You would have had to change the image names and the divs in your XHTML to match the CSS or change the CSS to match your existing images and divs. I did state "something like this" not "put this into your CSS and it will work."

However, all of that is a moot point because now looking at your website (since you have finally provided a link), it is evident that you have some serious programming issues that isn't just revolving around the hover image. The entire website breaks in FF for Mac which means you more then likely have problems in other browsers.

The image you would like to have the hover effect on isn't even positioned properly in the XHTML in the first place. It is also not in a list format so you can do what I suggested in the first place. With the code you have, you my as well just do a Javascript rollover since it's a mess anyway.

Your attitude and lack of understanding has been frustrating. Your excuses for not providing what is necessary to help you (something I or anyone else does not have to do) is infuriating.

So...With that out...

Start by positioning your divs correctly in the XHTML (example below), validate both your XHTML & CSS and we'll go from there.

CSS:

ul#lasersights li a:link, ul#lasersights li a:visited, ul#lasersights li a:active {
    display: block;
    width: 237px;
    height: 49px;
    background-image: url(images/lasersights-up.png);
    text-indent: -9999px;
}

ul#lasersights li a:hover  {
    background-image: url(images/lasersights-down.png);
}

XHTML:

<div id="left">
<a href="index.html"><img src="http://www.webmaster-talk.com/images/logo.png" width="238" height="158" /></a>

<ul>
<li><a href="#">Compact Laser Sights</a></li>
<li><a href="#">Precision Green Laser Sights</li>
<li><a href="#">Universal Laser Boresights</li>
<li><a href="#">Holographic Sights</li>
<li><a href="#">Heatseeker</li>
<li><a href="#">Xenon Illuminator Flashlight</li>
<li><a href="#">Universal Mounting System</li>
<li><a href="#">Accessories</li>
</ul>

<ul id="lasersights"> 
<li><a href="#">Precision Green Laser Sights</a></li>
</ul>

</div>

While you're coding, it would be advisable to label your XHTML by sections (using <!---BEGIN LEFT---> & <!---END LEFT---> for example) to make it easier for you to make changes in the future.

Im aware that your code wouldn't work if i just "threw it in" i obviously have to do proper linking. I stated before i tried this method before posting on here for help and it proved futile. Maybe you have a different idea that im not seeing yet so please continue with your lesson, im here to learn :P. I was just trying to make the point that if you are trying to give me code that works it would be best to test it first, which is why i provided the documentation. I tried doing it but still the images do not show, just the list with links that i can hover over and the text color changes.

I provided you with the correct method that does work. You are either not doing something properly or something in your existing code is effecting it. Personally I would toss the entire coding you did and start from scratch using web standards compliant code. Do not expect me to reprogram you website for free as it seems you think you're entitled to.

Start (not this is the end-all to your problems) by positioning your divs correctly in the XHTML and validate both your XHTML (155 errors) & CSS (4 errors). If you are unsure how to use divs correctly, click here.

that method does not work, lol. thanks for trying though. if you're confident it works then you should have been able to put it in the code and made it work. which you have not done. ill figure it out eventually. thanks though.

Really? Then why is it working here:
http://triplemoonsdesign.com/ROLLOVER/test.html

Hmmmmmm...My host must be magic.