Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Скрипт, при наведении на ссылку открывает 4 картинки (https://javascript.ru/forum/dom-window/31274-skript-pri-navedenii-na-ssylku-otkryvaet-4-kartinki.html)

Игорек 01.09.2012 00:19
Скрипт, при наведении на ссылку открывает 4 картинки
 
здраствуйте)
не могу разобраться со скриптом, задействованном на этом сайте:
http://www.fotodiva.ru/
прямо по центру четыре кнопки, при наведении на каждую вылетает 4 фотографии в разные стороны. Не могу даже повторить тоже самое, где-то косяк. Может вы поможете с нуля разобраться,буду благодарен.)
заранее спасибо)

Deff 01.09.2012 12:13
Игорек,
Ну ежеели без развижки списка меню - можно делать чисто css
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Форумы</title>

</head>
<body style="padding:110px;width:100%;">


<style type="text/css">
.item {
  z-index:25;
  margin-left:137px;
  padding:0;
  background:#000;
  width:137px;
  height:117px;
  display:inline-block;
  position:relative;
}

.item .link{
  z-index:25;
  margin:0 auto;
  position:absolute;
  background:#000;
  text-align:center;
  display:block;
  width:137px;
  height:117px;
  line-height:109px;
  color:#909090;
}
.item .link:hover{
  background:url(http://www.fotodiva.ru/images/pg/menu/current.png) no-repeat center;
}
.item img{
  z-index:-5;
  top:0;
  left:0;
  position:absolute;
 transition-duration: 0.4s;
  -webkit-transition-duration: 0.4s;
  -moz-transition-duration: 0.4s;
  -o-transition-duration: 0.4s;
  -ms-transition-duration: 0.4s;/* IE9+ */
}
.item img{
  position:absolute;
}
.item:hover img.pos_l{
  top: 0px;
  left: -138px;
}
.item:hover img.pos_2{
  top:  -118px;
  left: 0px;
}
.item:hover img.pos_3{
  top:  118px;
  left: 0px;
}
.item:hover img.pos_4{
  top: 0px;
  left: 138px;
}
</style>


<div id="item_1" class="item">
<a href="/gallery/" class="link">Фотогалерея</a>
<img class="photo pos_l" src="http://www.fotodiva.ru/images/2/1277899211.jpg"/>
<img class="photo pos_2" src="http://www.fotodiva.ru/images/2/1277889753.jpg"/>
<img class="photo pos_3" src="http://www.fotodiva.ru/images/2/1277723402.jpg"/>
<img class="photo pos_4" src="http://www.fotodiva.ru/images/2/1277889612.jpg"/>
</div>



</body>
</html>

Игорек 01.09.2012 18:36
Deff,
спасибо,разобрался, но все равно еще одна проблема остается - как расположить кнопки по центру сайта?

Deff 01.09.2012 18:42 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Форумы</title>

</head>
<body style="width:100%;">


<style type="text/css">
.item {
  z-index:25;
*!*
  left:50%;
  margin-left:-68px;
*/!*
  padding:0;
  background:#000;
  width:137px;
  height:117px;
  display:inline-block;
  position:relative;
}

.item .link{
  z-index:25;
  margin:0 auto;
  position:absolute;
  background:#000;
  text-align:center;
  display:block;
  width:137px;
  height:117px;
  line-height:109px;
  color:#909090;
}
.item .link:hover{
  background:url(http://www.fotodiva.ru/images/pg/menu/current.png) no-repeat center;
}
.item img{
  z-index:-5;
  top:0;
  left:0;
  position:absolute;
 transition-duration: 0.4s;
  -webkit-transition-duration: 0.4s;
  -moz-transition-duration: 0.4s;
  -o-transition-duration: 0.4s;
  -ms-transition-duration: 0.4s;/* IE9+ */
}
.item img{
  position:absolute;
}
.item:hover img.pos_l{
  top: 0px;
  left: -138px;
}
.item:hover img.pos_2{
  top:  -118px;
  left: 0px;
}
.item:hover img.pos_3{
  top:  118px;
  left: 0px;
}
.item:hover img.pos_4{
  top: 0px;
  left: 138px;
}
</style>


<div id="item_1" class="item">
<a href="/gallery/" class="link">Фотогалерея</a>
<img class="photo pos_l" src="http://www.fotodiva.ru/images/2/1277899211.jpg"/>
<img class="photo pos_2" src="http://www.fotodiva.ru/images/2/1277889753.jpg"/>
<img class="photo pos_3" src="http://www.fotodiva.ru/images/2/1277723402.jpg"/>
<img class="photo pos_4" src="http://www.fotodiva.ru/images/2/1277889612.jpg"/>
</div>



</body>
</html>

margin-left: -1/2ширины блока (137px)

Игорек 01.09.2012 19:08
Deff,
у меня 5 таких кнопок, и они таким образом выравниваются в центре по левой в сторону правого края.
вот код:
@CHARSET "UTF-8";

html {
	height: 100%;
	width: 100%;
}

body {
	margin: 0px;
	height: 100%;
	width: 100%;
	font-family: Tahoma, Verdana, Arial; 
	background: #181818;
	text-align: center;
	color: #8f8f8f;
	font-size: 12px;
}

img {
	border: 0px;
}

a {
	color: #8f8f8f;
	font-family: Tahoma, Verdana, Arial; 
	font-size: 12px;
}

.item {
        left:100%;
        margin-left:0px;
}

a:hover {
	font-family: Tahoma, Verdana, Arial; 
	font-size: 12px;
	color: #FFF;
	text-decoration: none;
}

#body {
	position: relative;
	height: 100%;
	background: url(/images/pg/glow-top.jpg) 120px 0px no-repeat;
}

#title_main {
	position: relative;
	top: 30px;
	margin-left: 63px;
	margin-right: 63px;
	overflow: hidden;
}

