Помогите с примером!

hello2 · November 29, 2008

http://www.getincss.ru/2008/10/19/oformlen...u-css/#more-609

вот статья о том как сдлеать иконку для внешнего сайта.

Но нет примера, все написано кусками, не могли бы вы поделиться или обяснить как сделать такой пример. Помогите пожалуйста

Bolmazov · November 29, 2008

hello2, что такое css знаем? Вот... по сути я сейчас ничего нового не скажу - статья достаточно просто и понятно написана, но я попытаюсь еще чем ни будь помочь.

Смотрите, у вас страничка html. В ней есть тег <head></head>. В этом теге вы подключаете каскадную таблицу стилей (css). Допустим вы подключаете внешний файл css, тогда вы в <head></head> пишите <link href="myfile.css" rel="stylesheet" type="text/css"/>

Так. Теперь в файле myfile.css пишем следующее:

a[href^="http:"]
	{
	 background: url(images/externalLink.gif) no-repeat right top;
	 padding-right: 10px;
	 /* Ну или какие-нибудь другие стили*/
	}
a[href^="http://www.mysite.ru"], a[href^="http://mysite.ru"], a[href^="/"] {
/* Тут тоже какие-нибудь стили*/
}

Объяснение того что тут написано, прочтите еще раз на сайте если не поняли.

Все. Теперь в html файле можете писать ссылки типа: <a href='http://www.othersite.ru/'>внешняя ссылка</a> - браузер применит указанные стили.

По-моему разжувал так разжувал....

Edited November 29, 2008 by Bolmazov

hello2 · November 29, 2008

Спасибо! Теперь все понятно!

Кстати это как я понимаю Яваскрипт или стандартный КСС?

Еще раз спасибо!

Павел Билькис · November 29, 2008

это стандартный css. javascript тут и не пахнет

Shilov · November 29, 2008

ХМ... а я вот сделал проще просто между <head> и </head> просто поставил <link rel="icon" href="место где иконка" type="ico">

и все работает)))

hello2 · November 29, 2008

ХМ... а я вот сделал проще просто между <head> и </head> просто поставил <link rel="icon" href="место где иконка" type="ico">
и все работает)))

Можно пожалуйста пример в студию.

И я как понимаю, тут надо постоянно прописывать icon - в ссылке в ручную. А в нашем способе это делается очень автоматически.

getincss · November 29, 2008

ХМ... а я вот сделал проще просто между <head> и </head> просто поставил <link rel="icon" href="место где иконка" type="ico">
и все работает)))

а причем тут иконка? В статье рассказывается как оформить внешние ссылки (ссылки которые ведут на чужие сайты), а не иконку в адресной строке...

Edited November 29, 2008 by getincss

hello2 · November 29, 2008

Кстати еще такой вопрос: Как доработать этот способ чтобы все внешние ссылки открывались target=_blank? И чтобы была подсказка (tooltip) - что ссылка откроется в новой вкладке?

Что то вроде title="ссылка откроется в новой вкладке"

а если все внутри одного домена, то тогда все ссылки должны открыатся в одной вкладке.

getincss · November 29, 2008

Кстати еще такой вопрос: Как доработать этот способ чтобы все внешние ссылки открывались target=_blank? И чтобы была подсказка (tooltip) - что ссылка откроется в новой вкладке?
Что то вроде title="ссылка откроется в новой вкладке"
а если все внутри одного домена, то тогда все ссылки должны открыатся в одной вкладке.

это возможно только с помощью JS, а не CSS

hello2 · November 29, 2008

А если проще:

a[href^="http:"]
    {
     background: url(images/externalLink.gif) no-repeat right top;
     padding-right: 10px;
     /* Ну или какие-нибудь другие стили*/
    }

Как к этому коду приписать title: "Ссылка на другой сайт"? Должно же ведь как то!

getincss · November 30, 2008

А если проще:
a[href^="http:"]
    {
     background: url(images/externalLink.gif) no-repeat right top;
     padding-right: 10px;
     /* Ну или какие-нибудь другие стили*/
    }
Как к этому коду приписать title: "Ссылка на другой сайт"? Должно же ведь как то!

Это НЕвозможно средствами CSS!

rus · November 30, 2008

Кстати еще такой вопрос: Как доработать этот способ чтобы все внешние ссылки открывались target=_blank? И чтобы была подсказка (tooltip) - что ссылка откроется в новой вкладке?
Что то вроде title="ссылка откроется в новой вкладке"
а если все внутри одного домена, то тогда все ссылки должны открыатся в одной вкладке.

Именно в этом способе это не сделать, но можно по обычному, без заморочек.

getincss · November 30, 2008

Именно в этом способе это не сделать, но можно по обычному, без заморочек.

а чем простой title плох?

rus · November 30, 2008

а чем простой title плох?

Кто то верстает до сих пор таблицами и так же задается вопросом, а чем они плохи?

Отвечаю: в верстке, как и вообще во всей нашей жизни нужно все использовать по назначению.

Если версать, то дивами (это уже избитый вопрос поднимать его не буду).

