[Deff]

<style>
p.hid {
 background-color:#C1D3FB;
 position:absolute;
 display:none;
 border:1px solid blue;
 padding:4px 7px;
}
div[id^="bigpick"] {
 position:absolute;
 opacity:0;
}
</style>

<script type="text/javascript">
function setBigImage(a) {
  var arr = a.getAttribute('data').split(',');
  var Parr = document.getElementById(arr[0]).parentNode.getElementsByTagName('p');
  for(var i=0; i<Parr.length;i++){
   if(Parr[i])Parr[i].style.display='none';
  }
  document.getElementById(arr[0]).style.display='block';
  var v=document.getElementById(arr[1])
  v.innerHTML = v.innerHTML.replace(/^[\s\S]*?\{/img,arr[2]+'{');
}
</script>

<label class="MyImg-p" accesskey="2">
<img name="smallimg" src="http://javascript.ru/forum/images/smilies/smile.gif" height="60px" data="p1,style,#bigpick1" onclick="setBigImage(this)" />
</label>

<label class="MyImg-p" accesskey="2">
<img name="smallimg" src="http://javascript.ru/forum/images/smilies/smile.gif" height="60px"  data="p2,style,#bigpick1" onclick="setBigImage(this)" />
</label>


<label class="MyImg-p" accesskey="2">
<img name="smallimg" src="http://javascript.ru/forum/images/smilies/write.gif" height="60px"  data="p3,style,#bigpick2" onclick="setBigImage(this)" />
</label>

<style id="style">
#bigpick {
text-align:center;
opacity:1;
filter: alpha(opacity=1);
-webkit-transition:1s;
-moz-transition:1s;
-ms-transition:1s;
-o-transition:1s;
transition:1s;
}
</style>


<div id="bigpick1">
    <img id = 'bigimg' src = "http://javascript.ru/forum/images/smilies/smile.gif"  height="390px" alt="" /><br />
    <div id="commentary">
<p class="hid" id="p1">ЗДЕСЬ НУЖНЫЙ ТЕКСТ 1 11111</p>
<p class="hid" id="p2">ЗДЕСЬ НУЖНЫЙ ТЕКСТ 2  2222</p>
    </div>

</div>
<div id="bigpick2">
    <img id = 'bigimg' src = "http://javascript.ru/forum/images/smilies/write.gif"  height="390px" alt="" /><br />
    <div id="commentary">
<p class="hid" id="p3">ЗДЕСЬ НУЖНЫЙ ТЕКСТ3 3333</p>
    </div>
</div>

p1http://javascript.ru/forum/images/smilies/smile.gifbr /