Ищу самый простой способ в CSS или JavaScript...
HTMLувеличение изображения масштабирование по щелчку мыши действие при нажатии мышки изменение размеров изображения
Есть на странице определенное изображение, длина и ширина указаны 100%;
Необходимо при щелчке на это изображение увеличить длину и ширину до 150%(при этом изображение должно остаться тоже,меняются только свойства)...
Ну и при повторном клике мышкой на картинке уменьшить длину и ширину обратно до 100%.
Прибегнуть можно только CSS или JavaScript.
Знаю что решение простое должно быть, но увы туплю((
Код:
<body>
<IMG SRC="http://www.cyberforum.ru/images/shem_0100.jpg" name="pic" width="100%" height="100%"/>
</body>
<IMG SRC="http://www.cyberforum.ru/images/shem_0100.jpg" name="pic" width="100%" height="100%"/>
</body>
Код:
<IMG SRC="http://www.cyberforum.ru/images/shem_0100.jpg" name="pic" width="100%" height="100%"
onclick="this.setAttribute('width', '150%'); this.setAttribute('height', '150%')"
/>
onclick="this.setAttribute('width', '150%'); this.setAttribute('height', '150%')"
/>
С переключением обратно, если не задумываться о красоте кода, получится что-то такое:
Код:
<script>var state=100</script>
<IMG SRC="http://www.cyberforum.ru/images/shem_0100.jpg" name="pic" width="100%" height="100%"
onclick="state=(state+50)%100 + 100; this.setAttribute('width', state + '%'); this.setAttribute('height', state + '%')"
/>
<IMG SRC="http://www.cyberforum.ru/images/shem_0100.jpg" name="pic" width="100%" height="100%"
onclick="state=(state+50)%100 + 100; this.setAttribute('width', state + '%'); this.setAttribute('height', state + '%')"
/>
Спасибо за помощь)