Ще більше jQuery–Змінити розмір зображення-приклад

Я успадкувала веб-частину від клієнта старого продавця, і він став проблемою іміджу розмір.  Зображення повинні бути 60×50 але для деякого непарного причини, оригінальний постачальника змусила їх в 42×42, так, щоб вони стисло:

 

Гарне зображення

Поганий імідж

Ось розмітки (дещо спрощене письмо):

<Таблиця клас = 'extended outlook'>
  <thead>
    <TR>
      <го  Ширина ='100′>3 Вівторок</го>
    </TR>
  </thead>

  <tbody>
    <TR-клас = 'прогнози'>
      <TD ширина ='100′>
        <ul>
          <Лі клас = 'високий'>Висока: 72&Тру;F</Лі>
          <Лі клас = "низький">Низький: 44&Тру;F</Лі>
          <Лі клас = 'умови'>Сонячно
            <IMG src =’
http://deskwx.weatherbug.com/images/Forecast/icons/localized/60×50/EN/Trans/cond007.png’ Ширина ='42’ Висота ='42’ Alt =” />
          </Лі>
        </ul>
      </TD>
    </TR>

  </tbody>

</Таблиця>

Ви помітите, що навіть незважаючи на шлях до самого зображення показує належного вимір (60×50) оригінальний постачальника змусив його в 42×42.  Чому?  Божевільний.

У всякому разі, Я хотів швидко і легко вирішення цього питання, і я звернувся до jQuery.  Трюк був знайти всі відповідні <IMG> Мітки.  Я не хочу, щоб гидоту будь-які інші теги img (яких є багато).  Це трохи jQuery зробили свою справу:

<скрипт тип = текст/javascript"" src ="http://Ajax.googleapis.com/AJAX/libs/Jquery/1.5/JQuery.min.js"></сценарій>

<скрипт тип = "текст/javascript">
     $(документ).готові(функція () {

         $(' li.condition > IMG').Кожен(функція (індекс, елемент)
           
{
             $(елемент).CSS("ширина", "60"); 
             $(елемент).CSS("Висота", "50");
            });
     }); // завантаження документа
</сценарій>

Що біт код знаходить колекції <Лі> Мітки, чиї клас є "стан" і <IMG> дітей.  Потім він спроектувала через все це.  Працював як шарм.

Я ймовірно може оптимізувати його, але я ніколи не був на unix хлопцем, вирішеня π Щоб 18 точність цифр за допомогою sed і awk, і я не такий, якщо jQuery хлопець або посмішка.

</кінець>

Підписатися на мій блог.

Йди за мною на Twitter в http://www.twitter.com/pagalvin

Дати відповідь

Ваша електронна адреса не буде опублікований. Обов'язкові поля позначені * *