Ссылки с формой для описания - Скрипты для uCoz | Делай сайт
Приветствую Вас, Гость! Регистрация
Георгиевская ленточка
Вторник, 06.12.2016
Скрипты для uCoz » Кнопки для сайта uCoz » Ссылки с формой для описания

Аудиоплеер для сайта uCozАудиоплеер с плейлистом для сайта
Видеоплеер для сайта uCozВидеоплеер с плейлистом для сайта
Меню для сайта uCozВертикальное меню для сайта uCoz
Выпадающее меню для сайта uCozГоризонтальное меню для сайта uCoz
Круглое меню для сайта uCozВид материалов для сайта uCoz
Вид материалов Аудио для uCozВид материалов Видео для uCoz
Галерея для сайта uCozГенераторы для сайта uCoz
Контейнер для контентаКнопки для сайта uCoz
Слайдер для сайта uCozСчётчик для сайта uCoz
Часы для сайта uCozТекстовые эффекты
Таблица цветов для сайта uCozЭффекты для сайта uCoz
Эффекты курсораЭффекты увеличения
Мини чат для сайта uCozРадио для сайта uCoz
Скрипты для юКозИгры для сайта uCoz
Окна для сайта uCozИнформеры для сайта uCoz
Флеш и анимации для сайтаКалендарь для сайта uCoz
Мониторинг серверов для ucozСлайдшоу для сайта uCoz



Адаптивный сайт - aTmpl



Ссылки с формой для описания


Делаем ссылки для блока с описанием




Ссылки установленные Вами будут выдавать описание в поле.Все элементы могут иметь дополнительные стили подходящие дизайну Вашего сайта.Элементам скрипта не обязательно находиться в таблице.Предоставленно 2 варианта скрипта,в первом стили для элементов полностью отсутствуют.Во втором варианте применены стили,изменить которые можно по своему усмотрению.Проверьте как работает скрипт используя редактор HTML в нижней части материала.




Код скрипта без стилей оформления

<script>
function linkDisplay(selection) {
if (selection=="1") {
document.form.info.value="Упрощённый способ установить значения для расширенных свойств анимации.";
}
else if(selection=="2") {
document.form.info.value="Упрощённый способ установить значения для расширенных свойств фона.";
}
else if(selection=="3") {
document.form.info.value="Упрощённый способ установить значения для расширенных свойств бордюра.";
}
else if(selection=="4") {document.form.info.value="Свойство добавляет тень границам элемента";
}
else if(selection=="5") {
document.form.info.value="Свойство устанавливает цвет используемому тексу";
}
else if(selection=="6") {
document.form.info.value="Свойство генерирует контент.";
}
}
function moreInfo() {
var page=document.form.go.value;
window.location=page;
}
</script>
<form name=form>
<table border="0">
<tr>
<td><a href="javascript:linkDisplay(1);">animation</a></td>
</tr>
<tr>
<td><a href="javascript:linkDisplay(2);">background</a></td>
</tr>
<tr>
<td><a href="javascript:linkDisplay(3);">border</a></td>
</tr>
<tr>
<td><a href="javascript:linkDisplay(4);">box-shadow</a></td>
</tr>
<tr>
<td><a href="javascript:linkDisplay(5);">color</a></td>
</tr>
<tr>
<td><a href="javascript:linkDisplay(6);">content</a></td>
</tr>
<tr>
<td>
<textarea name=info rows=2 cols=20 wrap=virtual>
Щёлкните на свойство CSS для более подробной информации!
</textarea>
</td></tr>
</table>
</form>


Код скрипта со стилями оформления

