Скрипт блока показывающего 2сменяющих друг друга изображения Скрипт блока показывающего 2сменяющих друг друга изображения - Архив
Скрипт блока показывающего 2сменяющих друг друга изображения
DownLoad_Free

Скрипт блока показывающего 2сменяющих друг друга изображения - Архив

Нашли ошибку или
хотите что-то сообщить -
жмите Ctr+Enter Система Orphus



    [Ленточный вид форума] [Поиск] [RSS]



Страница 1 из 11
Архив » История мировых и локальных событий » История развития сайта » Скрипт блока показывающего 2сменяющих друг друга изображения (при движение мышки по картинке)
Скрипт блока показывающего 2сменяющих друг друга изображения
Дата: Воскресенье, 22.01.2012, 22:29 | Сообщение # 1
Группа: Администраторы
Сообщений: 1524


Скрипт блока показывающий 2 сменяющих друг друга изображения при движение мышки по картинке на примере Олимпийских игр в Инсбруке 1964 и 2012 года
----------------------------------------------------------------------------------------------------------------------------------

<html>
<head>
<title></title>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link href="innsbruck_files/css.css" rel="stylesheet" type="text/css">

<link rel="stylesheet" type="text/css" href="innsbruck_files/compiled2.css" media="screen">
<link rel="stylesheet" type="text/css" href="innsbruck_files/sprite.css" media="screen">

<script type="text/javascript" src="innsbruck_files/compiled2.js"></script>
</head>

<body>

<div id="_atssh" style="visibility: hidden; height: 1px; width: 1px; position: absolute; z-index: 100000;">
<iframe src="innsbruck_files/sh72.htm" style="height: 1px; width: 1px; position: absolute; z-index: 100000; border: 0pt none; left: 0pt; top: 0pt;"
title="AddThis utility frame" id="_atssh402"></iframe></div>

<table width="100%"><tr><td width="200" align="center">Left-field</td><td>

<div class="widget ucompare"> <! -- блок со списком меняющихся картинок и описания к ним -->

