Всем привет.
Есть HTML код:
<h3 class="title"><a href="http://www.site.com/bla0">Title Test</a></h3>
<img width="550" height="550" src="http://www.site.com/images/image_test1-550x550.jpg" alt="Test Imgage 1" />
<h3 class="title"><a href="http://www.site.com/bla1">Title Test</a></h3>
<img width="550" height="550" src="http://www.site.com/images/image_test2-550x550.jpg" alt="Test Imgage 2" />
Задача. Нужно при загрузке страницы, заменить в теге src текст 550x550 на 300x200 Далее нужно заменить ширину и высоту на 300 и 200
Результат должен быть такой:
<h3 class="title"><a href="http://www.site.com/bla0">Title Test</a></h3>
<img width="300" height="200" src="http://www.site.com/images/image_test1-300x200.jpg" alt="Test Imgage 1" />
Как я понимаю логика должна быть такова, мы находи класс title, потом ищем следующим за ним элемент img, находим его src и делаем замену. Но как все это сделать при загрузке странице ? максимум что мне удалось сделать, это вот это
$('title').next().each(function() {
var test = $(this).find('img').attr('src').replace("550x550","300x200");
alert(test);
});
Но как я понимаю евент должен отправлятся первей чем загрузится страница, что бы изображения уже подгружались с 300x200 даже ставил вместо var test, return, все равно не заменяет, вот тут не пойму почему (я только начал изучать js) очень интересно, но некоторые моменты не очень понятны.
Так же хотел бы знать нет ли у данного метода каких то подводных камней ? при работе с браузерами ?
Спасибо