Поставить кнопку вместо картинки

@Aeliot · Регистрация: 17.11.2011

Студворк — интернет-сервис помощи студентам

Привет, всем.
У меня стоит задача все картинки на странице заменить на кнопки "показать" по нажатии которой кнопка пропадет (буден скрыта), а вместо неё появится картинка.

Задача стоит не в отображении скрытой картинки, а именно замена одного тега DOM другим.
Вставку тега img можно и нужно поручить javascript, а вот "найти" и "вырезать" как раз для этого раздела.

Итак, вопрос.
Как найти тег img и заменить его на buttom, сохранив все атрибуты исходного тега для последующей вставки.

@Aeliot · 21.11.2013, 11:55 **[ТС]**

Решил.
Может ещё кому понадобится.

PHP
1
2
3
4
5
6
7
if(preg_match_all('/<\s*img([^>]+)>/i', $html, $matches)){
    foreach ($matches[1] as $k => $v){
        $buttom = '<button type="button" onClick="injectImg(this, \' '
                .str_replace('"', '"', str_replace('\'', ''', substr(trim($v),0,-1))).'\')">Show img</button>';
        $item->new_data = str_replace($matches[0][$k], $buttom, $html);
    }
}

@Aeliot · 22.11.2013, 19:44 **[ТС]**

В указанной формуле два реплейса меняют спецсимволы на их 16-ричное представление. Просто здесь отображается не корректно.

@Aeliot · 27.11.2013, 12:06 **[ТС]**

Во за одно и скрипт, вставляющий обратно картинку вместо кнопки:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
function injectImg(el, atrs)
{
    // (1) создаем временный элемент
    var container = document.createElement('div');
    
    // (2) записываем img как innerHTML временного элемента
    container.innerHTML = '<img '+atrs+'/>';
    
    // (3) теперь готовый элемент можно получить и вернуть 
    var img = container.firstChild;
 
    // скрываем элемент
    el.style.display='none';
 
    // возвращаем результат
    return el.parentNode.insertBefore(img, el);
}

Новые блоги и статьи Все статьи Все блоги /
Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .	Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL3_image 8Observer8 27.01.2026 Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .	Влияние грибов на сукцессию anaschu 26.01.2026 Бифуркационные изменения массы гриба происходят тогда, когда мы уменьшаем массу компоста в 10 раз, а скорость прироста биомассы уменьшаем в три раза. Скорость прироста биомассы может уменьшаться за. . .
Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android 8Observer8 26.01.2026 Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .	Установка Android SDK, NDK, JDK, CMake и т.д. 8Observer8 25.01.2026 Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .	Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf 8Observer8 25.01.2026 Содержание блога Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера Скачайте. . .	Использование SDL3-callbacks вместо функции main() на Android, Desktop и WebAssembly 8Observer8 24.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .

@Aeliot 177 / 62 / 3 Регистрация: 17.11.2011 Сообщений: 318

	Поставить кнопку вместо картинки 17.11.2013, 20:56. Показов 757. Ответов 3 Метки нет (Все метки) Привет, всем. У меня стоит задача все картинки на странице заменить на кнопки "показать" по нажатии которой кнопка пропадет (буден скрыта), а вместо неё появится картинка. Задача стоит не в отображении скрытой картинки, а именно замена одного тега DOM другим. Вставку тега img можно и нужно поручить javascript, а вот "найти" и "вырезать" как раз для этого раздела. Итак, вопрос. Как найти тег img и заменить его на buttom, сохранив все атрибуты исходного тега для последующей вставки. 0

@Aeliot 177 / 62 / 3 Регистрация: 17.11.2011 Сообщений: 318
	22.11.2013, 19:44 [ТС]
	В указанной формуле два реплейса меняют спецсимволы на их 16-ричное представление. Просто здесь отображается не корректно. 0