Если прописывать всплывающую подсказку при наведениее на объект то title.

Ну а если эта подсказка объемная то вот для этих целей используй тултип.

На сколько я знаю тайтл индексируется поисковиками то есть это одна из основ поисковой оптимизации

и в тайтл не должно быть много текста, а вот на вопрос почему не должно почитайте про эту самую поисковую оптимизацию.

getincss · November 30, 2008

Кто то верстает до сих пор таблицами и так же задается вопросом, а чем они плохи?
Отвечаю: в верстке, как и вообще во всей нашей жизни нужно все использовать по назначению.
Если версать, то дивами (это уже избитый вопрос поднимать его не буду).
Если прописывать всплывающую подсказку при наведениее на объект то title.
Ну а если эта подсказка объемная то вот для этих целей используй тултип.
На сколько я знаю тайтл индексируется поисковиками то есть это одна из основ поисковой оптимизации
и в тайтл не должно быть много текста, а вот на вопрос почему не должно почитайте про эту самую поисковую оптимизацию.

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

hello2 · November 30, 2008

Что то я никак не могу поверить, что нельзя для ссылок прикрутить подсказку с текстом. Просто было бы очень юзабельно показать посетителям, что ссылка ведет на другой сайт.

getincss · November 30, 2008

Что то я никак не могу поверить, что нельзя для ссылок прикрутить подсказку с текстом. Просто было бы очень юзабельно показать посетителям, что ссылка ведет на другой сайт.

код ссылки с всплывающей подсказкой:

<a href="http://www.yandex.ru" title="Эта ссылка откроется в новом окне" target="_blank">Yandex</a>

Edited November 30, 2008 by getincss

SelenIT · November 30, 2008

Прикрутить-то теоретически можно...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style>
a[href^="http:"] { color: green; position: relative; }
a[href^="http:"]:after { position: absolute; color: red; background: yellow; content: 'лучший сайт по (X)HTML/CSS'; top: 0.75em; left: 1em;display: none; text-decoration: none; white-space: nowrap; }
a[href^="http:"]:hover:after { display: block; }
</style>
</head>
<body>
<p><a href="http://htmlbook.ru">htmlbook.ru</a></p>
</body>
</html>

Но вот работать, как хотелось бы, будет только в последних Операх (в Google Chrome текст подсказки остается подчеркнутым, в FF3 и вовсе не слушается position-а, тупо выводится сразу после текста). В IE8b2 подсказка выводится всегда, не обращая внимания на статус :hover, а предыдущие версии IE не понимают псевдоэлемента :after. Так что, как обычно, проблема не в стандарте, а в его поддержке браузерами...

rus · November 30, 2008

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

Да, все так. Я просмотрел для чего ему нужно.

UPD:

Оффтоп конечно, но таких извращенцев первый раз вижу.

Автор, а чем тебя не устраивают стандартные способы реализации твоей задачи?

З.Ы. в последнее время модно что ли стало искать решения задачи через жопу, с лозунгом мы коротких путей не ищем!

Без обид...

getincss · November 30, 2008

Пример, реализующий автоматическую подстановку target="_blank" и title для ссылок на внешние сайты:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Пример, реализующий автоматическую подстановку target="_blank" и title для ссылок на внешние сайты</title>

