<html>

<head>

<style type=”text/css”>

#lefcontent {

float : left;

width : 250px;

margin : 0;

padding : 1em;

text-align:left;

font-size : 1em;

font-family: Verdana, Arial, Helvetica, Tahoma, sans-serif;

color: #2A2A2A;

line-height: 2em;

 

#rightcontent {

margin-left : 3000px;

border-left : 10px solid #fff;

padding : 10px;

color:#2a2a2a;

letter-spacing:normal;

line-height: 12pt;

font-size: 10pt;

</style >

<style type=”text/css”>

.onclick{

width:300px;

height:300px;

padding:10px;

}

.image-container{

width:300px;

height:300px;

padding:10px;

}

.extra {

display:;

}

.image-container:hover .extra,

.image-container:focus .extra

.image-container:active .extra

{

display:block;

}

</style>

</head>

<body>

<div leftcontent>

TEXTO

</div>

 

<div rightcontent>

<div onclick>

<div class=”image-container”>

<div class=”extra”>

<a href=”javascript:void(0)”><img src=” http://www.histologia.icb.usp.br/wp-content/uploads/2016/10/6-matrizterrit.jpg ” onmouseover=”this.src=’ http://www.histologia.pro.br/wp-content/uploads/2016/10/6-matrizterritMO.jpg ‘” onmouseout=”this.src=’ http://www.histologia.pro.br/wp-content/uploads/2016/10/6-matrizterrit.jpg ‘” /></a></div>

<p>LEGENDA DA FIGURA </p>

<div onclick=””>Clique sobre a figura para acessar outra imagem.

Clique fora da figura para voltar à imagem anterior</div>

 

</div>

</div>

</body>

</html>