#title_main h2, #title_main h1 {
	margin: 0px;
	padding: 0px;
}

#title_main h1 {
	width: 497px;
	margin-top: 20px;
	margin-left: 123px;
	margin-right: 123px;
}

#body, #footer {
	margin: auto;
	width: 870px;
}

#wraper {
	position: relative;
	overflow: hidden;
	display: table;
	width: 100%;
	height: 400px;
}

#container {
	display: table-cell;
}

#menu {
	position: relative;
	margin-top: 150px;
	margin-left: 0px;
	margin-right: 0px;
	width: 965px;
	height: 117px;
}

#menu .photo, #menu .link, #menu .item, #menu #empty {
	
        width: 137px;
	height: 117px;
}

#menu .item, #menu #empty  {
	position: relative;
	display: inline;
	float: left;
	margin: 0px 0px 0px 1px;
}

#menu .photo {
	position: absolute;
	top: 0px;
	left: 0px;
	z-index: 1;
	background: #716a60;
}

#menu .link {
	display: block;
	position: relative;
	overflow: hidden;
	font-size: 12px;
	z-index: 2;
	background: #313131 url(/images/pg/menu/bg.gif) repeat-x;
	color: #909090;
	text-align: center;
	padding-top: 50px;
	height: 67px;
	text-decoration: none;
	font-family: tahoma,verdana,arial; 
}

#menu a.link:hover {
	background: #de8b2e url(/images/pg/menu/current.png) no-repeat;
	color: #FFF;
}

#footer {
	position: relative;
	height: 75px;
	width: 870px;
	margin-top: 20px;
	margin-bottom: 0px;
	margin-left: 0px;
	margin-right: 0px;
	padding: 0px;
	text-align: left;
	line-height: 13px;
	font-size: 11px;
	z-index: 2;
}


#footer .doted {
	height: 15px;
	float: left;
	width: 100%;
	background: url(/images/pg/doted.gif) center left repeat-x;
	margin-top: 5px;
	margin-bottom: 5px;
}

#footer .links {
	height: 15px;
	float: left;
	width: 100%;
	text-align:center;
}

#footer .menu {
	margin: 3px 0px 0px 0px;
	padding: 0px;
	overflow: hidden;
	height: 15px;
	width: 580px;
}

