Страшно подумать, но в июле этого года исполнилось всего 10 лет стандарту HTML 1.0 (который, кстати, так никогда и не был “официально” принят и остался в виде черновика для “внутреннего употребления”). За эти 10 лет HTML прошел очень большой путь, завоевал практически все компьютеры в мире и стал одним из самых известных “компьютерных языков” (все-таки отнести его к языкам программирования рука не поднимается)… И одним из весьма заметных этапов развития HTML стало появление CSS - Cascading Style Sheets или, говоря по-русски, каскадных таблиц стилей.
Дальше »
Прозрачность картинки при наведении на нее курсора мыши через CSS
(3 голосов, средний: 4.67 из 5)
Загрузка ...В этом примере рассказывается о том, что при наведении на картинку курсор мыши, ее прозрачность становилась 80%-ной(чтобы она была потусклее), а на неактивной картинке оставалась 100%-ной. Пример можно посмотреть здесь, не работает в InternetExplorer. Далее следует небольшое описание как это сделать.
Создайте файл css.css и вставьте в него следующий код:
a img:hover {
filter:alpha(opacity=80); ..-opacity:0.8; opacity:0.8; -khtml-opacity:0.8;
}
Затем создайте файл index.html и вставьте в него следующий код
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=window-1251″ />
<title>Прозрачность картинки при наведении на нее курсора мыши через CSS</title>
<link rel=”stylesheet” type=”text/css” href=”css.css” />
</head><body>
<p><a href=”http://flashripper.net/demoblog/” target=”_blank”><img src=”16r.gif” border=”0″/></a></p>
<p><a href=”http://flashripper.net/demoblog/” target=”_blank”><img src=”18r.gif” border=”0″ /></a></p>
<p><a href=”http://flashripper.net/demoblog/” target=”_blank”><img src=”17r.gif” border=”0″ /></a></p>
</body>
</html>
На этом все, теперь вам осталось только вставить свои изображения и наслаждаться полученным результатом.
Дополнительно:
Делаем редирект на Html+JS
(1 голосов, средний: 5 из 5) Загрузка ...Если вам нужно переместить пользователя с одной страницы на другую, то прочитать как это сделать можно в этой статье. Пример выполнения данного скрипта вы можете посмотреть .
Для начала, создайте файл index.htm и вставьте в него следующий код:
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Language” content=”ru”>
<meta http-equiv=”Content-Type” content=”text/html; charset=windows-1251″ />
<title>Редирект</title>
<script type=”text/JavaScript”>
<!–
function MM_goToURL() {
var i, args=MM_goToURL.arguments; document.MM_returnValue = false;
for (i=0; i<(args.length-1); i+=2) eval(args[i]+”.location=’”+args[i+1]+”‘”);
}
//–>
</script>
</head><body onload=”MM_goToURL(’parent’,'http://www.flashripper.net/demoblog/’);return document.MM_returnValue”>
<p>
<img border=”0″ src=”i2.gif” width=”13″ height=”13″ align=”left”><font size=”2″>Подождите,
сейчас вы будете перемещены на страницу блога…</font></p>
</body>
</html>
Теперь вам осталось лишь поменять мой адрес блога на свой адрес, на ту страницу на которую пользователь будет перемешен.
Дополнительно:
Делаем открытие нового окна(popup) с нужным размером с помощью JS+Html
(1 голосов, средний: 5 из 5) Загрузка ...Например, вам нужно вывести информацию об авторских правах или еще что-то, и показать данную информацию надо в маленьком окошечки, которое будет с нужным вам размером. Пример можно посмотреть тут.
Для начала создадим файл index.htm и вставьте в него следующий код:
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=windows-1251″>
<title>popup</title>
<script>
<!–
function newwindow() {
cX=(screen.width-430)/2;
cY=(screen.height-380)/2;
w=window.open(’newwindow.htm’,'_blank’,'width=430,height=380, scrollbars=yes,left=’+cX+’,top=’+cY+’,screenX’+cX+’,screenY=’+cY);
}
–>
</script>
</head><body>
<a href=”javascript:newwindow()”>Новое окошко</a>
</body></html>
Теперь разберём одну строчку:
w=window.open(’newwindow.htm’,'_blank’,'width=430,height=380, scrollbars=yes,left=’+cX+’,top=’+cY+’,screenX’+cX+’,screenY=’+cY);
newwindow.htm - страница, которая будет открыта
_blank - обозначает, что страница будет открыта в новом окне
width=430,height=380 - размер и ширина нового окна
Теперь создадим файл newwindow.htm и вставьте в него следующий код:
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=windows-1251″>
<title>popup</title>
</head><body>
<font size=”2″>Пример нового окошка</font>.<span lang=”en-us”>
<a href=”http://flashripper.net”><font size=”2″>http://flashripper.net</font></a><font size=”2″>
<br>
</font></span>
<font size=”2″>
<br>
<a href=”javascript:close()”>Закрыть окно</a></font>
</body></html>
Вот вроде и все!
Дополнительно:
Прикручиваем LightBox2 на свою страничку
(3 голосов, средний: 5 из 5) Загрузка ...В этой статей я постараюсь описать как можно “прикрутить“ к сайту LightBox v 2.0
Для начало я расскажу, что же такое LightBox и для чего он нужен. Lightbox – простой JS скрипт, отображающий изображения на текущей странице,
на страницу можно поместить уменьшенное изображение, нажав на него открывается красивое окошко, где это изображение будет показано в оригинальном размере,
самое главное это окошко открывается без перезагрузки страницы и работает почти во всех современных браузерах. Взять скрипт и посмотреть демо версию можно .
Теперь разберем какже это чудо встроить в нашу html страничку.
Установка LightBox:
1. Lightbox использует JavaScript библиотеки Prototype Framework и Scriptaculous, нам нужно будет подключить в нашу страничку три файла, для этого вставьте
следующий код в вашу страничку между тэгами <head> и </head>
<script type=”text/javascript” src=”js/prototype.js”></script>
<script type=”text/javascript” src=”js/scriptaculous.js?load=effects”></script>
<script type=”text/javascript” src=”js/lightbox.js”></script>
2. Дальше нам нужно подключить CSS файл, который будет использовать LightBox, для этого вставьте в вашу страничку следующий код, между тэгами <head> и </head>
<link rel=”stylesheet” href=”css/lightbox.css” type=”text/css” media=”screen” />
3. Потом проверьте в файле CSS ссылки на prev.gif next.gif. Также убедитесь в правильности ссылок на loading.gif и close.gif, в файле lightbox.js.
Использование LightBox:
1. Добавляем такую ссылку после тэга<body>, этим кодом мы сделали LightBox для картинки image-1.jpg, таким образом можно подключить и другие картинки. Атрибут title служит
для подписи картинки, его можно и не использовать.
<a href=”images/image-1.jpg” rel=”lightbox” title=”my caption”><img src=” images/image.jpg”></a>
2. Если у вас есть группа превьюшек, которые необходимо сгруппировать, необходимо дополнительно включить в атрибут rel - имя группы в квадратных скобках. Пример:
href=”images/image-1.jpg” rel=”lightbox[roadtrip]“>image #1</a>
<a href=”images/image-2.jpg” rel=”lightbox[roadtrip]“>image #2</a>
<a href=”images/image-3.jpg” rel=”lightbox[roadtrip]“>image #3</a>
Все, надеюсь вы поняли как использовать LightBox на своих страничках. Удачи!
Автор статьи: FlashRipper
Сайт:
E-mail: flashripper@yandex.ru
Красивое меню с помощью JS
(3 голосов, средний: 5 из 5) Загрузка ...
Меню очень красивое с анимацией сделанной на JavaScript. Для начала посмотрите пример данного меню, его можно увидеть здесь: http://flashripper.net/portfolio/menucssjs/
Для создания такого меню, мы будем использовать html файл и js файл
Вот содержимое js файла(назовите файл ocscript.js), т.к содержимое файла слишком большое, лучше скачайте его, взять его можно тут
Затем создайте файл index.html и скопируйте в него следующий код, взять его можно тут.
Готово, теперь проверяйте. Разделы меню можно изменить в файле index.html
Дополнительно:
