День 2й: разлиновка таблиц делается легко

Я приготовил пошаговую демонстрацию (http://15daysofjquery.com/examples/zebra/) как написать нормальный яваскрипт и свести его к пяти строкам или менее. Одновременно вы увидите, как я делаю это гибче и полезней.

Посмотрите на сайт Matthew Pennell “Расскрасьте таблицы как в OpenOffice” (http://www.thewatchmakerproject.com/jou … the-oo-way). Его код чистый и краткий. И он сделал лучше чем предыдущая статья от A List Apart (http://www.alistapart.com/articles/zebratables)

Но с помощью jQuery, я думаю, мы можем сделать лучше.

Главная идея - сделать полоски на табличке и смену цвета бэкрграунда каждого ряда, когда курсор будет над ним.

Как я упоминал, код Mathew достаточно хорош. Он показывает уровень опыта, который большинство частично занятых гиков могут найти трудным для достижения.

Это ни в коем случае не трудно для тех, кто только начал закатывать рукава и изучать javascript.

Как jQuery может помочь?

Моя миссия - показать вам, что может qQuery делать эти задачи:
- легче выполнятся
- быстрее загружаться на странице
- более удобен для использования

Поэтому чего вы ждете? Переходите на учебник (http://15daysofjquery.com/examples/zebra/) и смотрите, как jQuery может легко раскрасить ваши таблички.

День 4й: защищаем ссылки mailto

Правило номер один: не помещайте Ваш e-mail адрес в ссылку “mailto:”.

Чтобы сражаться с дьявольским легионом спамеров, веб-дизайнеры и программисты придумали множество хороших решений. Давайте быстро посмотрим на наиболее часто используемые обходные пути и их недостатки.

name [at-no-spam] website.com
Проблема: ссылка будет более удобной, чем вводить адрес вручную и иногда ошибаться.

Контактные формы
Проблема: есть риск, что спамеры воспользуются Вашим аккаунтом, чтобы массово разослать почту (пока вы не воспользуетесь безопасным скриптом).

Сокрытие с помощью javasrcipt
Проблема: Ваш e-mail остается открытым, даже если вы используете сложное шифрование, чтобы его замаскировать. И кто хочет воспользоваться посторонним сайтом для шифрования адреса один раз? Не я.

Прячемся за простой формой
(Например, смотрите на сайте Simon’а Willison’а (http://simon.incutio.com/contact/) на кнопочку ‘Reveal my Address’ около верха страницы).

Проблема: ни одной, которую могу представить себе.

Возможное решение: AJAX

Решение, которое я предлагаю, имеет несколько улучшений перед некоторыми обходными путями, которые используются вебмастерами:
Легко встраивать
Легко изменять
Нет суматохи в презентации
Нет надобности использовать сторонние утилиты, чтобы зашифровать адрес
Нет открытого адреса

По последнему пункту я подозреваю устройства шифрования e-mail и думаю, что спамеры не настолько умны, чтобы сделать реверс-инжениринг кода и собирать любые емейлы, которые зашифрованы этим же методом. На практике, я думаю, что шифрование e-mail в общем безопасно, но факт, что e-mail остаётся в html-коде.

Суть
jQuery берет данные с сервера
Файл, содержащий e-mail адрес (ссылка mailto:) преимущественно html с простым механизмом защиты

Демо
Я хочу начать с примеров, в которых показывается e-mail адрес, когда посетитель кликает по кнопке или ссылке, и вернусь назад, где e-mail адреса показаны открыто.

Пример с кнопкой. Без эффекта. http://15daysofjquery.com/examples/mailto/demo1.php
Пример с ссылкой. Эффект выпадания. http://15daysofjquery.com/examples/mailto/demo2.php
При загрузке страницы. Эффект выпадания. http://15daysofjquery.com/examples/mailto/demo3.php
При загрузке страницы. Без эффекта. http://15daysofjquery.com/examples/mailto/demo4.php
Код

Это сделано под некоммерческой лицензией creative commons license. Свяжитесь со мной, если Вы хотите использовать код в коммерческом продукте. Сейчас я буду использовать этот код в моей новой CMS для веб- дизайнеров, которую я скоро запущу.
Почему это безопаснее, чем обычная ссылка mailto?

Настоящая проблема ссылок mailto в том, что спамеры могут использовать автоматические программы для сканирования сети и получения адресов из html-кода. Они в основном находят вас так же, как это делает Гугл: следуют ссылкам.

Они ленивые, как большинство из нас. Следовательно, вряд ли они путешествовали по web, записывая адреса для спама.

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

Это твердый путь к абсолютной гарантии, что Вы никогда не получите спам и получите только приятные письма от ваших посетителей?.. нет.

Но, убирая адреса из html, меняя секретную фразу в коде jQuery и изменяя имя файла с адресом, возможно даст вам компромисс между удобством для ваших посетителей и безопасностью адресов.

Одна последняя заметка
Посмотрите получше на код первых трех примеров и Вы увидите, что я использую функцию AJAX callback, чтобы включить эффекты slideDown() и show().

Другими словами, я не хочу, чтобы jQuery начала эффект slideDown(), пока информация (html) не будет получена из AJAX вызова. Отсылка секретной фразы на наш простой сервер и получение данных занимает некоторое время.

Правильно:

$(document).ready(function(){
$.post('mailtoInfo.php',{
  pass: "secret"
},function(txt){
  $('div.email').html(txt);
  $('div.email').slideDown("slow");
});
});

Неправильно:

$(document).ready(function(){
$.post('mailtoInfo.php',{
  pass: "secret"
},function(txt){
  $('div.email').html(txt);
});
 $('div.email').slideDown("slow");
});

День 6й - Безопасные контактные формы без CAPTCHA

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

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

Но когда приходит спам, то нет ничего хуже небезопасной контактной формы. Представьте неприятный документ от Вашего хостера, что Ваш сайт используется для массовой рассылки почты и поэтому мы выключаем Ваш сайт, пока всё не исправите.

Поэтому сегодня я расскажу простой метод добавления дополнительной безопасности на ЛЮБУЮ контактную форму - даже если Вы не используете мою супер защищенную и гибкую [почтовую форму].

Ситуация
Помните, что спаммеры удаленно пробуют ваши формы на уязвимости… и вы хотите, чтобы они ушли.

Проблема
Вы не хотите использовать CAPTCHA, потому что вы знаете, что вынуждаете посетителей читать ужасные буквы и числа, только чтобы послать вам сообщение.

Итак, мы хотим сделать жизнь тяжелой для Плохих парней и суперпростой для Хороших.

Решение
Вы должны использовать jQuery и добавить некоторый скрытый тэг в форму при загрузке страницы. Когда форма отсылается на сервер, вы должны использовать некоторый PHP код, чтобы проверить следующее:
Скрытый тэг существует
Значние скрытого тэга совпадает с тем, что хранится в куки
Скрытый тэг не просрочен

Другими словами, Ваш посетитель имеет некоторое время (которое Вы задали), чтобы заполнить форму и отправить. И если спамер пытается послать сообщение через Вашу форму, он упрется в стену. Не пройдёт, не получит 200 баксов.

Что я собираюсь рассказать Вам, это измененная концепция умного парня Криса Снифлетта. Он эксперт по безопасности во всех видах проблем, которые возникают у PHP программистов, если они не беспокоятся о них.

Руководство
Я получил отличные ответы на День 2й: разлиновка таблиц делается легко, поэтому я решил сделать другое пошаговое руководство со снимками экрана. Это займет немного времени и будет полезным.

Руководство (на английском) http://15daysofjquery.com/examples/contact-forms/
Демонстрация http://15daysofjquery.com/examples/cont … e/demo.php
Скачать исходники http://15daysofjquery.com/examples/contact-forms/code/

Серебрянная пуля?
“Итак, мои формы защищены на 100%, и я могу использовать Generic Free Contact Form Processor With Sloppy Code и буду в безопасности?”.

Ну… Нет.

Эта концепция безопасности основана на ключевом предположении:
Cпамеры не будут весь день ломать контактную форму, будут брать то, что плохо лежит или само идет в руки.

А теперь слушай внимательно, мой дорогой друг:
Эта техника хоть и сильная, но не средство против слабого кода парсера формы.
Моё отношение к безопасности - это использовать несколько способов на сервере и на клиентской стороне, чтобы спаммер приложил огромные усилия, чтобы приблизиться к их дьявольской цели.
Я вижу защиту клиентской стороны аналогично помещению записки на окна дома, что дом защищен сигнализацией. Воры смотрят на записки, собаку во дворе, свет снаружи и другие сигналы хорошо защищенного дома. Они ищут большой заработок с минимальным риском и работой.

Другими словами, вы можете помешать 99% атак перед тем, как они начнутся, и вы можете делать это легко, так почему же не делаете? Это то, что дает технология.

Но это не лекарство для плохого парсера форм.

Оригинал тут http://15daysofjquery.com/safer-contact … ptchas/11/

День 8й - Скругленные углы с javascript (jQuery)

Вчера в 17:15 я наконец-то вернулся за компьютер, чтобы быстро проверить почту после 48-часового перерыва - итак, я запустил Thunderbird, и тотчас же выскочило несколько новостей RSS из моей подписки. (По выходным я занят реконструкцией дома, и все мое свободное время посвящено друзьям и семье…естественно, вдали от компьютера).

Мой новый приятель Дастин Диаз (включивший ссылку на меня и этот сайт в своем самом последнем аудиоблоге) добавил вызывающее сообщение под заголовком «Долой закругленные углы».

Я просмотрел этот новый источник информации о закругленных углах и увидел, что HTML отлично подойдет для создания экспромтного руководства по библиотеке jQuery – в сочетания функций wrap(), prepend(), and append().

Обратимся к HTML разметке, которая будет использована как отправной пункт:

<div class="dialog">
 <div class="hd">
  <div class="c"></div>
  </div>
 <div class="bd">
  <div class="c">
<div class="s">
  < -- main content goes here -->
</div>
  </div>
  </div>
 <div class="ft">
  <div class="c"></div>
  </div>
</div>

Итак, как мы обработаем данный HTML, используя jQuery, чтобы привести код в порядок?

В первую очередь нам нужна «зацепка» - уникальный элемент HTML, или идентификатор, или название класса объектов – для нацеливания на него jQuery.

Метод, который я предлагаю, удалит все тэги “div”, находящиеся выше. Поэтому я считаю, что в качестве хорошей «зацепки» может выступить простой тэг “div” с уникальным идентификатором или названием класса.

Давайте попробуем сделать следующее:

<div class="roundbox">
  < -- main content goes here -->
 </div>

Следующий шаг… мы используем jQuery чтобы добавить код в наш html:

$(document).ready(function(){ $("div.roundbox") .wrap('<div class="dialog">'+
        '<div class="bd">'+
        '<div class="c">'+
        '<div class="s">'+
        '</div>'+
        '</div>'+
        '</div>'+
        '</div>');
});

Где остальные тэги “div”?

Обратите внимание на код выше, и вы увидите, что все тэги “div” аккуратно расположились внутри других, а также обернулись вокруг контента, который будет включен в созданный нами закругленный блок в ближайшее время.

Вы также можете заметить, что я исключил значительное количество элементов разметки из оригинала. Это сделано потому, что функция wrap() в jQuery требует отлично вложенных тэгов “div” для своей работы.

В частности, я исключил эти две части:

<div class="hd"><div class="c"></div></div>

<div class="ft"><div class="c"></div></div>

Функции prepend() and append() одновременно

Если вы заметили, исключенные части как раз заходили внутрь, но в начале и конце тэга “div”, относящегося к классу «диалог». Это прекрасная возможность использовать функции append и prepend jQuery и связать их вместе.

$('div.dialog').prepend('<div class="hd">'+
        '<div class="c"></div>'+
        '</div>')
.append('<div class="ft">'+
        '<div class="c"></div>'+
        '</div>');

Пример и код

Я выложил на сайте (http://15daysofjquery.com/examples/rounded/demo.php) пример закругленных углов, полученных через jQuery, для обозрения. Обязательно обратите внимание на исходный код, потому что я хочу, чтобы вы увидели, насколько аккуратный вид приобретает HTML, когда все сценарии javascript и каскадные таблицы стилей распределяются по отдельным файлам.

Этот код был взят из статьи, размещенной на http://www.schillmania.com/ и по этой же ссылке я советую вам скачать zip-архив (http://www.schillmania.com/projects/dialog/), в котором находятся элементы изображений, помогающие добиться красивых закругленных углов.

Закругленные углы без изображений

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

$(document).bind("load", function(){
$("#box1").corner();
	});

День 10й - Редактирование на месте с AJAX, используя jQuery библиотеку

Впервые я увидел версию этого приложения на сайте wwwquirksmode.org, а позже нашел Web 2.0 версию на сайте www24ways.org.

Я хочу рассказать вам о двух способах использования библиотеки jQuery, с помощью которых можно достигнуть такого же, если не лучшего результата.

Цель

AJAX (или AHAH) - технология, позволяющая пользователям редактировать просматриваемую страницу HTML, не закрывая ее.

Концепция

Нажмите на текст, который собираетесь редактировать, и перед вами удивительным образом появится текстовая область с расположенными внизу кнопками «Сохранить» и «Отменить редактирование». Изменения с помощью AHAH преобразовываются в скрипты PHP, которые, как правило, используются для обновления баз данных (MySQL или неструктурированных файлов).

Демонстрация

«Edit In Place» - компонент административной панели приложения Ajax 1 http://15daysofjquery.com/examples/jque … ivEdit.php

В первой демонстрационной версии я использую элемент div с идентификатором ID «editInPlace». Когда курсор стоит на элементе div, задний фон меняет цвет на бледно-желтый. После того, как вы нажимаете на текст, открывается DOM (объектная модель документа), а элемент div удивительным образом превращается в текстовую область, внутри которой можно редактировать текст.

Нажимаем на кнопку «Сохранить», и новая страница HTML преобразуется в скрипты PHP, которые отображают полученные данные с помощью массива $_POST.

В реально существующем приложении вам еще придется настроить несколько дополнительных параметров безопасности, а затем обновить данные и отправить подтверждение успешного выполнения задачи в библиотеку jQuery.

Но в этом примере информация, отсылаемая в PHP скрипт, возвращается назад в jQuery и показывается в простом окне.

Объяснения

Способ, с помощью которого я все это выполняю, достаточно известен. Запомните, если вы не хотите использовать функцию jQuery document.ready, будьте готовы использовать метод init() function

<!--start_raw-->
$(document).ready(function(){
setClickable();
});
<!--end_raw-->

Первым делом сработает функция setClickable(). Данная функция предназначена для следующего:
Ищет элементы div с ID =”editInPlace” и сообщает jQuery необходимость начинать преобразования после того, как нажат div.

<!--start_raw-->
function setClickable() {
$('#editInPlace').click(function() {
<!--end_raw-->

Вставляет страницы html внутрь элементов div с использованием функции jQuery’s html(). Эта страница html размещается внутри других html, после чего отображается текстовая область и кнопки «Сохранить» и «Отмена».

var textarea = '<div><textarea rows="10" cols="60">'+$(this).html()+'</textarea>';
var button = '<div><input type="button" value="SAVE"
class="saveButton" /> OR <input type="button" value="CANCEL"
class="cancelButton" /></div></div>';
var revert = $(this).html();

Та же страница html размещается в элементе div с ID=”editInPlace” для того, чтобы можно было вернуться к первоначальному виду, в случае, если вы решите использовать кнопку «Отменить».

<!--start_raw-->var revert = $(this).html();<!--end_raw-->

DOM элемент “After” используется для вставки новой текстовой области html после ссылаемого узла div. Сразу же после этого, с целью сохранения места, я отправляю jQuery команду переместить элемент div.

<!--start_raw-->$(this).after(textarea+button).remove();<!--end_raw-->

Используя jQuery, я адаптирую кнопки «Сохранить» и «Отменить», используя их классовые имена. jQuery запускает последнюю функцию “Сохранить изменения” после того, как вы нажмете соответствующую кнопку. Я закрываю окно сообщения jQuery, показывающее необходимые действия, которые выполняются после нажатия элемента div. При этом не ставлю в конце апостроф, так как после этого элемента последует еще несколько действий.

<!--start_raw-->$('.saveButton').click(function(){saveChanges(this, false);});
$('.cancelButton').click(function(){saveChanges(this, revert);});
})<!--end_raw-->

Далее я вписываю в код «mouseover» или «mouseout». Эти команды передают jQuery необходимость добавить или удалить класс, когда курсор направляется на нужный элемент div (id=”editInPlace”).

<!--start_raw-->
.mouseover(function() {
$(this).addClass("editable");
})
.mouseout(function() {
$(this).removeClass("editable");
});
};//end of function setClickable
<!--end_raw-->

Функция “saveChanges” превращает объект кнопки в первую переменную, а отменённая переменная становится ложной или содержит страницу html, которую я сохранял в параметрах возвращения к исходным данным.

<!--start_raw-->
function saveChanges(obj, cancel) {
<!--end_raw-->

Если функция “cancel” является ложной, тогда я сохраняю изменения, преобразовывая html в php скрипты. Я забираю html из текстовой области, используя функции DOM, доступные благодаря библиотеке jQuery: parent() и siblings().

<!--start_raw-->
if(!cancel) {
var t = $(obj).parent().siblings(0).val();
<!--end_raw-->

Основные возможности DOM вне пределов этих функций. Как правило, я задаю команду jQuery “Объект (save button), который имеет родителя (div)… Искать. Этот объект имеет один или более объектов на том же уровне дерева DOM… Мне нужен первый объект. Найти величину объекта”.

(Если подумать… конечно, если вы не знакомы со способом кодировки DOM, пожалуй, мои объяснения не будут иметь для вас никакого смысла. Предлагаю вам найти “DOM javascript” в системе поиска Google, ну или “что-то в этом роде”).

Эта страница html имеет поле переменной “t” и сейчас пришло время передать ее через POST в файл test2.php.

<!--start_raw-->
$.post("test2.php",{
  content: t
},function(txt){
alert( txt);
});
}
<!--end_raw-->

Если отмененная переменная имеет величину, тогда страницу html следует изначально сохранить в переменной возвращения к исходным данным. Итак, в этом случае поле переменной “t” следует передать в первоначальную html.

<!--start_raw-->
else {
var t = cancel;
}
<!--end_raw-->

Следующий шаг - использование функций DOM в рамках библиотеки яваскриптов jQuery, для размещения новых div, с ID “editInPlace” после элемента, содержащего текстовую область… а затем убираем div, содержащий текстовую область.

<!--start_raw-->
$(obj).parent().parent().after('<div id="editInPlace">'+t+'</div>').remove() ;
<!--end_raw-->

Вкратце, это дает следующую команду библиотеке jQuery: “Сделайте два шага назад на ветвь DOM. Поместите HTML после объекта, найденного здесь, а затем переместите объект”.

В итоге, мы снова вызываем функцию «setClickable» и закрываем функцию «saveChanges()». Цель этого вызова - переустановка событий «onMouseover», «onMouseout» и «onClick».

<!--start_raw-->
setClickable();
}
<!--end_raw-->

Второй пример

Второй пример очень похож на первый, но немного сложнее.

«Edit In Place» -компонент административной панели приложения Ajax 2 http://15daysofjquery.com/examples/jque … e/demo.php

Вместо одного большого элемента div в этом примере каждый тег P управляет отдельной редактируемой областью.

Трудность возникает в случае, если вы захотите отправить данные на серверные скрипты, и при этом адаптируете верный Р-тег для обновления базы данных.

Я нашел этому решение: нужно пронумеровать каждый Р-тег и отправить коды PHP. В окошке предупреждения вы увидите, что коды PHP «распознали», какие именно P-теги были изменены.

Как узнать результат

Если вы использовали что-то похожее в своей работе, я думаю, вы захотели проверить, действительно ли произошли какие-то изменения перед тем, как сообщать jQuery команду обновить DOM новой страницей html.

Базой данных не предусмотрена подобная демонстрация, поэтому я этот шаг опустил.

День 12й - jQuery Lightbox

Первое исполнение “Thickbox” от Cody Lindley (http://codylindley.com/Javascript/257/t … e-them-all), что привлекло меня в jQuery. С тех пор он сделал апдейт, чтобы исправить некоторые кросс-браузерные проблемы.

Несколько объявлений

$(document).ready выключает функцию TB_init(), которая включается во все события onClick для всех ссылок с именем класса “thickbox”.

function TB_init(){
       $("a.thickbox").click(function(){
	 var t = this.title || this.innerHTML || this.href;
	 TB_show(t,this.href);
	 this.blur();
	 return false;
});

Когда ссылка с “thickbox” нажата, начинает работать функция TB_show().

$("body")
 .append("<div id='TB_overlay'></div><div id='TB_window'></div>");
 $("#TB_overlay").click(TB_remove);
 $(window).resize(TB_position);
 $(window).scroll(TB_position);

 $("#TB_overlay").show();
 $("body").append("<div id='TB_load'><div id='TB_loadContent'><img
  src='images/circle_animation.gif' /></div></div>");

Как Вы можете увидеть ниже, два div добавляются к телу документа. Другими словами, два div’a добавляются в конец html перед тем, как закрывается тэг body.

Свойства оверлейного div’а заданы в CSS для добавления opaque appearance. Окно TB_window, куда скрипт поместит картинку или другую веб страницу, используя AHAH.

$(window).resize и $(window).scroll говорят jQuery выключить TB_position, если размер окна был изменен пользователем или если пользователь прокрутил страницу вниз. Это демонстрирует, как Thickbox может оставаться в середине страницы, когда вы скроллируете или изменяете размер страницы.

Далее Cody ищет url в коде Thickbox, чтобы найти суффикс.

var urlString = /.jpg|.jpeg|.png|.gif|.html|.htm|.php|.cfm|.asp|.aspx|.jsp|.jst|.rb|.txt/g;
var urlType = url.match(urlString);
if(urlType == '.jpg' || urlType == '.jpeg' || urlType == '.png' || urlType == '.gif'){//code to show images

Если это картинка, тогда jQuery добавляет функцию, которая используется для добавления html в заданное место.

$("#TB_window").append("<a href='' id='TB_ImageOff' title='Close'><img
id='TB_Image' src='"+url+"' width='"+imageWidth+"' height='"+imageHeight+"'
alt='"+caption+"'/></a>"
 + "<div id='TB_caption'>"+caption+"</div><div
  id='TB_closeWindow'><a href='#' id='TB_closeWindowButton'>close</a></div>"); 

 $("#TB_closeWindowButton").click(TB_remove);

Иначе файл закачивается с помощью функции jQuery load().

$("#TB_ajaxContent").load(url, function(){

День 14: Javascript подсказки на стероидах

Примечание: Это обновление к моему первоначальному посту, который можно увидеть здесь: jQuery Подсказки (http://15daysofjquery.com/jquery-tooltips/20/)

Коди Линдли, автор «Thickbox», недавно выпустил «jTip – подсказка jQuery» (http://codylindley.com/Javascript/264/j … y-tool-tip)
Мне действительно нравятся некоторые дополнительные возможности (http://www.codylindley.com/blogstuff/js/jtip/), которые эти подсказки предусматривают. Уверен, что есть те из вас, которые думают, что не нуждаются в еще других подсказках, но я могу предоставить некоторые интересные заявления об идеи Коди в моей работе. Когда я посмотрел на источник html, у меня возникла одна проблема, которая имеет отношение к доступности - ссылки не работают, если javascript выключен. Я не склонен смотреть на весь javascript сквозь призму доступности, но это только казалось мне, что не может быть другой способ создать такой же эффект намного лучшим способом.

Определенно, мне не нравится идея жертвовать юзабилити (удобством) правильной ссылки на другую страницу в пользу всплывающей подсказки. Мне нравится подсказка, - и не неуважение к Коди, - но для заявления я учитываю необходимость в том, что ссылка работала несмотря ни на что.

Таким образом, вот что я получил сегодня - это незначительные изменения в скриптах Коди. Если вы не поклонник его подсказок, то мое изложение, вероятно не произведёт на вас впечатления. Но если вам нравится то, что он сделал, и недостатки ссылок, которые не будут работать с отключенным javascript, тогда это может быть вам подойтёт.

Мои Изменения
Ссылка, которая действительно заставила меня задуматься о возне с кодом – один кусочек для yahoo. Она ведет к внешнему сайту (Yahoo), имеет отличные небольшие подсказки при событии mouseover, но мне не нравится этот код тем, что он использовал для создания это:

<a href="yahoo.htm?width=175&amp;link=http://www.yahoo.com" 

name="Before You Click..."
id="yahooCopy"
class="jTip">
Go To Yahoo</a>

Поэтому я переделал немного его скрипт, и теперь тот же эффект может быть достигнут таким образом:

<a href="http://www.yahoo.com"
rel="yahoo.htm?width=175&link=yahoo&name=Before%20
%20You%20Click..."
id="yahooCopy"
class="jTip">
Go To Yahoo</a>

Улучшение: валидный HTML.
Мой новый код действует согласно w3.org

Улучшение: наименования
Пока я рассматривал код, делая неболшие изменения, я заметил, что Коди использует переменную названную ‘title’ которая была связана со значением найденным в имени ссылки. Это может сбивать с толку.

Улучшение: Юзабилити
С моим кодом у вас будет подсказка к подлинной ссылке к другому документу, внутреннему или внешнему. Или, если вы хотите только подсказку и не позаботитесь о юзабилити, вы можете убрать ссылку из кода.
Выбор за вами.

Подсказка
Коди пришел с большой концепцией и сохранил мне массу времени, проделав тяжелую работу.
Мои изменения ни в коем случае не являются критикой – это просто незначительные “щипки”, которые, я думаю, мои читатели могут оценить.

Наслаждайтесь.