[ Обновленные темы · Новые сообщения · Участники · Правила форума · Поиск · RSS ]
  • Страница 1 из 1
  • 1
Архив - только для чтения
Форум » Dop.at.ua » Корзина » Ссылка - дело не хитрое
Ссылка - дело не хитрое
MoriДата: Среда, 22.09.2010, 21:01 | Сообщение # 1
5 уровень
Группа: Гл.Администратор
Сообщений: 523
Награды: 10
Репутация: 198
Статус: отсутствует
Вообще что такое ссылка - это, без чего не обходится не один сайт. В этой статье будет рассказано о многих возможностях ссылок. Естественно во многих учебниках уже было всё растолковано по частям, но следует всё разобрать воедино и кратко рассказать о каждом эффекте. Ну начнём....

Вообще ссылка представляет собой вид <a href="ваш_путь"> Имя сайта </a>, но сколько можно с этим сотворить ? Ответ: Много!
Многие видели, что при наведении на ссылку иногда может вылезти подсказка к этой ссылке, всё делается по средствам тега title.

Так получается вот такая ссылка :Сайт для веб мастеров

Ну а если вы поставили ссылку на графический объект, то тут поможет тег "alt". Всё нужно проделывать также, но за место "title" вводить "alt".

Code
<a href="http://site.ua"><img border="0" src="http://site.ua/images.png" alt="Скрипты и шаблоны для uCoz"></a>

Обратите внимание на то, что описание "title" мы писали в теге <a>, в то время как описание "alt" необходимо писать в теге <img>

Для того, чтобы ссылка меняла свой цвет при наведении на неё мышкой, нам удобно применить CSS (Cascading Style Sheets), или по нашему "Каскадные таблицы Стилей". Статьи про CSS вы можете прочитать здесь. Чтобы образовался такой эффект мы должны на страничке прописать так :

