HTML-iframe photo issue

Question

Итак, вот моя проблема. У меня есть четыре фотографии в нижней левой части моей страницы, что я пытаюсь сделать, это навести курсор мыши на одну из картин и получить более полную картину этого изображение появляется в моем iframe. Я должен сделать это без Javascript, так как это для одного из моих классов, но я просто не могу понять, как это сделать в html. Вот мой код:

<iframe name="lrgpic" src="Pacific files/images/photo2.jpg" width="500px" height="200px"></iframe> 
<a href="Pacific files/images/photo2.jpg" target="lrgpic" onmouseover="this.click()"> 
    <img src="Pacific files/image/photo2thumb.jpg" alt ="Pacific" height="100px"/> 
</a> 
<table> 
    <tr id="top"> 
     <td> 
      <img src="Pacific files/images/photo2thumb.jpg" alt ="Pacific" height="100px"/> 
     </td> 
     <td> 
      <img src="Pacific files/images/photo3thumb.jpg" alt="Pacific" height="100px" /> 
     </td> 
    </tr> 
    <tr id="bottom"> 
     <td> 
      <img src="Pacific files/images/photo4thumb.jpg" alt="Pacific" height="100px" /> 
     </td> 
     <td> 
      <img src="Pacific files/images/photo6thumb.jpg" alt="Pacific" height="100px" /> 
     </td> 
    </tr> 
</table>  

Вот мой CSS:

table { 
    position: absolute; 
    top: 430px; 
    left: 400px; 
    z-index: 1; 
} 

Answer 1

сделать все изображения в таблице в виде ссылок. Определите для них отдельные классы. Затем сделайте каждый из них в iframe, как вы сделали с изображением ссылки. Вы можете поместить свойство курсора по умолчанию, чтобы замаскировать их как чистые изображения.

table { 
 
    position: absolute; 
 
    top: 430px; 
 
    left: 400px; 
 
    z-index: 1; 
 
} 
 

 
.hello{ 
 
    cursor:default; 
 
}

<iframe name="lrgpic" src="http://goo.gl/iVNwxy" width="500px" height="200px"></iframe> 
 

 
<a href="http://goo.gl/bKfNtp" target="lrgpic" onmouseover="this.click()"> 
 
    <img src="http://goo.gl/bKfNtp" alt ="Pacific" height="100px"/> 
 
</a> 
 

 
<table> 
 
    <tr id="top"> 
 
     <td> 
 
      <a href="http://goo.gl/fo9jcw" class="hello" target="lrgpic" onmouseover="this.click()"> 
 
       <img src="http://goo.gl/fo9jcw" alt ="Pacific" height="100px"/> 
 
       </a> 
 
     </td> 
 
     <td> 
 
      <a href="http://goo.gl/wlVZBm" class="hello" target="lrgpic" onmouseover="this.click()"> 
 
       <img src="http://goo.gl/wlVZBm" alt ="Pacific" height="100px"/> 
 
       </a> 
 
     </td> 
 
    </tr> 
 
    <tr id="bottom"> 
 
     <td> 
 
      <a href="http://goo.gl/FnYGrM" class="hello" target="lrgpic" onmouseover="this.click()"> 
 
       <img src="http://goo.gl/FnYGrM" alt ="Pacific" height="100px"/> 
 
       </a> 
 
     </td> 
 
     <td> 
 
      <a href="http://goo.gl/8UaNCE" class="hello" target="lrgpic" onmouseover="this.click()"> 
 
       <img src="http://goo.gl/8UaNCE" alt ="Pacific" height="100px"/> 
 
       </a> 
 
     </td> 
 
    </tr> 
 
</table>