Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 15.10.2015, 14:39
Новичок на форуме
Отправить личное сообщение для sexys Посмотреть профиль Найти все сообщения от sexys
 
Регистрация: 15.10.2015
Сообщений: 5

Скрипт для изменения свойст изображения
есть изображение.
Нужно через input, которые под картинкой задать высоту и ширину, а также толщину и цвет рамки вокруг картинки вместе с инпутами , также есть две кнопки просмотр и отменить, т.е. задали размеры,альтернативный текст, потом нажали кнопку просмотр и должна картинка изменится в размерах...нужно функция небольшая, кому не сложно помогите
Ответить с цитированием
  #2 (permalink)  
Старый 15.10.2015, 16:03
Аватар для EmperioAf
Профессор
Отправить личное сообщение для EmperioAf Посмотреть профиль Найти все сообщения от EmperioAf
 
Регистрация: 15.01.2015
Сообщений: 622

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>ГГ</title>
<style>
.nature-image {
    border: 0 solid black;
    opacity: .7;
    transition: opacity .4s ease;
    cursor: pointer;
}

.nature-image:hover {
  opacity: 1;
}

.about-image>label {
  display: block;
}

</style>
</head>
<body>
<a href="http://design-kmv.ru/wp-content/uploads/2014/12/koltsogora.jpg"><img class="nature-image" src="http://design-kmv.ru/wp-content/uploads/2014/12/koltsogora.jpg" alt="скалы от природы"></a> 
<div class="about-image">
<label for="height">Высота: <input id="height" type="text" value="200"> px </label>
<label for="width">Ширина: <input id="width" type="text" value="200"> px </label>
<label for="thickness">Толщина: <input id="thickness" type="text" value="20"> px </label>
<label for="color">Цвет: <input id="color" type="color"></label>
</div>
<button class="see">Просмотреть</button>
<button class="cancel">Отменить</button>
    <script>
var img = document.querySelector('.nature-image');
var heightText = document.getElementById('height');
var widthText = document.getElementById('width');
var thicknessText = document.getElementById('thickness');
var colorText = document.getElementById('color');

var computedStyle = getComputedStyle(img);
var height = computedStyle.height;
var width = computedStyle.width;

var thickness = computedStyle.borderWidth;
var color = computedStyle.borderColor;
console.log(thickness);
console.log(color);

document.querySelector('.see').onclick = function(){
  img.style.height = +heightText.value+'px';
  img.style.width = +widthText.value+'px';
  img.style.borderWidth = +thicknessText.value+'px';
  img.style.borderColor = colorText.value;
}

document.querySelector('.cancel').onclick = function(){
  img.style.height = 390 + 'px';
  img.style.width = 550 + 'px';
  img.style.borderWidth = +thicknessText.value+'px';
  img.style.borderColor = colorText.value;
}
    </script>
</body>
</html>
Ответить с цитированием
  #3 (permalink)  
Старый 19.02.2019, 16:54
Новичок на форуме
Отправить личное сообщение для Эдем Посмотреть профиль Найти все сообщения от Эдем
 
Регистрация: 19.02.2019
Сообщений: 1

Объясните нубу (лучше с примером), как нужно изменить этот скрипт, чтобы работало без кнопки.

Т.е. чтобы сразу превьюха отрисовывалась.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Скрипт для изменения фона и шапки при переходе на страницу Серега187 Элементы интерфейса 12 09.10.2013 16:39
Посоветуйте пожалуйста скрипт для показа изображений с высоким разрешением Bandicoot Общие вопросы Javascript 0 29.07.2013 22:26
поиск классов внутри тега yozuul jQuery 24 14.06.2013 22:00
Проблема: Jquery - эффект раскрытия LightBox для изображения. woody2 jQuery 0 16.09.2011 00:10
Существует ли скрипт для изменения размера изображений? Shad Общие вопросы Javascript 28 22.04.2009 15:32