Показать сообщение отдельно
  #5 (permalink)  
Старый 09.03.2013, 17:05
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,219

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

<script type="text/javascript">
function setBigImage(a) {
  var id = a.id;
  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(/#bigpick[^\s]+/img,arr[2]).replace(/#img[^\s]+/img,'#'+id);
}
function First() {
  document.getElementById("img1").click(); //При загрузке стр. кликаем первый
}
</script>

<img id="img1" name="smallimg" src="http://javascript.ru/forum/images/smilies/smile.gif" height="60px" data="p1,style,#bigpick1" onclick="setBigImage(this)" />

<img id="img2"  name="smallimg" src="http://javascript.ru/forum/images/smilies/smile.gif" height="60px"  data="p2,style,#bigpick1" onclick="setBigImage(this)" />


<img id="img3" name="smallimg" src="http://javascript.ru/forum/images/smilies/write.gif" height="60px"  data="p3,style,#bigpick2" onclick="setBigImage(this)" />

<style id="style">
#bigpickNN {
text-align:center;
opacity:1;
filter: alpha(opacity=1);
-webkit-transition:1s;
-moz-transition:1s;
-ms-transition:1s;
-o-transition:1s;
transition:1s;
}
/*Cтиль кликанутого превью*/
#imgNN {
  opacity:1.0;
  border:blue dashed 1px;
}
</style>


<div id="bigpick1">
    <img id = 'bigimg' src = "http://javascript.ru/forum/images/smilies/smile.gif"  height="390px" alt="" onload="First()"/><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>
p2,style,#bigpick1 name=

Последний раз редактировалось Deff, 09.03.2013 в 19:52.
Ответить с цитированием