Читать ...
- /много/ простых способов (HTML, CSS и JavaScript) (data5r.narod.ru) - надо бы законспектировать ...
- способ 6+
Приведем еще один простейший способ переход от малого размера к ЛЮБОМУ размеру с использование стиля. Клик - увеличение размера, другой клик - возврат к исходному размеру.
<style>
.a img{
width:100px;
}
.b img{
width:600px;
}
</style>
<body>
<div class="a" onclick="this.className = (this.className == 'a' ? 'b' : 'a' )"
Кодировка
this.className = (this.className == 'a' ? 'b' : 'a') - есть не что иное, как сокращенная запись условного оператора ( в таком виде он называется тернарным оператором). По сути тернарный оператор является сокращенной записью оператора if-else, записанного в форме: if (условие) переменная = первое выражение; else переменная = второе выражение
Тернарный оператор содержит условие, за которым следует знак вопроса (?), затем выражение, которое выполняется, если условие истинно (первое выражение), далее следует двоеточие (:), и, наконец, выражение, которое нужно выполнить, если условие ложно (второе выражение). Знак ? соответствует русскому «то», знак : соответствует русскому «иначе». Кодировку (this.className == 'a' ? 'b' : 'a' ) можно произнести так: ЕСЛИ класс элемента, по которому щелкает курсор, имеет имя `a`, ТО выполняется действие после знака ? (класс `а` заменяется классом `b`), ИНАЧЕ выполняется действие после знака : то-есть, класс `b` заменяется классом `а`. Другими словами, при первом клике на картинку она изменяет свой размер, при втором клике происходит возвращение к исходному размеру.
-
-
3
*