Программирование - это просто
Advertisement
Главная arrow Web-программирование arrow Приемы сайтостроения (маленькие хитрости) arrow Склеиваем разрезанную картинку. Продолжение-3: другая реализация тех же спецэффектов (div, CSS, html
19.04.2024 г.
Главное меню
Главная
Интернет магазин
Программные продукты
Биржевые роботы
Искусственный интеллект
Математика и информатика
1С:Предприятие
Уроки C#
Уроки Delphi
Уроки программирования
Web-программирование
Дизайн и графика
Компьютер для блондинок
Исходники
Статьи
Платный раздел
Рассказы про компьютеры
Хитрости и секреты
Системный подход
Размышления
Наука для чайников
Друзья сайта
Excel-это не сложно
Все о финансах
.
Склеиваем разрезанную картинку. Продолжение-3: другая реализация тех же спецэффектов (div, CSS, html Печать E-mail
Автор megabax   
03.01.2011 г.
New Page 1

Склеиваем разрезанную картинку. Продолжение-3: другая реализация тех же спецэффектов (div, CSS, html, img, JavaScript)

Картинки к уроку можно скачать здесь.

 

Сегодня мы реализуем спецэффекты прошлого урока немножко по другому. Картинки пусть будут те же самые, мы только изменим файл "index.html":

 

<html>

 

<head>

  <title></title>

      <STYLE TYPE="text/css">

      <!--

      .menu_about,.menu_about1 {

            position:Absolute ;

            left:0;

            top:0;

            width:178;

            height:34;

            background: url('menu_about.PNG') no-repeat;

      }

      .menu_about1 {

            background: url('menu_about1.PNG') no-repeat;

      }

 

      .menu_news,.menu_news1 {

            position:Absolute ;

            left:0;

            top:34;

            width:178;

            height:20;

            background: url('menu_news.PNG') no-repeat;

      }

      .menu_news1 {

            background: url('menu_news1.PNG') no-repeat;

      }

 

      .menu_st_list,.menu_st_list1 {

            position:Absolute ;

            left:0;

            top:50;

            width:178;

            height:20;

            background: url('menu_st_list.PNG') no-repeat;

      }

      .menu_st_list1 {

            background: url('menu_st_list1.PNG') no-repeat;

      }

 

      .menu_cement,.menu_cement1 {

            position:Absolute ;

            left:0;

            top:70;

            width:178;

            height:20;

            background: url('menu_cement.PNG') no-repeat;

      }

      .menu_cement1 {

            background: url('menu_cement1.PNG') no-repeat;

      }

 

      .menu_plitka,.menu_plitka1 {

            position:Absolute ;

            left:0;

            top:90;

            width:178;

            height:20;

            background: url('menu_plitka.PNG') no-repeat;

      }

      .menu_plitka1 {

            background: url('menu_plitka1.PNG') no-repeat;

      }

 

      .menu_profilia,.menu_profilia1 {

            position:Absolute ;

            left:0;

            top:110;

            width:178;

            height:20;

            background: url('menu_profilia.PNG') no-repeat;

      }

      .menu_profilia1 {

            background: url('menu_profilia1.PNG') no-repeat;

      }

 

      .menu_zamki,.menu_zamki1 {

            position:Absolute ;

            left:0;

            top:130;

            width:178;

            height:20;

            background: url('menu_zamki.PNG') no-repeat;

      }

      .menu_zamki1 {

            background: url('menu_zamki1.PNG') no-repeat;

      }

 

      .menu_siding,.menu_siding1 {

            position:Absolute ;

            left:0;

            top:150;

            width:178;

            height:22;

            background: url('menu_siding.PNG') no-repeat;

      }

      .menu_siding1 {

            background: url('menu_siding1.PNG') no-repeat;

      }

 

      .menu_dekor,.menu_dekor1 {

            position:Absolute ;

            left:0;

            top:172;

            width:178;

            height:20;

            background: url('menu_dekor.PNG') no-repeat;

      }

      .menu_dekor1 {

            background: url('menu_dekor1.PNG') no-repeat;

      }

 

      .menu_feedbak,.menu_feedbak1 {

            position:Absolute ;

            left:0;

            top:192;

            width:178;

            height:22;

            background: url('menu_feedbak.PNG') no-repeat;

      }

      .menu_feedbak1 {

            background: url('menu_feedbak1.PNG') no-repeat;

      }

 

      .menu_kontakts,.menu_kontakts1 {

            position:Absolute ;

            left:0;

            top:214;

            width:178;

            height:20;

            background: url('menu_kontakts.PNG') no-repeat;

      }

      .menu_kontakts1 {

            background: url('menu_kontakts1.PNG') no-repeat;

      }

 

      #menu_bottom {

            position:Absolute ;

            left:0;

            top:234;

      }

      #header {

            position:Absolute ;

            left:178;

            top:1;

      }

      #image {

            position:Absolute ;

            left:178;

            top:63;

      }

      -->

      </STYLE>

 

 

