Как сделать, чтобы картинка менялась при наведении на нее курсора мыши?
Заменить одну картинку на другую при наведении на неё курсора мыши.
Решение
Смена одной картинки на другую при наведении на неё курсора мыши называется эффектом перекатывания. Обычно для создания эффекта перекатывания применяется JavaScript, но в большинстве случаев вполне достаточно и CSS.
Псевдокласс :hover
Вначале разберём, как делается собственно сам эффект. Для этой цели используется псевдокласс :hover , он добавляется к желаемому селектору. Этот псевдокласс определяет стиль элемента, когда на него наводится курсор мыши, что нам как раз и требуется. Сразу отметим, что в браузере Internet Explorer версии 6 и ниже :hover работает только со ссылками, тогда как другие браузеры понимают :hover и для других элементов. Так что для универсальности придётся помещать изображение внутрь контейнера . Сам рисунок добавляется и меняется с помощью стилевого свойства background . Алгоритм действий следующий.
- Готовятся два изображения одинакового размера, одно для исходного вида, а второе — для его замены при эффекте перекатывания.
- Исходная картинка добавляется в качестве фонового рисунка к селектору A через стилевое свойство background со значением url(URI) , здесь URI — путь к графическому файлу.
- Присоединяем псевдокласс к селектору A и снова включаем свойство background , но в качестве значения указываем замещающее изображение.
- Чтобы ссылка была по размеру картинки, её следует превратить в блочный элемент с помощью свойства display со значением block , а также задать высоту и ширину ссылки.
На рис. 1 приведены два изображения: исходное (рис. 1а) и замещающее (рис. 1б).
а 
б
Рис. 1. Картинки для создания эффекта перекатывания
Остаётся собрать весь код воедино, как показано в примере 1. Чтобы ссылка не вела на какой-то определенный файл, что в данном случае излишне, добавим «заглушку» в виде символа решетки (#) к атрибуту href тега .
Пример 1. Использование псевдокласса :hover
HTML5 CSS 2.1 IE Cr Op Sa Fx
Эффект перекатывания
Приведённый способ хотя и прост в реализации, но имеет определённый недостаток. Поскольку второй рисунок загружается только при наведении курсора на ссылку, то отображение картинки происходит с некоторой паузой. Для устранения этой задержки можно использовать не два изображения, а лишь одно.
Эффект перекатывания с одним рисунком
Казалось бы имеется противоречие, ведь эффект перекатывания состоит в замене одного рисунка на другой, как же тогда обойтись одной картинкой? На самом деле изображений будет два (рис. 2), но храниться они будут в одном графическом файле.
Рис. 2. Изображение с двумя картинками
Смена одного рисунка на другой происходит сдвигом изображения по вертикали за счёт использования универсального свойства background или background-position , как показано в примере 2.
Пример 2. Изменение положения рисунка
HTML5 CSS 2.1 IE Cr Op Sa Fx
Эффект перекатывания
Для селектора A устанавливается фоновое изображение через свойство background , ширина ( width ) совпадает с рисунком, а высота (свойство height ) равна половине высоты изображения. В итоге первоначально должна отображаться зеленая вкладка целиком.
При наведении на ссылку фон смещается вверх на половину высоты картинки (40 пикселов) с помощью background-position и становится видна оранжевая вкладка.
Что может делать JavaScript?
В этом случае JavaScript изменит атрибут
SRC (источника) изображения.
Turn on the light Turn off the light
Курсы javascript
Так вот у меня не получилось сделать чтобы при нажатии на пункты этой менюхи картинка переключалась на нужную. И не получилось сделать кнопку «предыдущая картинка»
Помогите дописать, а то я уже не знаю как быть
Последний раз редактировалось festerod, 01.02.2011 в 01:32 .
01.02.2011, 09:39
Интересующийся
Регистрация: 01.02.2011
Сообщений: 19
ничего не понятно
01.02.2011, 09:44
Регистрация: 19.08.2010
Сообщений: 14,092
festerod, сделай полный тестовый пример а не куски какие-то.
01.02.2011, 14:59
Интересующийся
Регистрация: 25.01.2011
Сообщений: 15
Вот изваял. На самом деле я тоже совсем недавно начал изучать JS и единственное на что меня хватило так это на:
Собственно, функции вроде как понятно что делают.
Смена картинок с плавным переходом между ними
Уважаемые! Весь интернет перерыл мне нужен скрипт как на 3-4 изображения, только переход был плавный с заменой на другую фотку. Я так думаю должно указываться параметр прозрачности. Пожалуйста помогите!
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
Ответы с готовыми решениями:
Создать графический файл с плавным переходом цвета (градиентом)
Напишите функцию gradient(color), создающую графический файл с плавным переходом цвета. Файл должен.
Как в MDI форме фон сделать с плавным переходом цвета
Как в MDI форме фон сделать с плавным переходом цвета? Например в обычной форме я использую.
Задержка :hover после отвода мыши с плавным переходом background
Здравствуйте! У меня есть div с классом, пусть будет .box1 его размеры скажем 200px на 200px, цвет.
Загрузка нескольких картинок из папки и реализовать возможность переключения между ними
Добрый день. Хочу для начала сделать следующее: В окне у меня расположен ListBox. Кликая на.
Регистрация: 10.05.2012
Сообщений: 236
Сообщение от letniyag 
Уважаемые! Весь интернет перерыл мне нужен скрипт как на 3-4 изображения, только переход был плавный с заменой на другую фотку. Я так думаю должно указываться параметр прозрачности. Пожалуйста помогите!
Кликните здесь для просмотра всего текста
1 2 3 4 5 6 7
script src="http://jquery.malsup.com/cycle2/jquery.cycle2.js">/script> div id="slider"> img src="http://i46.tinypic.com/29oocgm.jpg" /> img src="http://i48.tinypic.com/o602sz.jpg" /> img src="http://i50.tinypic.com/qntoxc.jpg" /> /div>
1 2 3 4 5 6 7 8
#slider { position:relative; } #slider img { width:100%; display:block; }
1 2 3 4 5 6 7 8
$(document).ready(function() { $('#slider').cycle({ fx: 'fade', rev: 1, }); });
Администратор
11995 / 5332 / 268
Регистрация: 05.04.2011
Сообщений: 14,086
Записей в блоге: 2
sheila, помимо демонстрации кода на стороннем ресурсе по правилам форума ОБЯЗАТЕЛЬНО заливать исходный код на форум. Вот в данный момент сайт jsfiddle.net недоступен
Регистрация: 07.09.2012
Сообщений: 71
Сообщение от letniyag
Уважаемые! Весь интернет перерыл мне нужен скрипт как на 3-4 изображения, только переход был плавный с заменой на другую фотку. Я так думаю должно указываться параметр прозрачности. Пожалуйста помогите!
какой именно плавный переход нужен? что то типа растворения? на чем нужен? на чистом CSS на скриптах?
может, что то типа вот такого подойдет: slideshow-autoadvance-jquery ?? исходник во вложении — autoadvance.zip
Вложения
| autoadvance.zip (273.0 Кб, 564 просмотров) |
| sourcesSlider.zip (710.0 Кб, 580 просмотров) |
Регистрация: 23.02.2013
Сообщений: 34
Сообщение от BiOpSIhoS
какой именно плавный переход нужен? что то типа растворения? на чем нужен? на чистом CSS на скриптах?
может, что то типа вот такого подойдет: slideshow-autoadvance-jquery ?? исходник во вложении — autoadvance.zip
Дело в том что у меня сайт с бесплатным конструктором сайта io.ua и я не могу туда загружать стили. На данном сайте я могу писать только код html, загружать изображения. Загружать файлы и докуметны не могу.
Примерно так на главной странице, http://masterphoto.com.ua/#!/ , http://www.burdov.com/#!/, только тут вспышка между переходами в белое или в темное ,мне важно чтобы он не просто циклически менялся а растворялся или с затуханием. Жду Ваших вариантов))))
Примерно где так но с плавным переходом картинки, меняется прозрачность к нолю когда появляется другая картинка
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30
html> head> title>Автоматическая циклическая смена картинок/title> /head> script language="JavaScript"> i=0; img_a=new Array() img_h=new Array() img_a[0]=new Image() img_a[1]=new Image() img_a[2]=new Image() img_a[0].src="https://www.cyberforum.ru/images/images1.jpeg" img_a[1].src="https://www.cyberforum.ru/images/images2.jpeg" img_a[2].src="https://www.cyberforum.ru/images/images3.jpeg" function img_b() < document.images[0].src=img_a[i].src document.images[0].src=img_a[i].src document.images[0].src=img_a[i].src i++ if(i>2) i=0; setTimeout("img_b()", 3000) > /script> /head> body onLoad=img_b()> img src="https://www.cyberforum.ru/images/images1.jpeg">br> /body> /html>
Регистрация: 10.05.2012
Сообщений: 236
заливаю код
1 2 3 4 5 6 7
script src="http://jquery.malsup.com/cycle2/jquery.cycle2.js">/script> div id="slider"> img src="http://i46.tinypic.com/29oocgm.jpg" /> img src="http://i48.tinypic.com/o602sz.jpg" /> img src="http://i50.tinypic.com/qntoxc.jpg" /> /div>
1 2 3 4 5 6 7 8
#slider { position:relative; } #slider img { width:100%; display:block; }
1 2 3 4 5 6 7 8
$(document).ready(function() { $('#slider').cycle({ fx: 'fade', rev: 1, }); });
Регистрация: 23.02.2013
Сообщений: 34
Сообщение от sheila
заливаю код
1 2 3 4 5 6 7
script src="http://jquery.malsup.com/cycle2/jquery.cycle2.js">/script> div id="slider"> img src="http://i46.tinypic.com/29oocgm.jpg" /> img src="http://i48.tinypic.com/o602sz.jpg" /> img src="http://i50.tinypic.com/qntoxc.jpg" /> /div>
1 2 3 4 5 6 7 8
#slider { position:relative; } #slider img { width:100%; display:block; }
1 2 3 4 5 6 7 8
$(document).ready(function() { $('#slider').cycle({ fx: 'fade', rev: 1, }); });
Подскажите, куда я вставлю код Код CSS и Код JavaScript ? Или будет достаточно код html ?
Регистрация: 10.05.2012
Сообщений: 236
script src="http://jquery.malsup.com/cycle2/jquery.cycle2.js">script>
между тегами
код CSS в документ стилей, код html соответственно в документ html
ДЕМО вроде заработало, из него понятно, что куда
Регистрация: 26.01.2013
Сообщений: 300
Делал сайт на курсовик, там я использовал яваскрипт:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76
script type='text/javascript'> var total_pics_num = 8; // количество изображений var interval = 2600; // задержка между изображениями var time_out = 0.3; // задержка смены изображений var i = 0; var timeout; var opacity = 100; function fade_to_next() < opacity--; var k = i + 1; var image_now = 'image_' + i; if (i == total_pics_num) k = 1; var image_next = 'image_' + k; document.getElementById(image_now).style.filter = 'alpha(opacity='+ opacity +')'; document.getElementById(image_next).style.filter = 'alpha(opacity='+ (100-opacity) +')'; document.getElementById(image_now).style.opacity = opacity/100; document.getElementById(image_next).style.opacity = (100-opacity)/100; timeout = setTimeout("fade_to_next()", time_out); if (opacity==1) < opacity = 100; clearTimeout(timeout); >> setInterval ( function() < i++; if (i >total_pics_num) i=1; fade_to_next(); >, interval ); //]]> /script> div style = 'height: 100px;'> img src='img\a.jpg'/> img src='img\and.jpg' alt = 'Фото 1' id="image_1" style="position: absolute;" /> img src='img\ap.jpg' alt = 'Фото 2' id="image_2" style="opacity: 0; filter: alpha(opacity=0); position: absolute;" /> img src='img\bb.jpg' alt = 'Фото 3' id="image_3" style="opacity: 0; filter: alpha(opacity=0); position: absolute;" /> img src='img\palm.jpg' alt = 'Фото 4' id="image_4" style="opacity: 0; filter: alpha(opacity=0); position: absolute;" /> img src='img\bada.png' alt = 'Фото 5' id="image_5" style="opacity: 0; filter: alpha(opacity=0); position: absolute;" /> img src='img\poc.png' alt = 'Фото 6' id="image_6" style="opacity: 0; filter: alpha(opacity=0); position: absolute;" /> img src='img\symb.png' alt = 'Фото 7' id="image_7" style="opacity: 0; filter: alpha(opacity=0); position: absolute;" /> img src='img\win.gif' alt = 'Фото 8' id="image_8" style="opacity: 0; filter: alpha(opacity=0); position: absolute;" />
Добавлено через 0,666 секунды
прямо в HTML вставил
Регистрация: 10.05.2012
Сообщений: 236
Добавлено через 1 минуту
модный слайдер, но сложный
Регистрация: 23.02.2013
Сообщений: 34
Вот так выглядит мой редактор, может мой сайт чем то ограничен? В нём можно писать код CSS, код JavaScript ? Или только html ? А то не чего не получается (((.
Регистрация: 23.02.2013
Сообщений: 34
Сообщение от Venom33
Делал сайт на курсовик, там я использовал яваскрипт:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76
script type='text/javascript'> var total_pics_num = 8; // количество изображений var interval = 2600; // задержка между изображениями var time_out = 0.3; // задержка смены изображений var i = 0; var timeout; var opacity = 100; function fade_to_next() < opacity--; var k = i + 1; var image_now = 'image_' + i; if (i == total_pics_num) k = 1; var image_next = 'image_' + k; document.getElementById(image_now).style.filter = 'alpha(opacity='+ opacity +')'; document.getElementById(image_next).style.filter = 'alpha(opacity='+ (100-opacity) +')'; document.getElementById(image_now).style.opacity = opacity/100; document.getElementById(image_next).style.opacity = (100-opacity)/100; timeout = setTimeout("fade_to_next()", time_out); if (opacity==1) < opacity = 100; clearTimeout(timeout); >> setInterval ( function() < i++; if (i >total_pics_num) i=1; fade_to_next(); >, interval ); //]]> /script> div style = 'height: 100px;'> img src='img\a.jpg'/> img src='img\and.jpg' alt = 'Фото 1' id="image_1" style="position: absolute;" /> img src='img\ap.jpg' alt = 'Фото 2' id="image_2" style="opacity: 0; filter: alpha(opacity=0); position: absolute;" /> img src='img\bb.jpg' alt = 'Фото 3' id="image_3" style="opacity: 0; filter: alpha(opacity=0); position: absolute;" /> img src='img\palm.jpg' alt = 'Фото 4' id="image_4" style="opacity: 0; filter: alpha(opacity=0); position: absolute;" /> img src='img\bada.png' alt = 'Фото 5' id="image_5" style="opacity: 0; filter: alpha(opacity=0); position: absolute;" /> img src='img\poc.png' alt = 'Фото 6' id="image_6" style="opacity: 0; filter: alpha(opacity=0); position: absolute;" /> img src='img\symb.png' alt = 'Фото 7' id="image_7" style="opacity: 0; filter: alpha(opacity=0); position: absolute;" /> img src='img\win.gif' alt = 'Фото 8' id="image_8" style="opacity: 0; filter: alpha(opacity=0); position: absolute;" />
Добавлено через 0,666 секунды
прямо в HTML вставил
Я прописал ссылки на изображения и вставил весь код, неработает ! Вот так выглядит в скрине. Помогите! Вот код.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82
iframe scrolling="no" frameborder="0" src="http://tvforsite.ru/onlinetv.php?playerid=21807" width="640px" height="393px"> Your browser doesn not support floating frames! /iframe> script type='text/javascript' src='http://avtobeton.narod.ru/radio.js'>/script>br>a href="http://www.myworlds.ru/vebmaster/kod-onlayn-radio-ustanovlenniy-na-sobstvennom-sayte-t41.html">/a>/center> script type='text/javascript'> var total_pics_num = 8; // количество изображений var interval = 2600; // задержка между изображениями var time_out = 0.3; // задержка смены изображений var i = 0; var timeout; var opacity = 100; function fade_to_next() < opacity--; var k = i + 1; var image_now = 'image_' + i; if (i == total_pics_num) k = 1; var image_next = 'image_' + k; document.getElementById(image_now).style.filter = 'alpha(opacity='+ opacity +')'; document.getElementById(image_next).style.filter = 'alpha(opacity='+ (100-opacity) +')'; document.getElementById(image_now).style.opacity = opacity/100; document.getElementById(image_next).style.opacity = (100-opacity)/100; timeout = setTimeout("fade_to_next()", time_out); if (opacity==1) < opacity = 100; clearTimeout(timeout); >> setInterval ( function() < i++; if (i >total_pics_num) i=1; fade_to_next(); >, interval ); //]]> /script> div style = 'height: 100px;'> img src='imga.jpg'/> img src='imgand.jpg' alt = 'http://io.ua/23398081m.jpg' id="image_1" style="position: absolute;" /> img src='imgap.jpg' alt = 'http://io.ua/23397999m.jpg' id="image_2" style="opacity: 0; filter: alpha(opacity=0); position: absolute;" /> img src='imgbb.jpg' alt = 'http://io.ua/23398035m.jpg' id="image_3" style="opacity: 0; filter: alpha(opacity=0); position: absolute;" /> img src='imgpalm.jpg' alt = 'http://io.ua/23397999m.jpg' id="image_4" style="opacity: 0; filter: alpha(opacity=0); position: absolute;" /> img src='imgbada.png' alt = 'http://io.ua/23398035m.jpg' id="image_5" style="opacity: 0; filter: alpha(opacity=0); position: absolute;" /> img src='imgpoc.png' alt = 'http://io.ua/23398001m.jpg' id="image_6" style="opacity: 0; filter: alpha(opacity=0); position: absolute;" /> img src='imgsymb.png' alt = 'http://io.ua/23398068m.jpg' id="image_7" style="opacity: 0; filter: alpha(opacity=0); position: absolute;" /> img src='imgwin.gif' alt = 'http://io.ua/23398003m.jpg' id="image_8" style="opacity: 0; filter: alpha(opacity=0); position: absolute;" />
Почетный модератор
16843 / 6722 / 880
Регистрация: 12.06.2012
Сообщений: 19,967
пути к изображениям неверные
Регистрация: 23.02.2013
Сообщений: 34
Сообщение от KOPOJI
пути к изображениям неверные
Можно пример кода, я потом заменю ссылки на свои.
Почетный модератор
16843 / 6722 / 880
Регистрация: 12.06.2012
Сообщений: 19,967
letniyag, я не знаю где у вас картинки лежат. Я лишь вижу, что в браузере не отображаются картинки (хром, я так полагаю?). Проверьте пути к картинкам — либо они неверные, либо сам сайт настроен неверно (в .htaccess/httpd.conf)
Регистрация: 23.02.2013
Сообщений: 34
Сообщение от KOPOJI
letniyag, я не знаю где у вас картинки лежат. Я лишь вижу, что в браузере не отображаются картинки (хром, я так полагаю?). Проверьте пути к картинкам — либо они неверные, либо сам сайт настроен неверно (в .htaccess/httpd.conf)
Пути прописаны на 67,69,71,73,75,77,79,80, если их отдельно вбить у меня хром то картинка откроется вот ссылка http://io.ua/23398081m.jpg
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80
iframe scrolling="no" frameborder="0" src="http://tvforsite.ru/onlinetv.php?playerid=21807" width="640px" height= script type='text/javascript'> var total_pics_num = 8; // количество изображений var interval = 2600; // задержка между изображениями var time_out = 0.3; // задержка смены изображений var i = 0; var timeout; var opacity = 100; function fade_to_next() < opacity--; var k = i + 1; var image_now = 'image_' + i; if (i == total_pics_num) k = 1; var image_next = 'image_' + k; document.getElementById(image_now).style.filter = 'alpha(opacity='+ opacity +')'; document.getElementById(image_next).style.filter = 'alpha(opacity='+ (100-opacity) +')'; document.getElementById(image_now).style.opacity = opacity/100; document.getElementById(image_next).style.opacity = (100-opacity)/100; timeout = setTimeout("fade_to_next()", time_out); if (opacity==1) < opacity = 100; clearTimeout(timeout); >> setInterval ( function() < i++; if (i >total_pics_num) i=1; fade_to_next(); >, interval ); //]]> /script> div style = 'height: 100px;'> img src='imga.jpg'/> img src='imgand.jpg' alt = 'http://io.ua/23398081m.jpg' id="image_1" style="position: absolute;" /> img src='imgap.jpg' alt = 'http://io.ua/23397999m.jpg' id="image_2" style="opacity: 0; filter: alpha(opacity=0); position: absolute;" /> img src='imgbb.jpg' alt = 'http://io.ua/23398035m.jpg' id="image_3" style="opacity: 0; filter: alpha(opacity=0); position: absolute;" /> img src='imgpalm.jpg' alt = 'http://io.ua/23397999m.jpg' id="image_4" style="opacity: 0; filter: alpha(opacity=0); position: absolute;" /> img src='imgbada.png' alt = 'http://io.ua/23398035m.jpg' id="image_5" style="opacity: 0; filter: alpha(opacity=0); position: absolute;" /> img src='imgpoc.png' alt = 'http://io.ua/23398001m.jpg' id="image_6" style="opacity: 0; filter: alpha(opacity=0); position: absolute;" /> img src='imgsymb.png' alt = 'http://io.ua/23398068m.jpg' id="image_7" style="opacity: 0; filter: alpha(opacity=0); position: absolute;" /> img src='imgwin.gif' alt = 'http://io.ua/23398003m.jpg' id="image_8" style="opacity: 0; filter: alpha(opacity=0); position: absolute;" />
Добавлено через 10 минут
Не выходит помогите! Вот мой сайт свадебного фотографа http://antongidrovich.io.ua/, мне нужно чтобы на главной менялась фотография плавно на другую.Я фотограф а не програмист, поэтому всё делал своими силами))) Просьба помочь решить проблему!
Регистрация: 26.01.2013
Сообщений: 300
letniyag,
Весь код одной страницы index:
Кликните здесь для просмотра всего текста
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188
html xmlns="http://. " xml:lang="ru" lang="ru"> head> link rel="stylesheet" href="css/style.css" type="text/css" media="screen, projection, tv" /> link rel="stylesheet" href="css/style-print.css" type="text/css" media="print" /> link rel="shortcut icon" href="favicon.ico" type="image/x-icon" /> title>Мобильные операционные системы | Главная/title> /head> body> div id="wrapper"> div class="title"> div class="title-top"> div class="title-left"> div class="title-right"> div class="title-bottom"> div class="title-top-left"> div class="title-bottom-left"> div class="title-top-right"> div class="title-bottom-right"> h1>a href="/" title="Не кликабелен">Мобильные span>операционные/span> системы/a>/h1> /div> /div> /div> /div> /div> /div> /div> /div> /div> hr class="noscreen" /> div class="content"> div class="column-left"> h3>a href="C:\Users\Дмитрий\Desktop\Для института\ИТ\Kurs. rab. IT\index.html">color="#C0C0C0">На главную/FONT>/a>/h3> a href="#skip-menu" class="hidden">Skip menu/a> ul class="menu"> li>a href="#">a href="C:\Users\Дмитрий\Desktop\Для института\ИТ\Kurs. rab. IT\and.html">Android/a>/a>/li> li>a href="#">a href="C:\Users\Дмитрий\Desktop\Для института\ИТ\Kurs. rab. IT\win.html">Windows Mobile/a>/a>/li> li>a href="#">a href="C:\Users\Дмитрий\Desktop\Для института\ИТ\Kurs. rab. IT\app.html">iPhone OS/a>/a>/li> li>a href="#">a href="C:\Users\Дмитрий\Desktop\Для института\ИТ\Kurs. rab. IT\sym.html">Symbian OS/a>/a>/li> li>a href="#">a href="C:\Users\Дмитрий\Desktop\Для института\ИТ\Kurs. rab. IT\palm.html">Palm OS/a>/a>/li> li>a href="#">a href="C:\Users\Дмитрий\Desktop\Для института\ИТ\Kurs. rab. IT\bb.html">BlackBerry OS/a>/a>/li> li>a href="#">a href="C:\Users\Дмитрий\Desktop\Для института\ИТ\Kurs. rab. IT\poc.html">Microsoft Pocket PC/a>/a>/li> li class="last">a href="#">a href="C:\Users\Дмитрий\Desktop\Для института\ИТ\Kurs. rab. IT\bada.html">Bada OS/a>/a>/li> /ul> /div> div id="skip-menu">/div> div class="column-right"> div class="box"> div class="box-top">/div> div class="box-in"> h2>Вступление/h2> p>Жизнь современного человека практически немыслима без мобильных девайсов. Их качество в большей степени зависит от аппаратных характеристик, а вот удобство пользования в большей степени зависит от мобильной операционной системы. Поэтому очень важно подобрать не только хорошие аппаратные характеристики, нужно еще выбрать операционную систему, с которой Вам удобно будет работать. И только просуммировав эти параметры, Вы сможете выбрать для себя оптимальное мобильное устройство. br> script type='text/javascript'> var total_pics_num = 8; // количество изображений var interval = 2600; // задержка между изображениями var time_out = 0.3; // задержка смены изображений var i = 0; var timeout; var opacity = 100; function fade_to_next() < opacity--; var k = i + 1; var image_now = 'image_' + i; if (i == total_pics_num) k = 1; var image_next = 'image_' + k; document.getElementById(image_now).style.filter = 'alpha(opacity='+ opacity +')'; document.getElementById(image_next).style.filter = 'alpha(opacity='+ (100-opacity) +')'; document.getElementById(image_now).style.opacity = opacity/100; document.getElementById(image_next).style.opacity = (100-opacity)/100; timeout = setTimeout("fade_to_next()", time_out); if (opacity==1) < opacity = 100; clearTimeout(timeout); >> setInterval ( function() < i++; if (i >total_pics_num) i=1; fade_to_next(); >, interval ); //]]> /script> div style = 'height: 100px;'> img src='img\a.jpg'/> img src='img\and.jpg' alt = 'Фото 1' id="image_1" style="position: absolute;" /> img src='img\ap.jpg' alt = 'Фото 2' id="image_2" style="opacity: 0; filter: alpha(opacity=0); position: absolute;" /> img src='img\bb.jpg' alt = 'Фото 3' id="image_3" style="opacity: 0; filter: alpha(opacity=0); position: absolute;" /> img src='img\palm.jpg' alt = 'Фото 4' id="image_4" style="opacity: 0; filter: alpha(opacity=0); position: absolute;" /> img src='img\bada.png' alt = 'Фото 5' id="image_5" style="opacity: 0; filter: alpha(opacity=0); position: absolute;" /> img src='img\poc.png' alt = 'Фото 6' id="image_6" style="opacity: 0; filter: alpha(opacity=0); position: absolute;" /> img src='img\symb.png' alt = 'Фото 7' id="image_7" style="opacity: 0; filter: alpha(opacity=0); position: absolute;" /> img src='img\win.gif' alt = 'Фото 8' id="image_8" style="opacity: 0; filter: alpha(opacity=0); position: absolute;" /> /div> /br> h2>На этом сайте Вы найдёте самые распространенные операционные системы для мобильных устройств:/h2> ul class="main-list"> li>Androidbr>(Linux-системы)/br>/li> li>Windows Mobile/li> li>iPhone OS/li> li>Symbian OS/li> li>Palm OS/li> li>BlackBerry OS/li> li>Microsoft Pocket PC/li> li>Bada OS/li> p>Чтобы узнать подробнее, кликните на соответствующую ссылку слева/p> /ul> /div> /div> div class="box-bottom"> hr class="noscreen" /> div class="footer-info-left">a href="/">Dmitriy Parskiy/a>, 2011./div> div class="footer-info-right">a href="http://www.vkontakte.ru/">venom_33/a>/div> /div> /div> div class="cleaner"> /div> /div> /div> /body> /html>
Регистрация: 23.02.2013
Сообщений: 34
Сообщение от Venom33
letniyag,
Весь код одной страницы index:
Кликните здесь для просмотра всего текста
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188
html xmlns="http://. " xml:lang="ru" lang="ru"> head> link rel="stylesheet" href="css/style.css" type="text/css" media="screen, projection, tv" /> link rel="stylesheet" href="css/style-print.css" type="text/css" media="print" /> link rel="shortcut icon" href="favicon.ico" type="image/x-icon" /> title>Мобильные операционные системы | Главная/title> /head> body> div id="wrapper"> div class="title"> div class="title-top"> div class="title-left"> div class="title-right"> div class="title-bottom"> div class="title-top-left"> div class="title-bottom-left"> div class="title-top-right"> div class="title-bottom-right"> h1>a href="/" title="Не кликабелен">Мобильные span>операционные/span> системы/a>/h1> /div> /div> /div> /div> /div> /div> /div> /div> /div> hr class="noscreen" /> div class="content"> div class="column-left"> h3>a href="C:\Users\Дмитрий\Desktop\Для института\ИТ\Kurs. rab. IT\index.html">color="#C0C0C0">На главную/FONT>/a>/h3> a href="#skip-menu" class="hidden">Skip menu/a> ul class="menu"> li>a href="#">a href="C:\Users\Дмитрий\Desktop\Для института\ИТ\Kurs. rab. IT\and.html">Android/a>/a>/li> li>a href="#">a href="C:\Users\Дмитрий\Desktop\Для института\ИТ\Kurs. rab. IT\win.html">Windows Mobile/a>/a>/li> li>a href="#">a href="C:\Users\Дмитрий\Desktop\Для института\ИТ\Kurs. rab. IT\app.html">iPhone OS/a>/a>/li> li>a href="#">a href="C:\Users\Дмитрий\Desktop\Для института\ИТ\Kurs. rab. IT\sym.html">Symbian OS/a>/a>/li> li>a href="#">a href="C:\Users\Дмитрий\Desktop\Для института\ИТ\Kurs. rab. IT\palm.html">Palm OS/a>/a>/li> li>a href="#">a href="C:\Users\Дмитрий\Desktop\Для института\ИТ\Kurs. rab. IT\bb.html">BlackBerry OS/a>/a>/li> li>a href="#">a href="C:\Users\Дмитрий\Desktop\Для института\ИТ\Kurs. rab. IT\poc.html">Microsoft Pocket PC/a>/a>/li> li class="last">a href="#">a href="C:\Users\Дмитрий\Desktop\Для института\ИТ\Kurs. rab. IT\bada.html">Bada OS/a>/a>/li> /ul> /div> div id="skip-menu">/div> div class="column-right"> div class="box"> div class="box-top">/div> div class="box-in"> h2>Вступление/h2> p>Жизнь современного человека практически немыслима без мобильных девайсов. Их качество в большей степени зависит от аппаратных характеристик, а вот удобство пользования в большей степени зависит от мобильной операционной системы. Поэтому очень важно подобрать не только хорошие аппаратные характеристики, нужно еще выбрать операционную систему, с которой Вам удобно будет работать. И только просуммировав эти параметры, Вы сможете выбрать для себя оптимальное мобильное устройство. br> script type='text/javascript'> var total_pics_num = 8; // количество изображений var interval = 2600; // задержка между изображениями var time_out = 0.3; // задержка смены изображений var i = 0; var timeout; var opacity = 100; function fade_to_next() < opacity--; var k = i + 1; var image_now = 'image_' + i; if (i == total_pics_num) k = 1; var image_next = 'image_' + k; document.getElementById(image_now).style.filter = 'alpha(opacity='+ opacity +')'; document.getElementById(image_next).style.filter = 'alpha(opacity='+ (100-opacity) +')'; document.getElementById(image_now).style.opacity = opacity/100; document.getElementById(image_next).style.opacity = (100-opacity)/100; timeout = setTimeout("fade_to_next()", time_out); if (opacity==1) < opacity = 100; clearTimeout(timeout); >> setInterval ( function() < i++; if (i >total_pics_num) i=1; fade_to_next(); >, interval ); //]]> /script> div style = 'height: 100px;'> img src='img\a.jpg'/> img src='img\and.jpg' alt = 'Фото 1' id="image_1" style="position: absolute;" /> img src='img\ap.jpg' alt = 'Фото 2' id="image_2" style="opacity: 0; filter: alpha(opacity=0); position: absolute;" /> img src='img\bb.jpg' alt = 'Фото 3' id="image_3" style="opacity: 0; filter: alpha(opacity=0); position: absolute;" /> img src='img\palm.jpg' alt = 'Фото 4' id="image_4" style="opacity: 0; filter: alpha(opacity=0); position: absolute;" /> img src='img\bada.png' alt = 'Фото 5' id="image_5" style="opacity: 0; filter: alpha(opacity=0); position: absolute;" /> img src='img\poc.png' alt = 'Фото 6' id="image_6" style="opacity: 0; filter: alpha(opacity=0); position: absolute;" /> img src='img\symb.png' alt = 'Фото 7' id="image_7" style="opacity: 0; filter: alpha(opacity=0); position: absolute;" /> img src='img\win.gif' alt = 'Фото 8' id="image_8" style="opacity: 0; filter: alpha(opacity=0); position: absolute;" /> /div> /br> h2>На этом сайте Вы найдёте самые распространенные операционные системы для мобильных устройств:/h2> ul class="main-list"> li>Androidbr>(Linux-системы)/br>/li> li>Windows Mobile/li> li>iPhone OS/li> li>Symbian OS/li> li>Palm OS/li> li>BlackBerry OS/li> li>Microsoft Pocket PC/li> li>Bada OS/li> p>Чтобы узнать подробнее, кликните на соответствующую ссылку слева/p> /ul> /div> /div> div class="box-bottom"> hr class="noscreen" /> div class="footer-info-left">a href="/">Dmitriy Parskiy/a>, 2011./div> div class="footer-info-right">a href="http://www.vkontakte.ru/">venom_33/a>/div> /div> /div> div class="cleaner"> /div> /div> /div> /body> /html>
Вот скрин прикрепляю, что из этого вышло! Блин, можно что то толковое написать а то получилось реклама со ссылками. Все таки надеюсь на толковый код и ПОМОЩЬ!