Помогите написать javascript прячущий ссылку?

flaps · №1

Нужно, чтобы была ссылка с надписью "показать картинку". При клике на которую ссылка бы исчезала и на её место грузилась бы картинка.

Показ картинки делаю так :

Выделить код

Код:

<a HRef='javascript:document.images[image01].src="pi01.jpg"'>показать картинку</a>

А как удалить ссылку?

AKS · №2

можно попробовать

Выделить код

Код:

<a.... onClick="this.display='none'">...</a>

Могу ошибаться...

drdaeman · №3

Выделить код

Код:

<script type="text/javascript">
/*<![CDATA*/
  function replaceWithImage(objLink, strURL) {
    var objContainer = objLink.parentNode;
    // Проверка на поддержку нужной функциональности DOM2
    if (objContainer && document.createElement && objContainer.replaceChild && objLink.getAttribute) {
      var objImage = document.createElement('img');
      if (objImage) {
        objImage.setAttribute('src', strURL);
        objImage.setAttribute('alt', objLink.hasAttribute('title') ? objLink.getAttribute('title') : '');
        objContainer.replaceChild(objLink, objImage);
        return false;
      }
    } else {
      // Костыль для старых браузеров, не поддерживающих DOM2, но реализующих innerHTML (IE5.x)
      if (objContainer.innerHTML) {
        var strAlt = '';
        if (objLink.title) { strAlt = objLink.title; }
        objContainer.innerHTML = '<img src="' + strURL + '" alt="' + strAlt + '" />';
        return false;
      }
    }
    return true;
  }
/*]]>*/
</script>

<div>
  <a href="URL такой же страницы но с картинкой (для пользователей без JS)" onclick="return replaceWithImage('URL картинки')">
</div>

Вместо <div> можно любой применимый по смыслу контейнер (параграф, для inline - span). Кроме ссылки в контейнере ничего быть не должно (иначе оно пропадет в старых браузерах).
Да, писалось с ходу прямо в форме ответа, поэтому могут быть опечатки или небольшие ошибки в мелочах, тестировать лень. :)

edit: Угу, как знал, будут ошибки. Как минимум - один return пропустил :) Fixed.

Отредактировано drdaeman (09-08-2006 20:08:48)

Punk_UnDead · №4

drdaeman
костыль не костыль, а работает пока везде одинаково
в отличии от setAttribute который может не проканать

править код или же пользоваться исключительно объектную модель это дело автора
кстати сообщу, что мозила и осёл создадут разный код(тоесть содержимое innerHTML контейнера будет разным) не вздумайте удалять объекты через innerHTML можете попасть на интересные багофичи, только через DOM

drdaeman · №5

в отличии от setAttribute который может не проканать

Да, согласен, лучше было бы:

Выделить код

Код:

if (objImage.setAttribute) {
  objImage.setAttribute('src', strURL);
  objImage.setAttribute('alt', objLink.hasAttribute('title') ? objLink.getAttribute('title') : '');
} else {
  objImage.src = strURL;
}

править код или же пользоваться исключительно объектную модель это дело автора

IMHO - лучше стандартное решение (потому что оно где уже работает там и будет поддерживаться в разумно обозримом будующем вне зависимости от идей разработчиков что из "нестандарта" держать, а что нет), а вот если оно оказывается недоступно - тогда известные "костыли".
Но так - да, кому как нравится, разумеется.

не вздумайте удалять объекты через innerHTML можете попасть на интересные багофичи, только через DOM

Большие конструкции с кучей всего - да, слышал что бывают проблемы. С одной ссылкой (как здесь) никогда не встречал, ни с добавлением ни с удалением. Можно поподробнее?

Punk_UnDead · №6

drdaeman

Большие конструкции с кучей всего - да, слышал что бывают проблемы. С одной ссылкой (как здесь) никогда не встречал, ни с добавлением ни с удалением. Можно поподробне

я имел ввиду непосредственное удаление через правку innerHTML
а если просто заменить, проблем не будет
а вот например удалить третью ссылку - это уже вызовет некоторые проблемы

Fili · №7

Извиняюсь за офтопик, но тему отдельную создавать думаю бессысленно, поэтому решил сюда написать
Проблема с разметкой :
рисунок в Фотошопе делится на части и сохраняется как хтмл страница со ссылками на рисунке. У меня страничка на XHTML. Код вставляю, правлю и вижу следующее : между рисунками появляется отступ. Стоит закомментировать Doctype все становится нормально - выглядит как один рисунок. Пытался с помощью CSS исправить - не получается...
Будте так любезны, подскажите как исправить

Punk_UnDead · №8

теги все закрыты где положено?
соответствие стандартам вообще наступает?

Fili · №9

Да, все путем. Исправил все ошибки,валидатор не жалуется..

Punk_UnDead · №10

дай код чтоли, или страничку в сети опубликуй, тогда и посмотрим

Punk_UnDead · №11

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

Выделить код

Код:

<img src="logo.png" alt="лого" style="display: block;" />

Fili · №12

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

style="display: block

Типа пишешь силь такой и все становится как надо?

AKS · №13

... style="display: block;" ...

Это же по-умолчанию... Какие проблемы с этим?

Punk_UnDead · №14

AKS
по умолчанию для картинки inline или ты не знал?
подозреваю это потому, что резервируется место для того, что будет после картинки
а ещё есть вариант пхать всё в фон

Полезная информация

№105-08-2006 05:13:46