Ссылки установленные Вами будут выдавать описание в поле.Все элементы могут иметь дополнительные стили подходящие дизайну Вашего сайта.Элементам скрипта не обязательно находиться в таблице.Предоставленно 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>
|
