Продолжаем мини-сериал посвященный псевдоклассу :focus. В первой части рассмотрен частный случай - вывод графики во всплывающем слое при клике на преьюшку.

Воспользуемся описанным там приемом.

html

Вариант для выделенного слова или фразы:

<div class="cliktxt">
Текст...
  <span tabindex="1" title="">слово</span>
Много текста...
  <dl>
    <dt></dt>
    <dd>
      <img src="ХХХ.xxx">
      <p>Поясняющий текст</p>
    </dd>
  </dl>
</div>

Вариант для сноски:

<div class="cliktxt">
Текст...
  <sup tabindex="1" title="">[1]</sup>
Много текста...
  <dl>
    <dt></dt>
    <dd>
      <img src="ХХХ.xxx">
      <p>Поясняющий текст</p>
    </dd>
  </dl>
</div>

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

Как видно из html-кода, отсутствует практически всегда полагающийся в таких случаях тег <a>, что наклыдывает определенные ораничения и ведет к усложнению html-конструкции, а также не работоспособности в браузерах IE6(7), но в этом и заключается главный смысл данного извращения :)

Одной из причин исключение тега <a> из html, является помощь поисковикам, которые любят добиться во все ссылки, даже с пустым url, находящиеся на web-странице, мы же не даем им ни единого шанса куда-то там уйти и возможно уже никогда не вернуться. Не стоит забывать и о странностях "Хитрых контор" :)

css

.cliktxt {margin:15px 25px 15px 20px;padding:0px 0;}
.cliktxt span,.cliktxt sup {color:#a00;cursor:pointer;outline:0;}
.cliktxt span:hover,.cliktxt sup:hover {color:#00a;}
.cliktxt dl {margin:0;padding:0;display:none;}
.cliktxt dl dd {
  background:#ddd;border:#000 1px solid;
  margin:0;padding:7px 4px;width:300px;
  position:fixed;top:1%;left:18%;z-index:100;
}
.cliktxt dl img {
  border:#000 1px solid;float:left;
  margin:7px 8px 0;width:140px;height:auto;
}
.cliktxt dt {
  background:#ccc;border:#000 1px solid;
  opacity:0.2;filter:alpha(opacity=20);z-index:100;
  position:fixed;top:0;right:17%;bottom:0;left:17%;
}
.cliktxt :focus + dl {display:block;}
.cliktxt dd p {font:11px/1.2 arial;margin:0 10px;padding:4px 0;}

В стилях нет ничего особенного, все легко настраивается, плюс полная независимость предлагаемого от любых движков, простейшая интеграция в любой текст, любой web-страницы. Стили загоняются в основной файл css, html хранится под рукой и по мере необходимости выбранный вариант вставляется в тело поста, далее по образцу и подобию в соответствующие места добавляется текст, прописывается путь к графике, если она будет использована, в противном случае удаляется тег <img> и все.

Пример использования со словом находится в третьем абзаце.

Тест страница.