Ви не увійшли. Будь ласка, увійдіть або зареєструйтесь.
Ласкаво просимо вас на україномовний форум з програмування, веб-дизайну, SEO та всього пов'язаного з інтернетом та комп'ютерами.
Будемо вдячні, якщо ви поділитись посиланням на Replace.org.ua на інших ресурсах.
Для того щоб створювати теми та надсилати повідомлення вам потрібно Зареєструватись.
Український форум програмістів → Web-сервери → Простенька веб-сторінка
Для відправлення відповіді ви повинні увійти або зареєструватися
Як без досвіду в вебі швидко зробити таку сторінку:
Два спадних меню, в яких вибираємо змінну var1 і var2, відповідно.
Після вибору виводиться картинка з назвою var1_var2.png
Картинка масштабується при зміні розміру вікна браузера.
Що є:
Доступ до сервера зі статичним IP, і папка з кількома тисячами зображень там.
Досвід в Python і C++.
без досвіду в вебі швидко зробити
Лише за допомогою CMS у яких є конструктори в один клік.
P.S. Хоча завдання не таке й складне, та може бути реалізоване парою JS функций.
P.S. Хоча завдання не таке й складне, та може бути реалізоване парою JS функций.
Напевне так і зроблю.
Ок, спадне меню роблю як
<select id="ddlViewBy">
<option value="1">test1</option>
<option value="2">test2</option>
<option value="3">test3</option>
</select>Але в мене сотня можливих значень, як їх зчитувати з файлу, щоб не вводити врчучну?
Задав масивом
<select id="selectNumber" name="selectNumber">
<option>Choose a number</option>
</select>
<script>
var select = document.getElementById("selectNumber");
var options = ["test1","test2","test3",];
for(var i = 0; i < options.length; i++) {
var opt = options[i];
var el = document.createElement("option");
el.textContent = opt;
el.value = opt;
select.appendChild(el);
}
</script>Як вивести вибрану величину?
Задав масивом
<select id="selectNumber" name="selectNumber"> <option>Choose a number</option> </select> <script> var select = document.getElementById("selectNumber"); var options = ["test1","test2","test3",]; for(var i = 0; i < options.length; i++) { var opt = options[i]; var el = document.createElement("option"); el.textContent = opt; el.value = opt; select.appendChild(el); } </script>Як вивести вибрану величину?
Так вона вже в вас виводиться, функцією
select.appendChild(el);Куди виводить? Після вибору нічого ніде не появляється.
Приблизно так: https://jsfiddle.net/fz47Lv1f/
Приблизно так: https://jsfiddle.net/fz47Lv1f/
Дякую.
В мене кількість опцій var більше ста. Можу задати їх масивом. Як тоді циклом їх читати для відображення в спадному меню?
Ну у вас же є код для додавання опцій з масиву, так і робіть. Чи ви щось інше маєте на увазі під "читати для відображення в спадному меню"?
як їх зчитувати з файлу, щоб не вводити врчучну?
Гадаю саме час сказати що та навіщо ты пишешь. Бо "читати з файлу" у WEB не можливо. Тобто можливо, але так ніхто не робить принаймі у коді сторінки. А тому тобі не лише сторінку до браузеру, а й бекенд прийдеться писати. А це вже трішечки складніше, та залежить від багатьох умов, наприклад вид того де и як зберігати твоі картинки та як вони каталогізовані.
Приблизно так: https://jsfiddle.net/fz47Lv1f/
Скопіював код, але зображення не виводиться, помилки теж ніякої не виводить. Код виглядає ось так
<html>
<header><title>This is title</title></header>
<body>
<select size="1" id="part_1">
<option value="var1">var1</option>
<option value="var2">var2</option>
<option value="var3">var3</option>
</select>
<select size="1" id="part_2">
<option value="var4">var1</option>
<option value="var5">var2</option>
<option value="var6">var3</option>
</select>
<img id="target">
<script>
$("select").on('change',()=>{
var part_1=$('#part_1').val();
var part_2=$('#part_2').val();
var link = 'http://c.connexun.com/relation/ukr_fin.png';
$("#target").attr('src',link);
$("#target").attr('alt',link);
});
</script>
</body>
</html>Файл ukr_fin.png міститься в тій самій папці що й index.html
Хоча на https://jsfiddle.net/fz47Lv1f/1/ працює з http://c.connexun.com/relation/ukr_fin.png
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Cache-Control" content="no-cache" />
<script>
var Img,Combo1,Combo2;
function CreateSelector(aVar){
let Combo=document.createElement('SELECT');
for(let i=0;i<aVar.length;i++){
let Opt=document.createElement('OPTION');
Opt.innerHTML=aVar[i];
Opt.Data=aVar[i];
Combo.appendChild(Opt);
};
document.body.appendChild(Combo);
return Combo;
}
function ifchange(){
Img.src=(Combo1.options[Combo1.selectedIndex].Data)
+'_'+(Combo2.options[Combo2.selectedIndex].Data)
+'.png'
;
}
function ifload(){
source={
var1:['var1','var2']
,var2:['var4','var5']
};
Combo1=CreateSelector(source.var1);
Combo2=CreateSelector(source.var2);
Img=document.createElement('IMG');
document.body.appendChild(Img);
Combo2.onchange=ifchange;
Combo1.onchange=ifchange;
};
</script>
</head>
<body onload="ifload()">
</body>
</html>Vi, просто біла сторінка http://c.connexun.com/relation/
У тебе в relation нема файлов з картинками.
Підкорегуй адресу звідки картинку грузити 
У тебе в relation нема файлов з картинками.
Підкорегуй адресу звідки картинку грузити
Прописав:
function ifchange(){
Img.src='http://c.connexun.com/relation/ukr_fin.png'
;
}Без змін. Навіть два спадні меню не виводяться.
Без змін.
Де знаходиться ukr_fin.png?
Якщо в адресній срочці браузера прописати адресу до файлу, браузер його покаже чи ні?
Без змін.
Де знаходиться ukr_fin.png?
Якщо в адресній срочці браузера прописати адресу до файлу, браузер його покаже чи ні?
Покаже, ось він http://c.connexun.com/relation/ukr_fin.png
І тут його показує https://jsfiddle.net/fz47Lv1f/1/
Ще раз:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Cache-Control" content="no-cache" />
<script>
var Img,Combo1,Combo2;
function CreateSelector(aVar){
let Combo=document.createElement('SELECT');
for(let i=0;i<aVar.length;i++){
let Opt=document.createElement('OPTION');
Opt.innerHTML=aVar[i];
Opt.Data=aVar[i];
Combo.appendChild(Opt);
};
document.body.appendChild(Combo);
return Combo;
}
function ifchange(){
Img.src=' http://c.connexun.com/relation/'+(Combo1.options[Combo1.selectedIndex].Data)
+'_'+(Combo2.options[Combo2.selectedIndex].Data)
+'.png'
;
}
function ifload(){
source={
var1:['','ukr','var2']
,var2:['','fin','var5']
};
Combo1=CreateSelector(source.var1);
Combo2=CreateSelector(source.var2);
Img=document.createElement('IMG');
document.body.appendChild(Img);
Combo2.onchange=ifchange;
Combo1.onchange=ifchange;
};
</script>
</head>
<body onload="ifload()">
</body>
</html>Перевірив на своєму - все показує, колі вибирати й там й там.
Оновив, все одно біле поле без меню і в Хромі і Мозілі. Подивіться самі http://c.connexun.com/relation/
Для відправлення відповіді ви повинні увійти або зареєструватися