Міністерство освіти і науки України
Інститут підприємництва та перспективних технологій при
Національному університеті «Львівська політехніка»
Кафедра «Інформаційні системи і технології»
КУРСОВА РОБОТА
з дисципліни «Web-технології»
на тему:
Розробка web-сайту “Квіти-онлайн”
з використанням технології JavaScript.
Виконала студентка групи КН-44з Напиши своє ім’я
_________________
№ залікової книжки
Керівник роботи: Марусенкова Т.А.
Львів-2009
З А В Д А Н Н Я
на курсову роботу з дисципліни
" Web-технології "
студенту групи КН-44з Клим
Т е м а: “ Розробка web-сайту “Квіти-онлайн”
з використанням технології JavaScript ”
ЗМІСТ ЗАВДАННЯ ТА КАЛЕНДАРНИЙ ПЛАН ЙОГО ВИКОНАННЯ
ЗАВДАННЯ ПРИЙНЯТО ДО ВИКОНАННЯ: ____________ 04.05.2009
пiдпис студента
Керівник роботи: _______________ / Марусенкова Т.А./
підпис керівника роботи
Вступ.
В даній роботі я створюю web-сайт “Квіти-онлайн” для фірми яка спеціалізується по виконанню та реалізації квіткових букетів. В процесі розробки я буду використовувати скриптову мову JavaScript для написання функції, які будуть забезпечувати необхідний функціонал сайту.
Якщо Ви запитаєте будь-якого керівника, навіщо їх компанії потрібен власний веб-сайт, то, швидше за все, не отримаєте конкретної відповіді. В кращому разі, почуєте загальні міркування про те, що Інтернет - це престижно і модно, що за глобальною мережею майбутнє...
Все це й справді так. Корпоративний сайт - це дуже зручний і багатофункціональний бізнес-інструмент.
Яку мету переслідують всі компанії?
І відповідь аж надто проста, адже мета одна. Це отримання прибутку. Для її досягнення використовуються різноманітні завдання, а саме збільшення впізнанності компанії, пошук партнерів, створення ефективної структури і так далі. Для досягнення цих цілей використовуються різні бізнес-інструменти. І корпоративний веб-сайт є, мабуть, найбільш універсальним із них.
Чому Інтернет?
Та тому, що реклама на телебаченні та радіо надто обмежена часом. Зовнішня реклама, а також реклама в друкарській продукції обмежена розмірами. Сайт може містити достатню кількість сторінок, щоб передати всю інформацію про фірму. При цьому обсяг аудиторії Інтернету величезний, а вартість інтернет-реклами відносно невисока. Крім цього інтернет-реклама ненав'язлива (а це важливо) і легше досягає цільової аудиторії. Величезна кількість людей для пошуку інформації, товарів і послуг удається до допомоги Інтернету.
Якщо Вас все ще цікавить - навіщо потрібний сайт
Дуже часто я чую слова керівників компаній: «Яка користь від сайту, якщо діяльність нашої компанії не має відношення до Інтернету?». Ви абсолютно маєте рацію, сайт потрібен не Вам, він необхідний Вашим потенційним клієнтам і партнерам, навіть якщо Ваша компанія не веде інтернет-бізнес. Люди щодня ведуть пошук необхідної інформації про товари і послуги в Інтернеті і чи знайдуть вони сайт Вашої компанії, залежить від Вас.
Давайте розглянемо таку ситуацію:
Мені необхідно якийсь товар/послуга, але я не знаю скільки це коштує і яка компанія може мені запропонувати те, що я шукаю. Що ж мені робити? Ну звичайно ж те, що найпростіше - спробую знайти інформацію в Інтернеті. В результаті пошуку я потраплю на сайт. Що б я там хотіла побачити? В першу чергу інформацію про те, що мені є необхідним. Потім я захочу дізнатися про саму організацію, її адресу й телефон. Ще краще, якщо на сайті буде схема проїзду і форма зв'язку з менеджером. Наявність сайту говорить про солідність організації, її турботу про клієнтів і серйозний підхід.
Отже, протягом 10 хвилин я отримаю всю необхідну інформацію для створення позитивного рішення про покупку товару або замовлення послуги. Будьте певні, так само поступить більшість.
Чи зможе сайт збільшити продажі?
Однозначно так. За даними опитувань, більше 40% покупців ухвалюють рішення про покупку, досліджуючи веб-сайт фірми. До того ж, більше 30% сучасних покупців шукають необхідні їм товари і послуги через Всесвітню Мережу. І їх кількість постійно росте.
Тож, по перше, сайт для компанії - це свого роду незалежне електронне ЗМІ, комунікативний канал, де не тільки розміщується інформація про компанію, викладаються статті, але і здійснюються різного роду експериментальні проекти в області брендингу, інновацій, дизайну.
По друге, сайт для компанії - це зв'язок з різними цільовими аудиторіями: потенційними та існуючими споживачами продукції, оптовими і роздрібними посередниками, наявними і потенційними інвесторами.
І якщо Ви йдете в ногу з часом, ростете і плануєте свій розвиток, завжди відкриті потенційним клієнтам та стратегічним партнерам, то сайт - це вже необхідність на сьогодні.
Це всесвітній офіс, доступний кожному в будь-якій точці планети, і який працює 24 години на добу.
2. Формулювання задачі, методи та засоби її розв’язування
Мета : розробити веб-сайт, який буде візиткою фірми і водночас зможе забезпечити якісний сервіс для користувачів . На сайті потрібно реалізувати зручний функціонал та зворотній зв'язок з користувачами використовуючи технології JavaScript, надати можливість переглядати існуючі види продукції, замовляти квіти через Інтернет, спростити процес придбання квітів.
Для реалізації додаткових функції сайту буде використана технологія JavaScript. JavaScript Java script — це мова програмування, використовується у складі html сторінок, з метою збільшення функціональності сайту. Java script був розроблений фірмою Netscape в співпраці з Sun Microsystems на базі мови Sun's Java. Java скрипти виконуються на стороні клієнта, хоча спочатку Liveware — попередник java script, був серверною мовою програмування. Отже, за допомогою JavaScript можна створювати красиві і інтерактивні веб сторінки, що неможливо зробити стандартними тегами html. Скрипти виконуються в результаті яких-небудь подій, ініційованих діями користувача. Це може бути — наведення курсора, клік і т.д. Java script дозволяє створювати функціональні веб сторінки.
3. Опис структури та роботи web-сайту.
Веб-сторінка складається з таких функціональних та інформаційних елементів: шапка сайту, навігаційне меню, квітковий кошик (блок який отримує, опрацьовує та відображає інформацію про замовлення користувача), контактна форма, форма для замовлення товару, головний контейнер який містить основну інформаційну частину сайту.
Шапка сайту:
Навігаційне меню:
При наведенні курсора на пункт меню, змінюється колір елемента меню, а також додається зображення квітки з лівого краю.
Квітковий кошик
Якщо користувач клацне лівою клавішею мишки по картинці букета у головному контейнері, то вона автоматично відобразиться у кошику, а також обчислиться сумарна ціна кошику, за умови що кошик не є заповнений. Максимальна кількість елементів кошику – дев’ять. Якщо кошик заповнений користувач отримає повідомлення :
Контактна форма
Форма для замовлення товару:
Головний контейнер
Вигляд сайту у браузері Firefox.
Щоб придбати букет користувачу достатньо клацнути по картинці , після чого букет потрапить у його квітковий кошик в якому також буде відображена ціна букета або сумарна ціна всіх букетів якщо їх декілька.
Далі потрібно натиснути кнопку купити у блоці квіткового кошика, з’явиться форма для замовлення товару в якій буде вказано найменування букетів кошика, вартість кожного букета, сумарна ціна, користувачу потрібно лише ознайомитись з інформацією, заповнити поле ім’я та номер телефону і натиснути кнопку Я хочу купити ці квіти за «сума» грн.
4. Опис функцій на мові JavaScript
Функція forma2() здійснює перевірку чи на наявність даних у кожному полі форми, якщо дані введені тоді колір поля змінюється на зелений, інакше на червоний і виводиться повідомлення про те, що поле пусте.
Також функція перевіряє чи правильно заповнене поле адреса електронної пошти.
function forma2() {
var subfield1;
var subfield2;
var subfield3;
subfield1 = document.getElementById("name").value;
subfield2 = document.getElementById("email").value;
subfield3 = document.getElementById("phone").value;
if (subfield1==null || subfield1=="") {
document.form1.name.style.background="red";
alert(document.getElementById("name").name + " is empty");
} else {
document.form1.name.style.background="green";
}
if (subfield3==null || subfield3=="") {
document.form1.phone.style.background="red";
alert(document.getElementById("phone").name + " is empty");
} else {
document.form1.phone.style.background="green";
} if (subfield2==null || subfield2=="") {
document.form1.email.style.background="red";
alert(document.getElementById("email").name + "is empty");
} else {
document.form1.email.style.background="green";
with (subfield2)
{
apos=indexOf("@");
dotpos=lastIndexOf(".");
if (apos<1||dotpos-apos<2)
{document.form1.email.style.background="red";alert("mail incorrect");return false;}
else {return true;}
}
}
}
Функція cleanpic(price) викликається в момент натискання на картинку квіткового букета в кошику і зменшує загальну суму товірів у кошику на значення ціни елемента.
function cleanpic(price){
var pricepic = parseInt(price);
var allpricevalue = parseInt(document.getElementById("allprice").innerHTML);
document.getElementById("allprice").innerHTML =
parseInt(allpricevalue) - parseInt(price);
}
Функція echosrc1(src1,price) викликається в момент натискання на картинку квіткового букета в головному контейнері, додає вибраний елемент у кошик та збільшує значення сумарної ціни квітів за умови, що кошик не повний.
function echosrc1(src1,price){
var elem = src1;
var text1 = '<img class="minipic" title="' + price + '" onclick="cleanpic(this.title)" style="width:50px; height:50px;" src="' + src1 + '">';
var testcell1 = document.getElementById("cell1").innerHTML;
var testcell2 = document.getElementById("cell2").innerHTML;
var testcell3 = document.getElementById("cell3").innerHTML;
var testcell4 = document.getElementById("cell4").innerHTML;
var testcell5 = document.getElementById("cell5").innerHTML;
var testcell6 = document.getElementById("cell6").innerHTML;
var testcell7 = document.getElementById("cell7").innerHTML;
var testcell8 = document.getElementById("cell8").innerHTML;
var testcell9 = document.getElementById("cell9").innerHTML;
var allprice = document.getElementById("allprice").innerHTML;
var zero = "0";
if (allprice==null || allprice=="" ) {
document.getElementById("allprice").innerHTML = parseInt(zero);
}
var allprice2 = document.getElementById("allprice").innerHTML;
if (testcell1==null || testcell1=="") {
document.getElementById("cell1").innerHTML = text1;
document.getElementById("allprice").innerHTML = parseInt(allprice2) + parseInt(price);
}
else if (testcell2==null || testcell2=="") {
document.getElementById("cell2").innerHTML = text1;
document.getElementById("allprice").innerHTML = parseInt(allprice2) + parseInt(price);
}
else if (testcell3==null || testcell3=="") {
document.getElementById("cell3").innerHTML = text1;
document.getElementById("allprice").innerHTML = parseInt(allprice2) + parseInt(price);
}
else if (testcell4==null || testcell4=="") {
document.getElementById("cell4").innerHTML = text1;
document.getElementById("allprice").innerHTML = parseInt(allprice2) + parseInt(price);
}
else if (testcell5==null || testcell5=="") {
document.getElementById("cell5").innerHTML = text1;
document.getElementById("allprice").innerHTML = parseInt(allprice2) + parseInt(price);
}
else if (testcell6==null || testcell6=="") {
document.getElementById("cell6").innerHTML = text1;
document.getElementById("allprice").innerHTML = parseInt(allprice2) + parseInt(price);
}
else if (testcell7==null || testcell7=="") {
document.getElementById("cell7").innerHTML = text1;
document.getElementById("allprice").innerHTML = parseInt(allprice2) + parseInt(price);
}
else if (testcell8==null || testcell8=="") {
document.getElementById("cell8").innerHTML = text1;
document.getElementById("allprice").innerHTML = parseInt(allprice2) + parseInt(price);
}
else if (testcell9==null || testcell9=="") {
document.getElementById("cell9").innerHTML = text1;
document.getElementById("allprice").innerHTML = parseInt(allprice2) + parseInt(price);
} else alert("Квітковий кошик повний. Клацніть по картинці в кошику, щоб вилучити букет!");
}
Функція clean(cellid) викликається в момент натискання на область в якій розміщене зображення квіткового букета в кошику, і вилучає елемент з кошика.
function clean(cellid) {
document.getElementById(cellid).innerHTML = "";
}
Функція menurozaon(mka) відповідає за появу зображення квітки з лівого боку пункта меню на який наводиться курсор.
function menurozaon(mka) {
textroza = "url(img/roza.jpg)";
document.getElementById(mka).style.backgroundImage = textroza;
}
Функція menurozaon(mka) відповідає за щезання зображення квітки з лівого боку пункту меню, якщо курсор покидає область цього пункту.
function menurozaoff(mka) {
textroza = "";
document.getElementById(mka).style.backgroundImage = textroza;
}
Функція buyform() отримує інформацію з квіткового кошика та створює форму для замовлення вибраного на сайті товару.
function buyform(){
var text = '<form name="mybuyform" method="post" action=""><br><input name="mbfname" type="text" id="mbfname" size="30"><br /><input name="mbfphone" type="text" id="mbfphone" size="30"><br /><div id="tovnamer" ></div><input readonly="1" name="mbfprice" type="text" id="mbfprice" size="30"><br /><input name="submit1" type="submit" value="Я хочу купити ці квіти за "><br /> </form>';
document.getElementById("center2").innerHTML = text;
document.mybuyform.mbfprice.value = (document.getElementById("allprice").innerHTML) + " грн";
document.mybuyform.mbfname.value = "Введіть Ваше ім\'я ";
document.mybuyform.mbfphone.value = "Введіть номер телефону";
document.mybuyform.submit1.value = document.mybuyform.submit1.value + " " + (document.getElementById("allprice").innerHTML) + " грн";
var arrmini = document.getElementsByClassName("minipic");
for(var j=0; j< arrmini.length; j++){
var obj = arrmini.item(j);
var text2 = '<input readonly="1" type="text" size="30" value="' + obj.title + '"><br />';
document.getElementById("tovnamer").innerHTML = document.getElementById("tovnamer").innerHTML + text2; } }
5. Контрольний приклад
Заходимо на наш веб-сайт, переходимо, наприклад, в категорію букети з тюльпанів, перед нами відкривається сторінка з тюльпанами, які ми додаємо до кошика клікаючи мишкою по зображенню потрібної квітки.
Після того, як вибрали квіти натискаємо кнопку купити , з’являється форма з інформацією про замовлення, а також з полями для вводу імені та телефону, заповнюємо ці два поля і натискаємо кнопку підтвердження , інформація відправлена на сервер чекаємо дзвінка від оператора.
Висновки: результатом виконання завдання курсової роботи є веб – сайт написаний на HTML з використанням мови програмування JavaScript для розширення функціональності сайту та взаємодії з користувачем. Даний сайт готовий до експлуатації. При виконанні завдання були закріпленні знання отримані на практичних, лабораторних та семінарських заняттях, а також здобуті нові знання у процесі написання нестандартних функції та їх відлагодженні.
Література :
ISBN 5-8459-0466-8; Видавництво: Диалектика.; Серія: Самоучитель, 320 ст.;
ISBN 5-318-00368-0; Видавництво: Питер, 2001 г.;304 ст.;
Веб-сайт HYPERLINK "http://www.htmlbook.ru" http://www.htmlbook.ru
Додаток 1. лістинг файлу public.css
@charset "windows-1251";
.menu-element {
font-family: Verdana, Geneva, sans-serif;
font-size: 12px;
font-style: normal;
line-height: normal;
font-weight: normal;
color:black;
height:30px;
width: 90%;
padding: 2px;
padding-left:2px;
padding-right:0px;
border-bottom-color: 1px dashed #D41F55;
}
img.flower-pic {
display:block;
width:150px;
height:150px;
background-color:white;
float:left;
margin:5px;
}
p.flower-text {
display:block;
width:150px;
height:30px;
background-color:white;
float:left;
margin:5px;
text-align:center;
color:red;
font-weight:bold;
}
p.flower-bask {
display:block;
width:150px;
height:30px;
background-color:white;
float:left;
margin:5px;
text-align:center;
color:red;
font-weight:bold;
}
p a:hover{
color:red;
text-decoration:blink;
}
p a:link,a:visited {
color:red
}
p.inbasket {
display:block;
width:50px;
height:50px;
background-color:white;
float:left;
margin:2px;
text-align:center;
color:red;
font-weight:bold;
}
p.cash {
display:block;
width:77px;
height:25px;
background-color:white;
float:left;
margin:2px;
text-align:center;
color:red;
font-weight:bold;
}
p.menu {
display:block;
width:25px;
height:25px;
background-color:white;
float:left;
margin:2px;
text-align:center;
color:red;
font-weight:bold;
background-color:#EFAFEE;
}
.head{
padding:0px;
margin:0px;
letter-spacing:20px;
word-spacing:30px;
font-size:30px;
font-style:italic;
font-family:Verdana, Geneva, sans-serif;
}
.menu-element a:hover{
font-family: Verdana, Geneva, sans-serif;
font-size: 12px;
font-style: italic;
font: Verdana, Geneva, sans-serif;
line-height: normal;
font-weight: bold;
color:white;
display: block;
width: 95%;
text-decoration: none;
border: 1px dashed white;
padding: 5px;
padding-left:2px;
padding-right:0px;
cursor:pointer;
}
.menu-element a,a:visited{
font-family: Verdana, Geneva, sans-serif;
font-size: 12px;
font-style: italic;
font: Verdana, Geneva, sans-serif;
line-height: normal;
font-weight: bold;
color:black;
display: block;
width: 95%;
text-decoration: none;
border: 1px dashed white;
padding: 5px;
padding-left:2px;
padding-right:0px;
cursor:pointer;
}
Додаток 2. Лістинг файлу index.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Квіти Онлайн</title>
<link href="public.css" rel="stylesheet" type="text/css">
<script src="scripts/forma.js" type="text/javascript"> </script>
<script>
function forma2() {
var subfield1;
var subfield2;
var subfield3;
subfield1 = document.getElementById("name").value;
subfield2 = document.getElementById("email").value;
subfield3 = document.getElementById("phone").value;
if (subfield1==null || subfield1=="") {
document.form1.name.style.background="red";
alert(document.getElementById("name").name + " is empty");
} else {
document.form1.name.style.background="green";
}
if (subfield3==null || subfield3=="") {
document.form1.phone.style.background="red";
alert(document.getElementById("phone").name + " is empty");
} else {
document.form1.phone.style.background="green";
}
if (subfield2==null || subfield2=="") {
document.form1.email.style.background="red";
alert(document.getElementById("email").name + "is empty");
} else {
document.form1.email.style.background="green";
with (subfield2)
{
apos=indexOf("@");
dotpos=lastIndexOf(".");
if (apos<1||dotpos-apos<2)
{document.form1.email.style.background="red";alert("mail incorrect");return false;}
else {return true;}
}
}
}
function cleanpic(price){
var pricepic = parseInt(price);
var allpricevalue = parseInt(document.getElementById("allprice").innerHTML);
document.getElementById("allprice").innerHTML = parseInt(allpricevalue) - parseInt(price);
}
function echosrc1(src1,price){
var elem = src1;
var text1 = '<img class="minipic" title="' + price + '" onclick="cleanpic(this.title)" style="width:50px; height:50px;" src="' + src1 + '">';
var testcell1 = document.getElementById("cell1").innerHTML;
var testcell2 = document.getElementById("cell2").innerHTML;
var testcell3 = document.getElementById("cell3").innerHTML;
var testcell4 = document.getElementById("cell4").innerHTML;
var testcell5 = document.getElementById("cell5").innerHTML;
var testcell6 = document.getElementById("cell6").innerHTML;
var testcell7 = document.getElementById("cell7").innerHTML;
var testcell8 = document.getElementById("cell8").innerHTML;
var testcell9 = document.getElementById("cell9").innerHTML;
var allprice = document.getElementById("allprice").innerHTML;
var zero = "0";
if (allprice==null || allprice=="" ) {
document.getElementById("allprice").innerHTML = parseInt(zero);
}
var allprice2 = document.getElementById("allprice").innerHTML;
if (testcell1==null || testcell1=="") {
document.getElementById("cell1").innerHTML = text1;
document.getElementById("allprice").innerHTML = parseInt(allprice2) + parseInt(price);
}
else if (testcell2==null || testcell2=="") {
document.getElementById("cell2").innerHTML = text1;
document.getElementById("allprice").innerHTML = parseInt(allprice2) + parseInt(price);
}
else if (testcell3==null || testcell3=="") {
document.getElementById("cell3").innerHTML = text1;
document.getElementById("allprice").innerHTML = parseInt(allprice2) + parseInt(price);
}
else if (testcell4==null || testcell4=="") {
document.getElementById("cell4").innerHTML = text1;
document.getElementById("allprice").innerHTML = parseInt(allprice2) + parseInt(price);
}
else if (testcell5==null || testcell5=="") {
document.getElementById("cell5").innerHTML = text1;
document.getElementById("allprice").innerHTML = parseInt(allprice2) + parseInt(price);
}
else if (testcell6==null || testcell6=="") {
document.getElementById("cell6").innerHTML = text1;
document.getElementById("allprice").innerHTML = parseInt(allprice2) + parseInt(price);
}
else if (testcell7==null || testcell7=="") {
document.getElementById("cell7").innerHTML = text1;
document.getElementById("allprice").innerHTML = parseInt(allprice2) + parseInt(price);
}
else if (testcell8==null || testcell8=="") {
document.getElementById("cell8").innerHTML = text1;
document.getElementById("allprice").innerHTML = parseInt(allprice2) + parseInt(price);
}
else if (testcell9==null || testcell9=="") {
document.getElementById("cell9").innerHTML = text1;
document.getElementById("allprice").innerHTML = parseInt(allprice2) + parseInt(price);
} else alert("Квітковий кошик повний. Клацніть по картинці в кошику, щоб вилучити букет!");
}
function clean(cellid) {
document.getElementById(cellid).innerHTML = "";
}
function menurozaon(mka) {
textroza = "url(img/roza.jpg)";
document.getElementById(mka).style.backgroundImage = textroza;
}
function menurozaoff(mka) {
textroza = "";
document.getElementById(mka).style.backgroundImage = textroza;
}
function buyform(){
var text = '<form name="mybuyform" method="post" action=""><br><input name="mbfname" type="text" id="mbfname" size="30"><br /><input name="mbfphone" type="text" id="mbfphone" size="30"><br /><div id="tovnamer" ></div><input readonly="1" name="mbfprice" type="text" id="mbfprice" size="30"><br /><input name="submit1" type="submit" value="Я хочу купити ці квіти за "><br /> </form>';
document.getElementById("center2").innerHTML = text;
//document.mybuyform.mbftovname.value = "";//"тут ім\'я товару";
document.mybuyform.mbfprice.value = (document.getElementById("allprice").innerHTML) + " грн";
document.mybuyform.mbfname.value = "Введіть Ваше ім\'я ";
document.mybuyform.mbfphone.value = "Введіть номер телефону";
document.mybuyform.submit1.value = document.mybuyform.submit1.value + " " + (document.getElementById("allprice").innerHTML) + " грн";
var arrmini = document.getElementsByClassName("minipic");
for(var j=0; j< arrmini.length; j++){
var obj = arrmini.item(j);
//document.mybuyform.mbftovname.value = document.mybuyform.mbftovname.value + " " + obj.title;
var text2 = '<input readonly="1" type="text" size="30" value="' + obj.title + '"><br />';
document.getElementById("tovnamer").innerHTML = document.getElementById("tovnamer").innerHTML + text2;
}
}
function buyformsingle(title){
var text = '<form name="mybuyforms" method="post" action=""><br><input name="mbfnames" type="text" id="mbfnames" size="30"><br /><input name="mbfphones" type="text" id="mbfphones" size="30"><br /><input readonly="1" name="mbftovnames" type="text" id="mbftovnames" size="30"><br /><input readonly="1" name="mbfprices" type="text" id="mbfprices" size="30"><br /><input name="submit1s" type="submit" value="Я хочу купити ці квіти за "><br /> </form>';
document.getElementById("center2").innerHTML = text;
//document.mybuyform.mbftovname.value = "";//"тут ім\'я товару";
document.mybuyforms.mbfprices.value = parseInt(title) + " грн";
document.mybuyforms.mbfnames.value = "Введіть Ваше ім\'я ";
document.mybuyforms.mbfphones.value = "Введіть номер телефону";
document.mybuyforms.mbftovnames.value = title;
document.mybuyforms.submit1s.value = document.mybuyforms.submit1s.value + " " + (document.mybuyforms.mbfprices.value);
}
function menuactive() {
var arrmenu = document.getElementsByClassName("menu-element");
for(var j=0; j< arrmenu.length; j++){
var obj = arrmenu.item(j);
obj.style.textDecoration="none";
obj.style.color="black";
}
}
</script>
</head>
<body>
<table width="1000" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="200" valign="top" bgcolor="#FCD6F7" style="padding-left:40px;">-=Ваш квітковий кошик=- <br />
<p name="cell1" id="cell1" onclick="clean(this.id)" class="inbasket"></p>
<p name="cell2" id="cell2" onclick="clean(this.id)" class="inbasket"></p>
<p name="cell3" id="cell3" onclick="clean(this.id)" class="inbasket"></p>
<p name="cell4" id="cell4" onclick="clean(this.id)" class="inbasket"></p>
<p name="cell5" id="cell5" onclick="clean(this.id)" class="inbasket"></p>
<p name="cell6" id="cell6" onclick="clean(this.id)" class="inbasket"></p>
<p name="cell7" id="cell7" onclick="clean(this.id)" class="inbasket"></p>
<p name="cell8" id="cell8" onclick="clean(this.id)" class="inbasket"></p>
<p name="cell9" id="cell9" onclick="clean(this.id)" class="inbasket"></p>
<p class="cash">На суму: </p><p id="allprice" class="cash"></p>
<p class="cash" style="margin-left:40px;" onClick="buyform()">Купити </p>
</td>
<td width="690" bgcolor="#FCD6F7">
<img src="img/head.jpg" style="padding:10px">
<p class="head" align="center">Квіти Онлайн</p>
</td>
<td width="10"> </td>
</td>
</tr>
<tr>
<td width="160" valign="top"> </td>
<td id="center2" align="center" width="690"></td>
<td> </td>
</tr>
<tr>
<td width="160" align="center" valign="top" bgcolor="#EFAFEE"><table width="90%" height="190" border="0" align="center" cellpadding="0" cellspacing="2">
<tr>
<td width="20"><p id="m1" class="menu"></p></td>
<td class="menu-element" onClick="menuactive();this.style.textDecoration='underline';this.style.color='white'"><a name="m1" onmouseover="menurozaon(this.name)" onmouseout="menurozaoff(this.name)">Як замовити ?</a></td>
</tr>
<tr>
<td width="20"><p id="m2" class="menu"></p></td>
<td class="menu-element" onClick="menuactive();this.style.textDecoration='underline';this.style.color='white'"><a href="tulpan.html" name="m2" onmouseover="menurozaon(this.name)" onmouseout="menurozaoff(this.name)">Букети з тюльпанів</a></td>
</tr>
<tr>
<td width="20"><p id="m3" class="menu"></p></td>
<td class="menu-element" onClick="menuactive();this.style.textDecoration='underline';this.style.color='white'"><a href ="roza.html" name="m3" onmouseover="menurozaon(this.name)" onmouseout="menurozaoff(this.name)">Букети з троянд</a></td>
</tr>
<tr>
<td width="20"><p id="m4" class="menu"></p></td>
<td class="menu-element" onClick="menuactive();this.style.textDecoration='underline';this.style.color='white';bukets()"><a href="index.html" name="m4" onmouseover="menurozaon(this.name)" onmouseout="menurozaoff(this.name)">Букети змішані</a></td>
</tr>
<tr>
<td width="20"><p id="m5" class="menu"></p></td>
<td class="menu-element" onClick="menuactive();this.style.textDecoration='underline';this.style.color='white'"><a name="m5" onmouseover="menurozaon(this.name)" onmouseout="menurozaoff(this.name)">Каталог букетів</a></td>
</tr>
<tr>
<td width="20"><p id="m6" class="menu"></p></td>
<td class="menu-element" onClick="menuactive();this.style.textDecoration='underline';this.style.color='white'"><a href="price.html" name="m6" onmouseover="menurozaon(this.name)" onmouseout="menurozaoff(this.name)">Ціни</a></td>
</tr>
<tr>
<td width="20"><p id="m7" class="menu"></p></td>
<td class="menu-element" onClick="menuactive();this.style.textDecoration='underline';this.style.color='white'"><a href="contacts.html" name="m7" onmouseover="menurozaon(this.name)" onmouseout="menurozaoff(this.name)">Контакти</a></td>
</tr>
<tr>
<td width="20"><p id="m8" class="menu"></p></td>
<td class="menu-element" onClick="menuactive();this.style.textDecoration='underline';this.style.color='white'"><a name="m8" onmouseover="menurozaon(this.name)" onmouseout="menurozaoff(this.name)">Скласти букет</a></td>
</tr>
</table><br /><br />
<p>Ми зв'яжемося з Вами:</p>
<form name="form1" method="post" action="">
<label>Ім'я</label><br />
<input name="name" type="text" id="name" tabindex="1" size="20"><br />
<label>Телефон</label><br />
<input name="phone" type="text" id="phone" size="20"><br />
<label>@mail</label><br />
<input name="email" type="text" id="email" size="20"><br /><br />
<input type="submit" name="submit" id="submit" value="Відправити" onclick="forma2()">
</form>
<p> </p></td>
<td id="center3" width="690" bgcolor="#F8C2F2" style="padding-left:45px;"><p id="center4"> </p>
<img class="flower-pic" title="100 Квітковий букет Шарм" src="img/flowers/_basket_1.jpg" onClick="echosrc1(this.src,this.title)">
<img class="flower-pic" title="120 Квітковий букет Зевс" src="img/flowers/_bys_bask_1.jpg" onClick="echosrc1(this.src,this.title)">
<img class="flower-pic" title="90 Квітковий букет Артеміда" src="img/flowers/_bys_bask_2.jpg" onClick="echosrc1(this.src,this.title)">
<img class="flower-pic" title="60 Квіточка букет Вікторія" src="img/flowers/_bys_bask_3.jpg" onClick="echosrc1(this.src,this.title)">
<p class="flower-text" ><a href="#" title="100 Квітковий букет Шарм" onClick="buyformsingle(this.title)">Купити</a></p>
<p class="flower-text"><a href="#" title="120 Квітковий букет Зевс" onClick="buyformsingle(this.title)">Купити</a></p>
<p class="flower-text"><a href="#" title="90 Квітковий букет Артеміда" onClick="buyformsingle(this.title)">Купити</a></p>
<p class="flower-text"><a href="#" title="60 Квіточка букет Вікторія" onClick="buyformsingle(this.title)">Купити</a></p>
<p title="Клацніть на картинці букета" class="flower-bask"><a href="#">До кошика</a></p>
<p title="Клацніть на картинці букета" class="flower-bask"><a href="#">До кошика</a></p>
<p title="Клацніть на картинці букета" class="flower-bask"><a href="#">До кошика</a></p>
<p title="Клацніть на картинці букета" class="flower-bask"><a href="#">До кошика</a></p>
<img class="flower-pic" title="90 Квітковий букет Краса" src="img/flowers/_bys_basket.jpg" onClick="echosrc1(this.src,this.title)">
<img class="flower-pic" title="120 Квітковий букет Зірка" src="img/flowers/_carnations.jpg" onClick="echosrc1(this.src,this.title)">
<img class="flower-pic" title="140 Квітковий букет Щастя" src="img/flowers/_flower_gournet_basket.jpg" onClick="echosrc1(this.src,this.title)">
<img class="flower-pic" title="110 Квітковий букет Величний" src="img/flowers/_heart_of_roses.jpg" onClick="echosrc1(this.src,this.title)">
<p class="flower-text"><a href="#" title="90 Квітковий букет Краса" onClick="buyformsingle(this.title)">Купити</a></p>
<p class="flower-text"><a href="#" title="120 Квітковий букет Зірка" onClick="buyformsingle(this.title)">Купити</a></p>
<p class="flower-text"><a href="#" title="140 Квітковий букет Щастя" onClick="buyformsingle(this.title)">Купити</a></p>
<p class="flower-text"><a href="#" title="110 Квітковий букет Величний" onClick="buyformsingle(this.title)">Купити</a></p>
<p title="Клацніть на картинці букета" class="flower-bask"><a href="#">До кошика</a></p>
<p title="Клацніть на картинці букета" class="flower-bask"><a href="#">До кошика</a></p>
<p title="Клацніть на картинці букета" class="flower-bask"><a href="#">До кошика</a></p>
<p title="Клацніть на картинці букета" class="flower-bask"><a href="#">До кошика</a></p>
<img class="flower-pic" title="100 Квітковий букет Сяйво" src="img/flowers/_individual.jpg" onClick="echosrc1(this.src,this.title)">
<img class="flower-pic" title="110 Квітковий букет Зорепад" src="img/flowers/_irises_blue.jpg" onClick="echosrc1(this.src,this.title)">
<img class="flower-pic" title="140 Квітковий букет Посмішка" src="img/flowers/_jubiley55.jpg" onClick="echosrc1(this.src,this.title)">
<img class="flower-pic" title="100 Квітковий букет Райдуга" src="img/flowers/_korzina1.jpg" onClick="echosrc1(this.src,this.title)">
<p class="flower-text"><a href="#" title="100 Квітковий букет Сяйво" onClick="buyformsingle(this.title)">Купити</a></p>
<p class="flower-text"><a href="#" title="100 Квітковий букет Зорепад" onClick="buyformsingle(this.title)">Купити</a></p>
<p class="flower-text"><a href="#" title="100 Квітковий букет Посмішка" onClick="buyformsingle(this.title)">Купити</a></p>
<p class="flower-text"><a href="#" title="100 Квітковий букет Райдуга" onClick="buyformsingle(this.title)">Купити</a></p>
<p title="Клацніть на картинці букета" class="flower-bask"><a href="#">До кошика</a></p>
<p title="Клацніть на картинці букета" class="flower-bask"><a href="#">До кошика</a></p>
<p title="Клацніть на картинці букета" class="flower-bask"><a href="#">До кошика</a></p>
<p title="Клацніть на картинці букета" class="flower-bask"><a href="#">До кошика</a></p>
</td> <td> </td>
</tr>
<tr>
<td width="160" height="100" valign="top" bgcolor="#EFAFEE"> </td>
<td width="690" height="100" bgcolor="#EFAFEE"><p class="head" align="center">Квіти Онлайн</p></td>
<td> </td>
</tr>
</table>
</body>
</html>