#footer .menu .item {
	margin: 0px 0px 0px 0px;
	list-style: none;
	float: left;
	border-left: 1px solid #8f8f8f;
	padding: 0px 4px;
	overflow: hidden;
	line-height: 12px;
}

#footer .menu .link {
	position: relative;
	top: -2px;
	color: #8f8f8f;
}

#footer .menu .link:hover {
	color: #FFF;
	text-decoration: none;
}

#footer .menu .first {
	margin-left: -5px;
}

#footer .text {
	float: left;
	width: 100%;
	margin-top: 5px;
	margin-bottom: 0px;
	margin-left: 0px;
	margin-right: 0px;
	padding: 0px;
}
h1 {font-size:14px;}
h2 {font-size:12px;}
h3 {font-size:12px;}

Deff 01.09.2012 19:41
Цитата:
Сообщение от Игорек
у меня 5 таких кнопок, и они таким образом выравниваются в центре по левой в сторону правого края.
вот код:
Ну тады в обрамлении всех пяти кнопок ставите
text-align:center;
А само обрамление выравниваете по-центру - и лучше дать ссыль на страницу - поправлю

Игорек 01.09.2012 20:39
Deff,
вот код главной:
<html>
<head>

<title>Natasha Zamuraeva</title>
<link rel="stylesheet" href="link.css" />
<script language="JavaScript" type="text/javascript" src="link_js.js"></script>
</head>

<body>

<div id="wraper">
		<div id="container">
			<div id="menu">
				<div id="empty">&nbsp;</div>
				<div id="item_1" class="item">
					<a href="/gallery/" class="link">Фотогалерея</a>
					<img class="photo pos_l" src="/images/1.jpg">
					<img class="photo pos_t" src="/images/2.jpg">
					<img class="photo pos_b" src="/images/3.jpg">
					<img class="photo pos_r" src="/images/4.jpg">
				</div>
				<div id="item_2" class="item">
					<a href="/about/" class="link">Об авторе</a>
					<img class="photo pos_l" src="/images/2/1277724383.jpg">
					<img class="photo pos_t" src="/images/2/1277724262.jpg">
					<img class="photo pos_b" src="/images/2/1277724776.jpg">
					<img class="photo pos_r" src="/images/2/1277724548.jpg">
				</div>
				<div id="item_7" class="item">
					<a href="/forum/" class="link">Свадебный форум</a>
					<img class="photo pos_l" src="/images/2/1277724793.jpg">
					<img class="photo pos_t" src="/images/2/1277726079.jpg">
					<img class="photo pos_b" src="/images/2/1277726167.jpg">
					<img class="photo pos_r" src="/images/2/1277725948.jpg">
				</div>
				<div id="item_8" class="item">
					<a href="/contacts/" class="link">Контакты</a>
					<img class="photo pos_l" src="/images/2/1277724935.jpg">
					<img class="photo pos_t" src="/images/2/1277725075.jpg">
					<img class="photo pos_b" src="/images/2/1277725219.jpg">
					<img class="photo pos_r" src="/images/2/1277725329.jpg">
				</div>
                                <div id="item_9" class="item">
					<a href="/about/" class="link">Об авторе</a>
					<img class="photo pos_l" src="/images/2/1277724383.jpg">
					<img class="photo pos_t" src="/images/2/1277724262.jpg">
					<img class="photo pos_b" src="/images/2/1277724776.jpg">
					<img class="photo pos_r" src="/images/2/1277724548.jpg">
				</div>
			</div>
		</div>
	</div>


</body></html>

Deff 01.09.2012 22:01
Игорек,
Ну возможно так :
<html>
<head>

