Как быстро и весело заменить все ссылки на картинки на сами картинки? Допустим, мы ленивы, чтобы кликать и открывать все в новом окне. Можно попробовать JavaScript. Современные браузеры позволяют много чего интересного делать скриптами.
Например Опера. Подсматриваем в opera:about путь к папке User Javascript (или задаем его в настройках, если тут пусто) и кладем туда "файл.js" типа такого:
function aimg2a() {
var ll = document.getElementsByTagName('a'); //находим все ссылки на странице
var i, cI;
var replacer = [];
for(i = 0; i < ll.length; i++) {
if(ll[i].children.length == 0) continue; //пропускаем ссылки без дочерних элементов
var imgIndex = -1;
for(cI = 0; cI < ll[i].children.length; cI++) { //ищем самый первый рисунок под ссылкой
if(ll[i].children.item(cI).tagName.toLowerCase() == 'img') {
imgIndex = cI;
break;
}
}
if(imgIndex == -1) continue; //если под ссылкой нет рисунка пропускаем
var img = ll[i].children.item(imgIndex);
//сохраняем оригинальную ссылку тега img в нашем придуманном аттрибуте
var oldSrcAttr = document.createAttribute('old-src');
oldSrcAttr.nodeValue = img.src;
img.setAttributeNode(oldSrcAttr);
//подменяем аттрибует src на аттрибут href родительской ссылки. Тут браузер сам
//это дело замечает и загружает в рисунок куда ссылался родитель
img.src = ll[i].href;
//убираем жестко прописанную ширину и высоту у рисунка. У иконок часто они заданы
img.removeAttribute('width', 0);
img.removeAttribute('height', 0);
//вешаем на рисунок обработчик ошибок. Обработчик написан в стиле Оперы,
//так что может потребовать допиливания
img.addEventListener('error', function() {
//вообщем, если вдруг какая ошибка возникла, то мы переписываем
//оригинальную ссылку рисунка обратно, удаляем наш аттрибут и удаляем
//настоящий обработчик ошибок
this.src = this.getAttribute('old-src');
this.removeAttribute('old-src', 0);
this.removeEventListener('error', arguments.callee, false);
}, false);
//тут по хорошему надо рисунок поднять вверх из-под ссылки и удалить ссылку
//из DOM-дерева вообще. Но пока мы это дерево перебираем, то нехорошо
//его менять. Так что мы сохраним измененную пару рисунок-ссылка на память...
replacer.push([img, ll[i]]);
}
//... а потом в отдельном цикле и поправим наше дерево
for(i = 0; i < replacer.length; i++) {
replacer[i][1].parentNode.insertBefore(replacer[i][0], replacer[i][1]);
replacer[i][1].parentNode.removeChild(replacer[i][1]);
}
}
Я вот как-то не уверен, что если ссылка у нас была не на рисунок, а, допустим, баннер ведущий на HTML-страницу, то должен ли обработчик 'error' это дело замечать? Это место еще не доконца проверено. Если ссылка была вокруг двух рисунков или рисунков и текста (на самом деле это не очень красиво так верстать), то в конце уничтожится все, кроме первого рисунка под ссылкой.
И даже если была ошибка и 'error' её словил, то дерево мы все равно перекраиваем
Ну и плюс это тестилось только под Оперой
Ну а в конце добавляем в избранное новую ссылку
javascript:void(aimg2a());
, ставим галочку «Отображать на личной панели». И теперь у нас под рукой всегда будет кнопка, чтобы «развернуть» ссылки на картинки на текущей открытой странице.