1.
<!DOCTYPE html>
2.
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
3.
<head>
4.
<meta charset="utf-8" />
5.
<style>
6.
#select {
7.
width: 200px;
8.
color: purple;
9.
border-radius: 10%;
10.
font-size: 20px;
11.
}
12.
#buttons {
13.
width: 350px;
14.
text-align: center;
15.
margin: auto;
16.
}
17.
#div_object {
18.
width: 600px;
19.
height: 450px;
20.
margin: auto;
21.
}
22.
</style>
23.
<script>
24.
var images = ["paris.jpg", "rome.jpg", "sydney.jpg", "newyork.jpg", "madrid.jpg"]
25.
var strings;
26.
var objectName;
27.
var title;
28.
var index;
29.
var div_object;
30.
function H1Title(x)
31.
{
32.
objectName = document.getElementById("title");
33.
title= x.split('.')[0][0].toUpperCase()+
x.split('.')[0].slice(1);
34.
objectName.innerHTML = title;
35.
}
36.
function choice(x)
37.
{
38.
div_object = document.getElementById("div_object");
39.
if (x.value == "picture") {
40.
index = 0;
41.
H1Title(images[0]);
42.
div_object.innerHTML = "<img id =
'image' with= '200px' height='350px'>";
43.
image = document.getElementById("image");
44.
image.src = images[index];
45.
}
46.
}
47.
function next()
48.
{
49.
index++;
50.
if (index > images.length) {
51.
index = 0;
52.
}
53.
H1Title(images[index]);
54.
image.src = images[index];
55.
}
56.
function previous() {
57.
index--;
58.
if (index <0) {
59.
index = images.length-1;
60.
}
61.
H1Title(images[index]);
62.
image.src = images[index];
63.
}
64.
</script>
65.
<title></title>
66.
</head>
67.
<body style="background-color:darkgray; color:white">
68.
<h1 style="text-align:center;">My gallery: picture, musics, videos</h1>
69.
<div id="div_select" style="text-align:center">
70.
<select id="select" onclick="choice(this)">
71.
<option selected="selected" disabled="disabled">choose an option</option>
72.
<option value="picture">picture</option>
73.
<option value="musics">musics</option>
74.
<option value="videos">videos</option>
75.
</select>
76.
<br />
77.
<h1 id="title" style="color:yellow"></h1>
78.
<br />
79.
<div id="div_object">
80.
</div>
81.
<br />
82.
<div id="buttons">
83.
<button onclick="previous()"> << previous </button>
84.
<button onclick="next()"> next >> </button>
85.
</div>
86.
</div>
87.
</body>
88.
</html>
הסבר
body - גוף
הדף (מה שמוצג)
67-69 הגדרת עיצוב כללי לדף + כותרת
70-75 –
הגדרת רשימת בחירה - select
- · Onclick מה יקרה בבחירת ערך – במקרה שלנו יפעיל פונקציה
- · Selected – ערך ראשוני ברשימה שמוצג בשדה לפני פתיחה של הרשימה. disabled = הערך אינו ניתן לבחירה
- · Option – אפשרות ברשימה
77-81 – הגדרנו כותרת ריקה
ומקטע (DIV) ריק שאותם נמלא בהמשך באמצעות קוד + רווח
בניהם (<br />)
82-84 –
מקטע עם 2 כפתורים שבלחיצה עליהם תפעל פונקציה
Style
ע"מ
לשמור על קוד קריא הגדרנו את העיצוב בנפרד – בהזנת # נקבל רשימה של כל האובייקטים
שהוגדרו 7
Script
24 –
הגדרת מערך שמכיל את שמות כל הקבצים
30-35 –
פונקציה שמקבלת מחרוזת טקסט מבצעת חיתוך ומכניסה לתוך השדה ככותרת
89.
title= x.split('.')[0][0].toUpperCase()+
x.split('.')[0].slice(1);
- · split – חותך את המחרוזת ל2 לפני נקודת אמצע מוגדרת – במקרה שלנו שאנחנו רוצים להפריד את שם הקובץ מהסיומת נחצה ב .
- · לוקחים את התו הראשון מהחלק הראשון של המחרוזת והופכים אותו לאות גדולה
- · מוסיפים את זה לחיתוך נוסף של המחרוזת אך הפעם ללא התו הראשון
- · את הטקסט מכניסים לתוך הכותרת במסך
37-47 – פונקציה להצגת התמונה
- · אם הערך שנבחר = תמונה שלח לפונקציית הכותרת את השם של התמונה מתוך המערך
- · תגדיר את האובייקט של המקטע לסוג תמונה בגודל מוגדר
- · את המקטע תמונה מכניסים לתוך משתנה תמונה
- · הכנסת מקור התמונה לתוך האובייקט
48-74 - פונקציות לדפדוף בין התמונות
Next
- · בכל לחיצה על הכפתור המונה עולה ב1
- · מעדכנים את הכותרת ואת המיקום של התמונה לפי המיקום הדש במחרוזת
- · במידה והגענו לסוף המחרוזת חוזרים להתחלה
Previous – עושה את
אותו הדבר רק בכיוון ההפוך
אין תגובות:
הוסף רשומת תגובה