How to make an image appear when you mouse hover over a link

Question

I have been searching the internet on a way to make an image appear when I mouse over a link. I found one way that works but it does not work in chrome.

 ul#nav li a.orange { color: #FFF; text-decoration:none; padding-top: 10px; padding-right: 25px; padding-bottom: 10px; padding-left: 25px; background-color: #f47521; border: solid; border-width:thin; } a.orange img { display:none; } a.orange:hover img.showspanel { display:block; position:absolute; margin-left:350px; } #orange{ background-color: #f47521; color: #000; border-radius:4px; width:975px; height:36px; padding-left:25px; } 

 <div id="nav"> <ul id="nav"> <li> <a class="orange" href="#"><strong>Shows<img class="showspanel" src="../images/shows.png" alt="shows" /></strong> </li> </ul> </div> 

Answer 1

Your code works however there always ways to go for crossbrowser compatibility.

 <div id="nav"> <ul id="nav"> <li> <a onmouseout="hideImg(imageOne)" onmouseover="showImg(imageOne)" class="orange" href="#"> <strong> Shows <img style="display:none;" id="imageOne" class="showspanel" src="../images/shows.png" alt="shows" /> </strong> </li> </ul> </div> <script> function showImg(image) { var img = document.getElementByI(image); img.style.display = "block"; } function hideImg(image) { var img = document.getElementByI(image); img.style.display = "none"; } </script> 

That should run in chrome firefox and IE