<a style="opacity: 1;" class="prev"><img src="innsbruck_files/previous.png"></a>
<ul>
<li style="opacity: 0; z-index: 0;" class="">
<h2>Then and now - Women's Speed Skating</h2>
<div style="overflow: hidden; position: relative;" class="compare">
<img style="display: none;" src="innsbruck_files/0ae84ce3dd1bacb67e8953cbc1790e28_768x.jpg" alt="1976 Women's 1500M Speed Skating" height="718" width="768">
<img style="display: none;" src="innsbruck_files/f3d40b6b75d2851f4571da5540d18102_768x.jpg" alt="2012 Women's Speed Skating" height="718" width="768">
<div style="width: 745.5px; height: 718px; background-image: url("/stlocal/cache/smarty/cache/_cached_images/0ae84ce3dd1bacb67e8953cbc1790e28_768x.jpg");" class="uc-mask"></div><div style="width: 768px; height: 718px; background-image: url("/stlocal/cache/smarty/cache/_cached_images/f3d40b6b75d2851f4571da5540d18102_768x.jpg");" class="uc-bg"></div><div style="display: block;" class="uc-caption">1976 Women's 1500M Speed Skating</div></div>
</li>
<li class="" style="opacity: 0; display: list-item; z-index: 0;">
<h2>Then and now - TV Cameraman</h2>
<div style="overflow: hidden; position: relative;" class="compare">
<img style="display: none;" src="innsbruck_files/55f54ce539bc100ae66331dcefe978cf_768x.jpg" alt="1964 ABC TV Cameraman" height="612" width="768">
<img style="display: none;" src="innsbruck_files/223c9ed1e66bc4ea6053299269db294c_768x.jpg" alt="2012 ORF Cameraman" height="612" width="768">
<div style="width: 743.5px; height: 612px; background-image: url("/stlocal/cache/smarty/cache/_cached_images/55f54ce539bc100ae66331dcefe978cf_768x.jpg");" class="uc-mask"></div><div style="width: 768px; height: 612px; background-image: url("/stlocal/cache/smarty/cache/_cached_images/223c9ed1e66bc4ea6053299269db294c_768x.jpg");" class="uc-bg"></div><div style="display: block;" class="uc-caption">1964 ABC TV Cameraman</div></div>
</li>
<li class="" style="opacity: 0; display: list-item; z-index: 0;">
<h2>Then and Now - Speed Skating</h2>
<div style="overflow: hidden; position: relative;" class="compare">
<img style="display: none;" src="innsbruck_files/9ff16fecdd7156cef5357caf04065434_768x.jpg" alt="1964 Men's 500m Speed Skating" height="578" width="768">
<img style="display: none;" src="innsbruck_files/cd66d1f4c173f12d111d9134872fb6eb_768x.jpg" alt="2012 Men's Speed Skating" height="578" width="768">
<div style="width: 716.5px; height: 578px; background-image: url("/stlocal/cache/smarty/cache/_cached_images/9ff16fecdd7156cef5357caf04065434_768x.jpg");" class="uc-mask"></div><div style="width: 768px; height: 578px; background-image: url("/stlocal/cache/smarty/cache/_cached_images/cd66d1f4c173f12d111d9134872fb6eb_768x.jpg");" class="uc-bg"></div><div style="display: block;" class="uc-caption">1964 Men's 500m Speed Skating</div></div>
</li>
<li class="" style="opacity: 0; display: list-item; z-index: 0;">
<h2>Then and now - Ski Jumping</h2>
<div style="overflow: hidden; position: relative;" class="compare">
<img style="display: none;" src="innsbruck_files/90aaf1971126c23d4b119ecca89066e0_768x.jpg" alt="1964 Ski Jumping Bergisel Stadium" height="530" width="768">
<img style="display: none;" src="innsbruck_files/669e99d61580a0ebb326ef81b7fb4d5c_768x.jpg" alt="2012 Ski Jumping Seefeld" height="530" width="768">
<div style="width: 738.5px; height: 530px; background-image: url("/stlocal/cache/smarty/cache/_cached_images/90aaf1971126c23d4b119ecca89066e0_768x.jpg");" class="uc-mask"></div><div style="width: 768px; height: 530px; background-image: url("/stlocal/cache/smarty/cache/_cached_images/669e99d61580a0ebb326ef81b7fb4d5c_768x.jpg");" class="uc-bg"></div><div style="display: block;" class="uc-caption">1964 Ski Jumping Bergisel Stadium</div></div>
</li>
<li class="" style="opacity: 0; display: list-item; z-index: 0;">
<h2>Then and now - Speed Skater</h2>
<div style="overflow: hidden; position: relative;" class="compare">
<img style="display: none;" src="innsbruck_files/313d214945430107d3b62f5d51d24213_768x.jpg" alt="Russian Speed Skater 1964" height="617" width="768">
<img style="display: none;" src="innsbruck_files/639a4d2b682fbf0b00fefbf73edfc472_768x.jpg" alt="2012" height="617" width="768">
<div style="width: 744.5px; height: 617px; background-image: url("/stlocal/cache/smarty/cache/_cached_images/313d214945430107d3b62f5d51d24213_768x.jpg");" class="uc-mask"></div><div style="width: 768px; height: 617px; background-image: url("/stlocal/cache/smarty/cache/_cached_images/639a4d2b682fbf0b00fefbf73edfc472_768x.jpg");" class="uc-bg"></div><div style="display: block;" class="uc-caption">Russian Speed Skater 1964</div></div>
</li>
<li class="" style="opacity: 0; display: list-item; z-index: 0;">
<h2>Then and now - Austrian Army Soldiers</h2>
<div style="overflow: hidden; position: relative;" class="compare">
<img style="display: none;" src="innsbruck_files/5f182cda77aa891f8bf17b8081842220_768x.jpg" alt="Austrian Army Soldiers with baskets to carry snow 1964" height="629" width="768">
<img style="display: none;" src="innsbruck_files/9b6e4bde73c3a21ccae53dfdd8409309_768x.jpg" alt="2012" height="629" width="768">
<div style="width: 725.5px; height: 629px; background-image: url("/stlocal/cache/smarty/cache/_cached_images/5f182cda77aa891f8bf17b8081842220_768x.jpg");" class="uc-mask"></div><div style="width: 768px; height: 629px; background-image: url("/stlocal/cache/smarty/cache/_cached_images/9b6e4bde73c3a21ccae53dfdd8409309_768x.jpg");" class="uc-bg"></div><div style="display: block;" class="uc-caption">Austrian Army Soldiers with baskets to carry snow 1964</div></div>
</li>
<li class="" style="opacity: 0; display: list-item; z-index: 0;">
<h2>Then and now - Pairs Figure Skating</h2>
<div style="overflow: hidden; position: relative;" class="compare">
<img style="display: none;" src="innsbruck_files/4c195416b56e18a09ae496cbf4885bf5_768x.jpg" alt="1976" height="511" width="768">
<img style="display: none;" src="innsbruck_files/e80f3f11573ab3896e2771322506fb92_768x.jpg" alt="2012" height="511" width="768">
<div style="width: 668.5px; height: 511px; background-image: url("/stlocal/cache/smarty/cache/_cached_images/4c195416b56e18a09ae496cbf4885bf5_768x.jpg");" class="uc-mask"></div><div style="width: 768px; height: 511px; background-image: url("/stlocal/cache/smarty/cache/_cached_images/e80f3f11573ab3896e2771322506fb92_768x.jpg");" class="uc-bg"></div><div style="display: block;" class="uc-caption">1976</div></div>
</li>
<li class="" style="opacity: 0; display: list-item; z-index: 0;">
<h2>Then and Now - Luge</h2>
<div style="overflow: hidden; position: relative;" class="compare">
<img style="display: none;" src="innsbruck_files/5dc962a0b96a95a20a9d5496f9df8c91_768x.jpg" alt="1964" height="499" width="768">
<img style="display: none;" src="innsbruck_files/b80c2987eb97be4cafe90cd5dc283e0f_768x.jpg" alt="2012" height="499" width="768">
<div style="width: 745.5px; height: 499px; background-image: url("/stlocal/cache/smarty/cache/_cached_images/5dc962a0b96a95a20a9d5496f9df8c91_768x.jpg");" class="uc-mask"></div><div style="width: 768px; height: 499px; background-image: url("/stlocal/cache/smarty/cache/_cached_images/b80c2987eb97be4cafe90cd5dc283e0f_768x.jpg");" class="uc-bg"></div><div style="display: block;" class="uc-caption">1964</div></div>
</li>
<li class="current" style="opacity: 1; display: list-item; z-index: 100;">
<h2>Then and Now - Bergisel Stadium</h2>
<div style="overflow: hidden; position: relative;" class="compare">
<img style="display: none;" src="innsbruck_files/nastia1.jpg" alt="1964" height="497" width="768">
<img style="display: none;" src="innsbruck_files/nastia3.jpg" alt="2012" height="497" width="768">
<div style="width: 132.5px; height: 497px; background-image: url("/stlocal/cache/smarty/cache/_cached_images/381283e91b20a4aec62c6d3aae545978_768x.jpg");" class="uc-mask"></div><div style="width: 768px; height: 497px; background-image: url("/stlocal/cache/smarty/cache/_cached_images/98cdd237390e5c18297d2016051dff75_768x.jpg");" class="uc-bg"></div><div style="display: block;" class="uc-caption">2012</div></div>
</li>
<li>
<h2>Then and now - Ice Hockey final</h2>
<div style="overflow: hidden; position: relative;" class="compare">
<img style="display: none;" src="innsbruck_files/f56e2599f22820ca929da19b2eee16c6_768x.jpg" alt="1964 Gold Medal Hockey" height="607" width="768">
<img style="display: none;" src="innsbruck_files/33a87d15a2e080640093ba7f365a891f_768x.jpg" alt="2012 Gold Medal Hockey" height="607" width="768">
<div style="width: 394px; height: 607px; background-image: url("/stlocal/cache/smarty/cache/_cached_images/f56e2599f22820ca929da19b2eee16c6_768x.jpg");" class="uc-mask"></div><div style="width: 768px; height: 607px; background-image: url("/stlocal/cache/smarty/cache/_cached_images/33a87d15a2e080640093ba7f365a891f_768x.jpg");" class="uc-bg"></div><div style="display: block;" class="uc-caption">1964 Gold Medal Hockey</div></div>
</li>
</ul>
<a style="opacity: 1;" class="next"><img src="innsbruck_files/next.png"></a>
</div>

</td><td width="200" align="center">Right-field</td></tr></table>
</body></html>

-----------------------------------------------------------------------------------------

Рабочий пример: http://kachay.ucoz.org/view2picscroll/v2p.html

-----------------------------------------------------------------------------------------
Содержимое папки innsbruck_files/ лежит в папке kachay.ucoz.org/view2picscroll/
 
Архив » История мировых и локальных событий » История развития сайта » Скрипт блока показывающего 2сменяющих друг друга изображения (при движение мышки по картинке)
Страница 1 из 11
Поиск:


Copyright kachay.ucoz.org © 2008-2016Хостинг от uCoz
^ Наверх ^
Пригодилось!