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> Link to comment https://forums.phpfreaks.com/topic/202698-popup-image-in-a-hover-not-image/ Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.