Александр Якимов

обновления информации 31 марта 2021 г.
Поделиться:

Примеры:

HTML
  
03.02.2018

Пример: Как сделать текст поверх картинки (на текст переход по гиперссылке на фото слайдер).          

<div style="position: relative; left: 20px; top: 70px; width: 500px">
<h2 class="style5"><img alt="" src="img/Info.png" width="48" height="48" />
<a href="img/mc21/index.html">ПОСМОТРЕТЬ ФОТОГАЛЕРЕЮ</a></h2>
</div><img alt="" src="img/7.jpg" width="650" height="366" />

Выглядит это так

ПОСМОТРЕТЬ ФОТОГАЛЕРЕЮ

04.02.2018

Пример: Как сделать всплывающую подсказку.  //скачать исходники //                 вернуться назад

Выглядит это так  mail: Помощь Моя почта yakimov-aa@yandex.ru

HTML ****************************************************************
 /////////////////Это дополнительный <style type="text/css">. Вставить перед основным.
<style type="text/ rgba(0, 0, 0, 0.1);
font-family: Calibri, Tahoma, Geneva, sans-serif;
position: absolute;
left: 1em;
top: 2em;
z-index: 99;
margin-left: 0;
width: 250px;
}
.tooltip:hover img {
border: 0;
margin: -10px 0 0 -55px;
float: left;
position: absolute;
}
.tooltip:hover em {
font-family: Candara, Tahoma, Geneva, sans-serif;
font-size: 1.2em;
font-weight: bold;
display: block;
padding: 0.2em 0 0.6em 0;
}
</style>
///////////////////////////// на web страничке на текст mail
<a class="tooltip" href="#">mail:<span class="custom help">
<img src="img/Help.png" alt="Помощь" height="48" width="48" />
<em>Моя почта</em> yakimov-aa@yandex.ru </span></a>
 CSS  ***********************************************************
.help-tip{
position: absolute;
top: 18px;
right: 18px;
text-align: center;
background-color: #006699;
border-radius: 50%;
width: 24px;
height: 24px;
font-size: 14px;
line-height: 26px;
cursor: default;
}
.help-tip:before{
content: "?";
font-weight: bold;
color: #fff;
}
.help-tip p{
display: none;
text-align: left;
background-color: #1e2021;
padding: 1px;
width: 300px;
position: absolute;
border-radius: 3px;
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
right: -4px;
color: #fff;
font-size: 1px;
line-height: 1.4;
}
.help-tip:hover p{
display: block;
transform-origin: 100% 0%;
-webkit-animation: fadeIn 0.3s ease-in-out;
animation: fadeIn 0.3s ease-in-out;
}
.help-tip p:before{
position: absolute;
content: "";
width: 0;
height: 0;
border: 6px solid transparent;
border-bottom-color: #1e2021;
right: 10px;
top: -12px;
}

Пример: Как загрузить фильм размещенный на Вашем сайте                                   вернуться назад

07.02.2018
 HTML
<center>
<video width="680" height="540" controls="">
<source src="vid/2017t.mov">
</source> </video>
</center>
Выглядит это так:

Пример: Как загрузить mp3 и прослушать в плеере на Вашем сайте.                               вернуться назад

09.02.2018
 HTML
 <audio controls>
<source src="muz/m3.mp3" type="audio/mpeg">
</audio>
Выглядит это так:



Видео пример как записать с интернета любой музыкальный фрагмент и вставить на свой сайт.

Пример: Как загрузить swf  и посмотреть флешь анимацию.                                             вернуться назад

10.02.2018
 HTML
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" width="455" height="256" id="ythitel" align="">
<param name="movie" value="anim/moy3.swf" />
<param name="quality" value="high" />
<embed src="anim/moy3.swf" quality="high" width="455" height="256" name="ythitel" align="" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer">
</embed>
</object>
Как это выглядит:  Как создать анимацию расскажу в разделе Macromedia Flash MX

Пример: Как сделать  боковую панель меню                                             вернуться назад

02.03.2018
Код HTML
<div id="leftnav1">
<h2><span lang="ru">&#1052;&#1077;&#1085;&#1102;</span></h2>
<hr />
<ul id="leftnavmenu">
<li><a href="https://www.youtube.com/channel/UCYg17zZp5Kpxc2DgctKkb_Q?view_as=subscriber">YOUTUBE</a></li>
<li><a href="">Pascal</a></li>
<li><a href="">Delphi</a></li>
<li><a href="">Visual Basic</a></li>
<li><a href="">HTML</a></li>
<li><a href="">PHP</a></li>
<li><a href="">Excel</a></li>
<li><a href="">Macromedia Flash MX</a></li>
</ul>
</div>
Код CSS
#leftnav1 {
float : left;
width : 200px;
margin : 0;
padding : 1em;
}
#leftnav p {
margin : 0 0 1em 0;
}
#leftnavmenu {
list-style : none;
float : left;
width : 200px;
margin : 30px 0 30px 0;
padding : 0;
font-size : 0.9em;
}
#leftnavmenu ul {
list-style : none;
width : 150px;
margin : 0 0 20px 0;
padding : 0;
font-size : 1.1em;
}
#leftnavmenu li {
margin-bottom : 2px;
}
#leftnavmenu li a {
font-weight : bold;
height : 20px;
text-decoration : none;
color : #505050;
background : #eaeaea url(img/up.gif) no-repeat left center;
display : block;
padding : 4px 0 0 30px;
border-left : 0 solid #8fb8cc;
}
#leftnavmenu li a:hover {
background : #8fb8cc url(img/right.gif) no-repeat left center;
color : #fff;
border-left : 0 solid #003366;
}
Как это выглядит:   скачать стрелки  (img/right.gif      img/up.gif)


Яндекс.Метрика