DMZ
09:52 10-01-2009
Как быстро и весело заменить все ссылки на картинки на сами картинки? Допустим, мы ленивы, чтобы кликать и открывать все в новом окне. Можно попробовать 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());
, ставим галочку «Отображать на личной панели». И теперь у нас под рукой всегда будет кнопка, чтобы «развернуть» ссылки на картинки на текущей открытой странице.