<style type="text/css">
a[href^="http://"] /* для внешних ссылок*/
    {
     background: url(http://www.getincss.ru/wp-content/uploads/2008/10/externallink.gif) no-repeat right top;
     padding-right: 10px;
	 color:#000;
    }

a[href^="http://www.your_site.ru"] /* для ссылок твоего сайта*/
	{
	 color:red;
	 background:none;
	 padding:0;
	}
</style>

<script type="text/javascript">
function doTarget() {
var links = document.getElementsByTagName("a");
	for (var i=0; i < links.length; i++) {
	  if (links[i].href.match("http://www.your_site.ru")==null) {
		links[i].target = "_blank";
		links[i].title = "Эта ссылка откроет сайт "+links[i].getAttribute("href")+" в новом окне";
	  }
	}
}
</script>
</head>

<body onload="doTarget()">

<a href="http://yandex.ru">Yandex</a> - это внешня ссылка на сайте<br />
<a href="http://google.com">Google</a><br />
<a href="http://www.your_site.ru">Это внутрення ссылка сайта, т.к. начинается НЕ с "http://www.your_site.ru"</a>

</body>
</html>

Примечание:

Поисковики не увидят title.

Edited November 30, 2008 by getincss

hello2 · November 30, 2008

просто было бы очень Юзабельно, если при наводе на ссылку, помимо стрелочки появлялась и подсказка, что ссылка на другй сайт. Ссылки на внутренний сайт у меня оформлены чуть по другому.

Что в этом такого? Мне надо это прописать в КСС, чтобы пользователь просто вставлял ссылку а к ней применялись все атрибуты Внешней ссылки в том числе и подсказка.

getincss · November 30, 2008

просто было бы очень Юзабельно, если при наводе на ссылку, помимо стрелочки появлялась и подсказка, что ссылка на другй сайт. Ссылки на внутренний сайт у меня оформлены чуть по другому.
Что в этом такого? Мне надо это прописать в КСС, чтобы пользователь просто вставлял ссылку а к ней применялись все атрибуты Внешней ссылки в том числе и подсказка.

читайте предыдущий ответ, я показала пример.

hello2 · November 30, 2008

Да, спасибо getincss! Все имено так как мне надо, но смушает то что используется ДжаваСкрипт к тому же в теге BODY. Вы как знающий что можете сказать по этому поводу? Просто я сейчас собираю макет сайта и там помимо этого скрипта, я думаю будет еще несколько, боюсь перегрузить сайт скриптами.

А так все очень здорово конечно, все как надо работает. Кстати этот способ кроссплатформенный?

И будет ли он работать корректно если в ссылке указывается http://moisite.ru - т.е. если кто то пропишет ссылку на Внутренний сайт, но с помощью http://

getincss · November 30, 2008

Да, спасибо getincss! Все имено так как мне надо, но смушает то что используется ДжаваСкрипт к тому же в теге BODY. Вы как знающий что можете сказать по этому поводу? Просто я сейчас собираю макет сайта и там помимо этого скрипта, я думаю будет еще несколько, боюсь перегрузить сайт скриптами.

Если будет использоваться библиотека JQuery, то все станет еще намного проще, а без onload - смотрите обовленный ниже пример

А так все очень здорово конечно, все как надо работает. Кстати этот способ кроссплатформенный?

Насчет платформ - да, на всех. А вот насчет браузеров - только IE6 не будет понимать CSS.

И будет ли он работать корректно если в ссылке указывается http://moisite.ru - т.е. если кто то пропишет ссылку на Внутренний сайт, но с помощью http://

В этом случае скрипт и CSS код придется дополнить.

Вот обновленный пример:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Пример, реализующий автоматическую подстановку target="_blank" и title для ссылок на внешние сайты</title>

<style type="text/css">
a[href^="http://"] /* для внешних ссылок*/
    {
     background: url(http://www.getincss.ru/wp-content/uploads/2008/10/externallink.gif) no-repeat right top;
     padding-right: 10px;
	 color:#000;
    }

a[href^="http://www.your_site.ru"], a[href^="http://your_site.ru"], a[href^="/"] /* для ссылок твоего сайта*/
	{
	 color:red;
	 background:none;
	 padding:0;
	}
</style>
</head>

<body>

<a href="http://yandex.ru">Yandex</a> - это внешня ссылка на сайте<br />
<a href="http://google.com">Google</a><br />
<a href="http://your_site.ru">Это внутрення ссылка сайта, т.к. начинается НЕ с "http://www.your_site.ru"</a>

<script type="text/javascript">
window.setTimeout(init,100);
function init() {
   if (document.body!=null) {
		var links = document.getElementsByTagName("a");
		for (var i=0; i < links.length; i++) {
		  if (links[i].href.match("http://www.your_site.ru")==null && links[i].href.match("http://your_site.ru")==null) {
			links[i].target = "_blank";
			links[i].title = "Эта ссылка откроет сайт "+links[i].getAttribute("href")+" в новом окне";
		  }
		}
   } else {
      window.setTimeout(init,100);
   }
}
</script>
</body>
</html>

JS скрипт можно вынести в отдельный файл, но подключать только в самом конце страницы, например так:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Пример, реализующий автоматическую подстановку target="_blank" и title для ссылок на внешние сайты</title>

<style type="text/css">
a[href^="http://"] /* для внешних ссылок*/
    {
     background: url(http://www.getincss.ru/wp-content/uploads/2008/10/externallink.gif) no-repeat right top;
     padding-right: 10px;
	 color:#000;
    }

a[href^="http://www.your_site.ru"], a[href^="http://your_site.ru"], a[href^="/"] /* для ссылок твоего сайта*/
	{
	 color:red;
	 background:none;
	 padding:0;
	}
</style>
</head>

<body>

<a href="http://yandex.ru">Yandex</a> - это внешня ссылка на сайте<br />
<a href="http://google.com">Google</a><br />
<a href="http://your_site.ru">Это внутрення ссылка сайта, т.к. начинается НЕ с "http://www.your_site.ru"</a>

<script type="text/javascript" src="путь_до_js_файла/js.js"></script>
</body>
</html>

Теперь в этот самый js.js пишешь:

window.setTimeout(init,100);
function init() {
   if (document.body!=null) {
		var links = document.getElementsByTagName("a");
		for (var i=0; i < links.length; i++) {
		  if (links[i].href.match("http://www.your_site.ru")==null && links[i].href.match("http://your_site.ru")==null) {
			links[i].target = "_blank";
			links[i].title = "Эта ссылка откроет сайт "+links[i].getAttribute("href")+" в новом окне";
		  }
		}
   } else {
	  window.setTimeout(init,100);
   }
}

и все.

Edited November 30, 2008 by getincss

Sign In

Помогите с примером!

Question

Link to comment

Share on other sites

23 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information