Code
<style> A:hover {COLOR: #Ваш цвет}</style>

Иногда дизайн не позволяет "держать на сайте" подчёркнутые сслыки. Для того, чтобы ссылки были не подчёркнуты, нужно на страничке прописать:

Code
<style>a {text-decoration : none} </style> .  

Но можно сделать и так, чтобы ссылка была не подчёркнута, но при наведении курсора она подчёркивалась. Для этого пропишите так :

Code
<style>a{text-decoration: none} a:hover {text-decoration: underline}</style>

Более полный вариант управления ссылками на странице:

Code
<style>
A:link { text-decoration: underline; color:black; }
A:active { text-decoration: underline; color:black; }
A:visited { text-decoration: underline; color:black; }
A:hover { text-decoration: none; color:black; }
</style>

Описанные стили рекомендуется вставлять между тегами <HEAD></HEAD>

Вроде самые главные эффекты с использованием CSS я описал. Теперь можно разобрать ещё один вид ссылок - это якорь, внутренняя ссылка на какую-либо часть страницы. Якорь ставится так:

Code

<a href="#link">Текст</a>

а на то место, куда должна привести ссылка ставится :

Code
<a name="link">Text</a>

Также ссылка может вести просто наверх. Это нужно для тех, кто строит большие страницы. Чтобы ссылка вела на самое начало страницы, нужно прописать так :

<a href='javascript:scroll(0,0);'>Top/Вверх</a>

UA
Lady_StrangerДата: Вторник, 31.07.2012, 20:06 | Сообщение # 2
1 уровень
Группа: Пользователи
Сообщений: 1
Награды: 0
Репутация: 0
Статус: отсутствует
[quote=Dew]Для того, чтобы ссылки были не подчёркнуты, нужно на страничке прописать:[/quote]
где?
UA
MoriДата: Вторник, 07.08.2012, 10:16 | Сообщение # 3
5 уровень
Группа: Гл.Администратор
Сообщений: 523
Награды: 10
Репутация: 198
Статус: отсутствует
Да в любом месте, попробуйте в <head> или после <body>
UA
RockVanDoomДата: Четверг, 17.01.2013, 14:04 | Сообщение # 4
1 уровень
Группа: Пользователи
Сообщений: 8
Награды: 0
Репутация: 0
Статус: отсутствует
Спасибо, хорошая статья!
Вот, у меня есть скрипт для ссылок:
[code]<html>
<head>
<title>Салют при наведении на ссылку</title>
<script>
<!--
var debrisnumber=40
var debriscolor=new Array()
debriscolor[0]="FFAAAA"
debriscolor[1]="AA0000"
debriscolor[2]="770000"
debriscolor[3]="AA4444"
debriscolor[4]="EE4422"
var x_debrispos
var y_debrispos
var x,y
var x_random=new Array()
var y_random=new Array()
var max_explsteps=20
var i_explsteps=0
var i_color=0
var pause=10

function checkbrowser() {
i_explsteps=0
x_debrispos=x
y_debrispos=y
for (i=0;i<=debrisnumber;i++) {
x_random[i]=Math.ceil(40*Math.random())-20
y_random[i]=Math.ceil(40*Math.random())-20
}
if (document.all) {
for (i=0;i<=debrisnumber;i++) {
var thisspan=eval("document.all.span"+i+".style")
thisspan.visibility="VISIBLE"
thisspan.posLeft=x_debrispos
thisspan.posTop=y_debrispos
}
explode_IE()
}
if (document.layers) {
for (i=0;i<=debrisnumber;i++) {
var thisspan=eval("document.span"+i)
thisspan.visibility="VISIBLE"
thisspan.left=x_debrispos
thisspan.top=y_debrispos }
explode_NN()
} }

function explode_IE() {
if (i_explsteps<=max_explsteps) {
for (i=0;i<=debrisnumber;i++) {
var thisspan=eval("document.all.span"+i+".style")
thisspan.posLeft+=x_random[i]
thisspan.posTop+=y_random[i]
}
i_explsteps++
var timer=setTimeout("explode_IE()",pause)
}
else {
for (i=0;i<=debrisnumber;i++) {
var thisspan=eval("document.all.span"+i+".style")
thisspan.visibility="HIDDEN"
}
clearTimeout(timer)
}
}
function explode_NN() {
if (i_explsteps<=max_explsteps) {
for (i=0;i<=debrisnumber;i++) {
var thisspan=eval("document.span"+i)
thisspan.left+=x_random[i]
thisspan.top+=y_random[i]
}
i_explsteps++
var timer=setTimeout("explode_NN()",pause)
}
else {
for (i=0;i<=debrisnumber;i++) {
var thisspan=eval("document.span"+i)
thisspan.visibility="HIDDEN"
}
clearTimeout(timer)
}
}
function handlerMM(e){
x = (document.layers) ? e.pageX : document.body.scrollLeft+event.clientX
y = (document.layers) ? e.pageY : document.body.scrollTop+event.clientY
}
if (document.layers){
document.captureEvents(Event.MOUSEMOVE);
}
document.onmousemove = handlerMM;
// - End of JavaScript - -->
</script>
<style>
.spanstyle { position:absolute; visibility:hidden;}
</style>
</head>
<body>
<script>
<!-- Beginning of JavaScript -
for (i=0;i<=debrisnumber;i++) {
document.write("<div id='span"+i+"' class='spanstyle'>")
document.write("<table cellpadding=0 cellspacing=0>")
document.write("<tr><td bgcolor="+debriscolor[i_color]+">")
document.write("<img src='emptypixel236.gif' width=3>")
document.write("</td></tr></table>")
document.write("</div>")
i_color++
if (i_color>=debriscolor.length) {i_color=0}
}
// - End of JavaScript - -->
</script>
<DIV id="redir" style="position:absolute; top:10px;
left:5px; visibility:visible;">
<div align="center"><a href="http://scriptic.ru"
onMouseOver="checkbrowser()"> Подведите мышь к ссылке</a></div>
</DIV>
</body>
</html>[/code]
Попробуйте! grin
UA
Форум » Dop.at.ua » Корзина » Ссылка - дело не хитрое
  • Страница 1 из 1
  • 1
Поиск: