This is an old school effect that I haven't done in so many years, I can't remember how! I can't even find any useful tuts on it. Please help! What I want to do is have a list (ul, or just text) of names. When a user hovers over a name, it will load an image into another div on the page. I would like the images to be as pre-loaded as possible to help with delay issues. But right now I can't even figure out how to set up the link. Ideas?
hello there, you can try this and i hope it will help : <style type="text/css"> div#links {position: absolute; top: 81px; left: 0; width: 166px; height: 700px; font: 16px Verdana, sans-serif; z-index: 100;} div#links a {display: block; text-align: center; font: bold 1em sans-serif; padding: 5px 10px; margin: 0 0 1px; border-width: 0; text-decoration: none; color: #FFC; background: #444; border-right: 5px solid #505050;} div#links a:hover {color: #411; background: #AAA; border-right: 5px double white;} div#links a img {height: 0; width: 0; border-width: 0;} div#links a:hover img {position: absolute; top: 190px; left: 55px; height: 50px; width: 50px;} </style> HTML: <div id="links"> <a href="http://www.template4all.com/">Home<img src="Your-image.gif"></a> <a href="http://www.template4all.com/wordpress/">Wordpress<img src="Your-image.gif"></a> <a href="http://www.template4all.com/joomla/">Joomla<img src="Your-image.gif"></a> <a href="http://www.template4all.com/css/">CSS<img src="Your-image.gif"></a> <a href="http://www.template4all.com/flash/">Flash<img src="Your-image.gif"></a> <a href="http://www.template4all.com/templates/">Templates<img src="Your-image.gif"></a> </div> HTML: Live Demo can be seen Here