Эффекты с фотографиями

Livandey · July 17, 2011

подскажите пожалуйста, как можно добавить фотографии на страницу (4 штуки), что бы они были наложены друг на друга уголками, когда один раз щелкаешь то фото выходит на передней план перекрывая остальные уголки, когда щелкаешь второй раз, то она увеличивается на свой реальный размер, а когда третий раз то возвращается на свое место? еще очень хочется нежную серую рамочку (как-будто бы тень) при увеличении, с закругленными уголками)))) надеюсь возможного прошу.

я их хочу в #foto положить.

код главной страницы создаваемого сайта:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>cайт</title>
<style type="text/css">
body {
	color: #FFF; /* цвет текста */
	background-color: #FFF; /* цвет фона */
	margin: 0 auto; /* выравниваем макет по центру */
}
#container {
	min-width: 950px; /* минимальная ширина макета */
	max-width: 1310px; /* максимальная ширина макета */
	margin: 0 auto; /* выравниваем макет по центру */
	height: 800px; /* цвет фона */
	z-index: 4; /* позиция */
	background-color: #036;
   }
#logotip {
	min-width: 950px; /* минимальная Ширина макета */
	max-width: 1307px; /* максимальная Ширина макета */
	height: 260px; /* высота */
	background-color: #FFF; /* цвет фона */
	z-index: 1; /* позиция */
	margin: 0 auto; /* выравниваем макет по центру */
	background-image: url(comnex/images/1.jpg); /* изображение */
	background-position: center top; /* положение изображения */
}
#menu {
	margin: 0 auto; /* выравниваем макет по центру */
	width: 925px; /* ширина макета */
	height: 89px; /* высота */
	background-color: #69F; /* цвет фона */
	z-index: 1; /* позиция */
}
#kontent {
	margin: 0 auto; /* выравниваем макет по центру */
	min-width: 950px; /* минимальная ширина макета */
	max-width: 1200px; /* максимальная ширина макета */
	height: 500px; /* высота */
	z-index: 3;
}
#niz {
	margin: 0 auto; /* выравниваем макет по центру */
	width: 300px; /* ширина макета */
	height: 30px; /* высота */
	z-index: 1; /* позиция */
	background-color: #FFF; /* цвет фона */
	color: #000; /* цвет текста */
}
#foto {
	width: 400px; /* ширина макета */
	height: 300px; /* высота */
	z-index: 1; /* позиция */
	background-color: #FF3; /* цвет фона */
	float: right; /* выравнивание справа */
	clear: both;
	margin-top: 30px; /* отступ сверху */
	margin-right: 30px; /* отступ справа */
	margin-bottom: 30px; /* отступ снизу */
	margin-left: 15px; /* отступ слева */
}
#info {
        background-color: #FFCC00;
        color: #000000;
        height: 300px;
        margin: 30px 460px 30px 30px;
}
.fon1{
	background-image: url(comnex/images/%D0%B8%D0%B7/5.jpg);
	background-repeat: repeat-y;
	z-index: 1;
	width: 11px;
}
.fon2{
	background-image: url(comnex/images/%D0%B8%D0%B7/4.jpg);
	background-repeat: no-repeat;
	z-index: 1;
	width: 11px;
}
.fon3{
	background-image: url(comnex/images/%D0%B8%D0%B7/7.jpg);
	background-repeat: no-repeat;
	z-index: 1;
	width: 11px;
}
.fon4{
	background-image: url(comnex/images/%D0%B8%D0%B7/6.jpg);
	background-repeat: no-repeat;
	z-index: 1;
	width: 11px;
}
.fon5{
	background-image: url(comnex/images/%D0%B8%D0%B7/8.jpg);
	background-repeat: no-repeat;
	z-index: 1;
	width: 11px;
}
.fon6{
	background-image: url(comnex/images/%D0%B8%D0%B7/9.jpg);
	background-repeat: no-repeat;
	z-index: 1;
	height: 11px;
	width: 18px;
}
.fon7{
	background-image: url(comnex/images/%D0%B8%D0%B7/10.jpg);
	background-repeat: repeat-x;
	z-index: 1;
	height: 11px;
}
.fon8{
	background-image: url(comnex/images/%D0%B8%D0%B7/11.jpg);
	background-repeat: no-repeat;
	z-index: 1;
	height: 11px;
	width: 18px;
}
</style>
</head>

<body>
<div id="container">
  <div id="kontent">
    <div align="center">
      <table border="0" cellspacing="0" cellpadding="0">
      </table>
      <div id="container2">
        <div id="logotip"></div>
        <div id="kontent2">
          <div align="center">
            <table border="0" cellspacing="0" cellpadding="0">
              <tr>
                <td class="fon2"></td>
                <td> </td>
                <td class="fon3"></td>
              </tr>
              <tr>
                <td class="fon1"></td>
                <td align="right"><div id="menu"></div>
                  <div id="foto"></div>
                  <div id="info">
                    <p>Главная страница</p>
                    этот блок растянется до нужных размеров под вставленную в него информацию и станет нормальный ширины даже при большом формате монитора. </div>
                <td class="fon1"></td>
              </tr>
              <tr>
                <td class="fon4"></td>
                <td> </td>
                <td class="fon5"></td>
              </tr>
            </table>
          </div>
        </div>
        <div id="niz">
          <div align="center">© 2011</div>
        </div>
        <table border="0" cellspacing="0" cellpadding="0">
          <tr>
            <td width="18px" class="fon6"></td>
            <td width="100%" class="fon7"></td>
            <td width="18px" class="fon8"></td>
          </tr>
        </table>
      </div>
      <table border="0" cellspacing="0" cellpadding="0">
        <tr></tr>
      </table>
    </div>
  </div>
</div>
</body>
</html>

Golgi · July 17, 2011

Подсказать? Или сделать?

Если вас интересует уже готовая работа и вы готовы заплатить, то ICQ 3112748 стучитесь.

sigma77 · July 17, 2011

Livandey,

Это можно сделать на js.

Насколько хорошо ты его знаешь?

Sign In

Эффекты с фотографиями

Recommended Posts

Livandey

Link to comment

Share on other sites

Golgi

Link to comment

Share on other sites

sigma77

Link to comment

Share on other sites

Обсуждения

Forums

Important Information