I would like to learn more html codes to change the borders of these images as well. Please see the existing code below. This is for personal use, and not commercial. I appreciate your help!
</head>
<style type="text/css">
#menu a.p1:hover {text-decoration:none; background-color:#8c97a3; color:#000;}
#menu a .large {display:block; position:absolute; width:0; height:0; border:0; top:0; left:0;}
#menu a.p1:hover .large {display:block; position:absolute; top:-65px; left:150px; width:300px; height:300px; border:10px solid #ccc;}
</style>
</head>
<body>
<div id="menu">
<a class="p1" href="#nogo" title="Painting of Space_TIME">
<img src="images/space_time[1]_small.jpg" title="Space_TIME" alt="Painting of Space_TIME" style="position: absolute; width: 73px; height: 45px; z-index: 57; left: 19; top: 316; visibility:visible" id="layer72" border="0"/><img class="large" src="images/space_time[1].jpg" title="Space_TIME" alt="Painting of Space_TIME" style="height: 300px; position: absolute; left: 102; top: 208; z-index:58; visibility:visible" width="453" id="Space_TIME" /></a>
</div>