<title>Natasha Zamuraeva</title>
<style type="text/css">
body,#wraper{
 width:1000px;

}
#wraper,
#container,
#menu {
  background:#000;
  text-align:center;
  margin:0 auto;
}
.item {
  z-index:25;
  padding:0;
  background:transparent;
  width:137px;
  height:117px;
  display:inline-block;
  position:relative;
 transition-duration: 0.3s;
  -webkit-transition-duration:  0.3s;
  -moz-transition-duration: 0.3s;
  -o-transition-duration:  0.3s;
  -ms-transition-duration:  0.3s;/* IE9+ */
}
.item:hover {
  margin-right:137px;
  margin-left:137px;
}
.item .link{
  z-index:25;
  margin:0 auto;
  position:absolute;
  background:#000;
  text-align:center;
  display:block;
  width:137px;
  height:117px;
  line-height:109px;
  color:#909090;
}
.item:hover  .link{
  background:url(http://www.fotodiva.ru/images/pg/menu/current.png) no-repeat center;
}
.item img{
  z-index:-5;
  top:0;
  left:0;
  position:absolute;
 transition-duration: 0.4s;
  -webkit-transition-duration: 0.4s;
  -moz-transition-duration: 0.4s;
  -o-transition-duration: 0.4s;
  -ms-transition-duration: 0.4s;/* IE9+ */
}
.item img{
  position:absolute;
}
.item:hover img.pos_l{
  top: 0px;
  left: -138px;
}
.item:hover img.pos_2{
  top:  -118px;
  left: 0px;
}
.item:hover img.pos_3{
  top:  118px;
  left: 0px;
}
.item:hover img.pos_4{
  top: 0px;
  left: 138px;
}
</style>
<script language="JavaScript" type="text/javascript" src="link_js.js"></script>
</head>

<body>

<div id="wraper">
		<div id="container">
			<div id="menu">
				<div id="empty">&nbsp;</div>

				<div id="item_1" class="item">
					<a href="/gallery/" class="link">Фотогалерея</a>
					<img class="photo pos_l" src="http://www.fotodiva.ru/images/2/1277899211.jpg"/>
					<img class="photo pos_2" src="http://www.fotodiva.ru/images/2/1277889753.jpg"/>
					<img class="photo pos_3" src="http://www.fotodiva.ru/images/2/1277723402.jpg"/>
					<img class="photo pos_4" src="http://www.fotodiva.ru/images/2/1277889612.jpg"/>
				</div>

				<div id="item_1" class="item">
					<a href="/about/" class="link">Об авторе 1</a>
					<img class="photo pos_l" src="http://www.fotodiva.ru/images/2/1277899211.jpg"/>
					<img class="photo pos_2" src="http://www.fotodiva.ru/images/2/1277889753.jpg"/>
					<img class="photo pos_3" src="http://www.fotodiva.ru/images/2/1277723402.jpg"/>
					<img class="photo pos_4" src="http://www.fotodiva.ru/images/2/1277889612.jpg"/>
				</div>

				<div id="item_1" class="item">
					<a href="/forum/" class="link">Свадебный форум</a>
					<img class="photo pos_l" src="http://www.fotodiva.ru/images/2/1277899211.jpg"/>
					<img class="photo pos_2" src="http://www.fotodiva.ru/images/2/1277889753.jpg"/>
					<img class="photo pos_3" src="http://www.fotodiva.ru/images/2/1277723402.jpg"/>
					<img class="photo pos_4" src="http://www.fotodiva.ru/images/2/1277889612.jpg"/>
				</div>

				<div id="item_1" class="item">
					<a href="/contacts/" class="link">Контакты</a>
					<img class="photo pos_l" src="http://www.fotodiva.ru/images/2/1277899211.jpg"/>
					<img class="photo pos_2" src="http://www.fotodiva.ru/images/2/1277889753.jpg"/>
					<img class="photo pos_3" src="http://www.fotodiva.ru/images/2/1277723402.jpg"/>
					<img class="photo pos_4" src="http://www.fotodiva.ru/images/2/1277889612.jpg"/>
				</div>

				<div id="item_1" class="item">
					<a href="/about/" class="link">Об авторе</a>
					<img class="photo pos_l" src="http://www.fotodiva.ru/images/2/1277899211.jpg"/>
					<img class="photo pos_2" src="http://www.fotodiva.ru/images/2/1277889753.jpg"/>
					<img class="photo pos_3" src="http://www.fotodiva.ru/images/2/1277723402.jpg"/>
					<img class="photo pos_4" src="http://www.fotodiva.ru/images/2/1277889612.jpg"/>
				</div>

			</div>
		</div>
	</div>
</div>

</body>
</html>


Часовой пояс GMT +3, время: 04:45.