xcoderx Posted May 24, 2010 Share Posted May 24, 2010 the code below displays thumbnail on a mouseover over a image. how to make the image to link so the thumbnail shows on link hover <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" > <head> <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" /> <title> CSS ~ Image Pop UP</title> <meta name="Keywords" content="web design "/> <meta name="Description" content="CSS ~ Image Pop-up" /> <style type="text/css"> body { background: #FFFFFF; color: #000000; font-family: verdana, arial, sans-serif; font-size: 0.8em; margin: 20px 0px 0px 0px; padding: 0; text-align: left; } h2 { color: #C2C7BE; font: normal small-caps bold 2.5em Verdana, sans-serif; text-decoration: underline; } .right { font-size: 1.0em; padding-right: 100px; text-align: right; } #pic { background-color: #FFFFFF; left: 10px; position: relative; top: 10px; width: 135px; } #pic a .large { border: 0px; display: block; height: 1px; left: -1px; position: absolute; top: -1px; width: 1px; } #pic a img { border: 0; } #pic a.p1, #pic a.p1:visited { background: #FFFFFF; border: 1px solid #000000; display: block; height: 90px; left: 0; text-decoration: none; top: 0; width: 135px; } #pic a.p1:hover { background-color: #8C97A3; color: #000000; text-decoration: none; } #pic a.p1:hover .large { border: 1px solid #000000; display: block; height: 233px; left: 150px; position: absolute; top: -60px; width: 300px; } #top { margin-left: 80px; } </style> </head> <body> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <div id="pic"> <a class="p1" href="#"><img src="milu.jpg" alt="Thumbnail image" width="135" height="90" title="Thumbnail image" /><img src="milu.jpg" alt="Enlarged view of image" width="350" height="233" class="large" title="Enlarged view of image" /></a> </div> <div id="footer"> </div> </body> </html> Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.