</head>

 

<body>

 

<a href="about.html">

      <div class='menu_about' onMouseOver="this.className='menu_about1'" onMouseOut="this.className='menu_about'"></div>

</a>

<a href="news.html">

      <div class='menu_news' onMouseOver="this.className='menu_news1'" onMouseOut="this.className='menu_news'"></div>

</a>

<a href="st_list.html">

      <div class='menu_st_list' onMouseOver="this.className='menu_st_list1'" onMouseOut="this.className='menu_st_list'"></div>

</a>

<a href="cement.html">

      <div class='menu_cement' onMouseOver="this.className='menu_cement1'" onMouseOut="this.className='menu_cement'"></div>

</a>

<a href="plitka.html">

      <div class='menu_plitka' onMouseOver="this.className='menu_plitka1'" onMouseOut="this.className='menu_plitka'"></div>

</a>

<a href="profilia.html">

      <div class='menu_profilia' onMouseOver="this.className='menu_profilia1'" onMouseOut="this.className='menu_profilia'"></div>

</a>

<a href="zamki.html">

      <div class='menu_zamki' onMouseOver="this.className='menu_zamki1'" onMouseOut="this.className='menu_zamki'"></div>

</a>

<a href="siding.html">

      <div class='menu_siding' onMouseOver="this.className='menu_siding1'" onMouseOut="this.className='menu_siding'"></div>

</a>

<a href="dekor.html">

      <div class='menu_dekor' onMouseOver="this.className='menu_dekor1'" onMouseOut="this.className='menu_dekor'"></div>

</a>

<a href="feedbak.html">

      <div class='menu_feedbak' onMouseOver="this.className='menu_feedbak1'" onMouseOut="this.className='menu_feedbak'"></div>

</a>

<a href="kontakts.html">

      <div class='menu_kontakts' onMouseOver="this.className='menu_kontakts1'" onMouseOut="this.className='menu_kontakts'"></div>

</a>

<div id='menu_bottom'>

      <img border="0" src="menu_bottom.PNG">

</div>

<div id='header'>

      <img src="header.PNG">

</div>

<div id='image'>

      <img src="girl.PNG">

</div>

 

</body>

 

</html>

 

В чем разница? В прошлый раз мы JS скриптом меняли картинку. На этот раз меняем класс тэга div. и еще у нас вместо тэга img фоновая картинка, которая заполняет весь div. Изменяя класс, мы меняем и саму фоновую картинку.

Какой способ лучше? Решать вам. Но знайте, это способов запрограммировать один и тот же эффект великое множество. То же самое касается и нашего эффекта. Так что способы его реализации не ограничиваются теми, что я привел в этих уроках.

 

Картинки к уроку можно скачать здесь.

 
Пред. »
 
© 2024 Программирование - это просто
Joomla! - свободное программное обеспечение, распространяемое по лицензии GNU/GPL.
Русская локализация © 2005-2008 Joom.Ru - Русский Дом Joomla!
Design by Mamboteam.com | Powered by Mambobanner.de
Я принимаю Яндекс.Деньги