Добавления тегу IMG свойств ALT и TITLE из свойства SRC
Рад приветствовать, в этой статье я хотел бы с вами поделится одним полезным скриптом, который берет из свойства SRC изображения URL проводит с ним некоторые манипуляции? получает название картинки и записывает его в title и alt. Этот скрипт будет полезен людям(как и мне самому) которым ну очень уж не очень хочется писать эти важные свойства изображения.
Первым делом возьмем набор каких нибудь изображений для этого используем тег
<img src="">
или просто возьмите следующий код
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251" /> <title>Изменение атрибуда ALT у изображени PONTYK.com.ua</title> <link rel="stylesheet" type="text/css" href="resets.css"/> </head> <body> <img src="img/1.jpg" width="250" /> <img src="img/2.jpg" width="250" /> <img src="img/3.jpg" width="250" /> <img src="img/3.jpg" width="250" /> <img src="forum/img/5.jpg" width="250" /> <img src="img/sac/wdas/5.jpg" width="250" /> <img src="asdasdasd5.jpg" width="250" /> </body> </html>
Когда изображения добавлены, нужно добавить скрипт для обработки этих(всех) изображений, очень желательно чтобы этот скрипт был вставлен перед закрывающимся тегом body, внизу страницы
Для того чтобы вам было понятно что делает весь этот код, я его прокомментировал.
<script type="text/javascript"> function changeAlt() { // получаем все объекты изображения на странице var allImage = document.getElementsByTagName("IMG"); // запускаем перебор этих элементом циклом for (i = 0; i < allImage.length; i ++) { // теперь в новую переменную получаем и записываем атрибут src, при этом разделяем его и переворачиваем встроенными функциями JavaScript var attrSrc = allImage[i].getAttribute("src").split("/").reverse(); // тут разделяем название изображения и разширения, и записываем в переменную attrSrc[0] = attrSrc[0].split("."); // теперь задаем все атрибуты allImage[i].setAttribute("title", attrSrc[0][0]); allImage[i].setAttribute("alt", attrSrc[0][0]); } } // запуск функции onload = changeAlt; </script>