<style>
#dsstyle {
background:-webkit-gradient(linear,left top,left bottom,color-stop(rgba(255,255,255,1),0),
color-stop(rgba(246,246,246,1),0.74),color-stop(rgba(237,237,237,1),1));
background:-webkit-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 74%, rgba(237,237,237,1) 100%);
background:-moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 74%, rgba(237,237,237,1) 100%);
background:-o-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 74%, rgba(237,237,237,1) 100%);
background:linear-gradient(top, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 74%, rgba(237,237,237,1) 100%);
filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ededed',GradientType=0 );
-webkit-box-shadow:0px 0px 7px rgba(0,0,0,0.2), 0px 0px 0px 1px rgba(188,188,188,0.1);
-moz-box-shadow:0px 0px 7px rgba(0,0,0,0.2), 0px 0px 0px 1px rgba(188,188,188,0.1);
box-shadow:0px 0px 7px rgba(0,0,0,0.2), 0px 0px 0px 1px rgba(188,188,188,0.1);
}
#dsstyle:hover {
-webkit-box-shadow:0px 0px 9px rgba(0,0,0,0.4),
0px 0px 0px 1px rgba(188,188,188,0.1);
-moz-box-shadow:0px 0px 9px rgba(0,0,0,0.4),
0px 0px 0px 1px rgba(188,188,188,0.1);
box-shadow:0px 0px 9px rgba(0,0,0,0.4),
0px 0px 0px 1px rgba(188,188,188,0.1);}
}
#a-ds-text{
font-size:1em;
color:#71767d;
line-height:16px;
font-weight:bold;
font-family:'Georgia';
text-shadow:1px 1px 2px rgba(255,255,255,0.5);
text-decoration:none;
text-align:center;
}
#a-ds-text:hover{
color:#fff;
text-shadow:0px 1px 1px rgba(0,0,0,0.3);
text-decoration:none;
}
</style>
<script>
function linkDisplay(selection) {
if (selection=="1") {
document.form.info.value="Упрощённый способ установить значения для расширенных свойств анимации.В настоящее время поддерживается 3 браузерами Chrome,Mozila,Safary";
}
else if(selection=="2") {
document.form.info.value="Упрощённый способ установить значения для расширенных свойств фона.";
}
else if(selection=="3") {
document.form.info.value="Упрощённый способ установить значения для расширенных свойств бордюра.";
}
else if(selection=="4") {
document.form.info.value="Свойство добавляет тень границам элемента";
}
else if(selection=="5") {
document.form.info.value="Свойство устанавливает цвет используемому тексу";
}
else if(selection=="6") {
document.form.info.value="Свойство генерирует контент.";
}
}
function moreInfo() {
var page=document.form.go.value;
window.location=page;
}
</script>
<form name=form>
<table border="0" id="dsstyle">
<tr>
<td><a href="javascript:linkDisplay(1);"><span id="a-ds-text">animation</span></a></td>
</tr>
<tr>
<td><a href="javascript:linkDisplay(2);"><span id="a-ds-text">background</span></a></td>
</tr>
<tr>
<td><a href="javascript:linkDisplay(3);"><span id="a-ds-text">border</span></a></td>
</tr>
<tr>
<td><a href="javascript:linkDisplay(4);"><span id="a-ds-text">box-shadow</span></a></td>
</tr>
<tr>
<td><a href="javascript:linkDisplay(5);"><span id="a-ds-text">color</span></a></td>
</tr>
<tr>
<td><a href="javascript:linkDisplay(6);"><span id="a-ds-text">content</span></a></td>
</tr>
<tr>
<td>
<textarea name="info" rows="4" cols="20" wrap="virtual" id="dsstyle">Щёлкните на свойство CSS для более подробной информации!
</textarea>
</td></tr>
</table>
</form>

Проверьте работоспособность скрипта в HTML редакторе

Скопируйте код из примера в HTML редактор и нажмите кнопку для получения результата.









Русские шрифты



Ссылка:
BB code:




  • ©
  • | Просмотров: 1593 | Добавил: IZOTOP | Рейтинг: 1.0/1
    | Теги: описание ссылок, ссылки для описания

    Всего комментариев: 2
    0   Спам
    1 GingerOkey   (02.02.2016 22:44)
    Аватар GingerOkey Скажите, пожалуйста, возможно ли изменение размеров формы? Если да, то как можно сделать её больше? smile

    0   Спам
    2 bootstraptema_   (29.02.2016 11:02)
    Аватар bootstraptema_ Вам нужно указать размер ширины свойством width:

    Код

    <style>
    #dsstyle {
    width:440px;
    }
    </style>


    Добавлять комментарии могут только зарегистрированные пользователи.
    [ Регистрация | Вход ]