סקריפטים להטמעה באתר
ישנם מערכות און ליין קלות לבניית אתרים, גם שם עדיין ישנם אופציות להטמעת קוד (בדומה ל- iframe).
בדרך כלל, קוראים לזה HTML Code, תוכלו גם להוסיף לשם קוד css, קוד סקריפט, ואפילו לייבא קודים מאתרים אחרים אשר יעשו עבורכם עבודה נפלאה.
כדאי לכם לדעת להשתמש בזה, על מנת להוסיף דברים שימושיים אשר תוכלו להכניס בהתאמה אישית.
עליכם לזכור שהיות שזה נעשה דרך קוד, כל שינוי יהיה רק דרך הקוד. אחרי ששיניתם תלחצו UPDATE על מנת לעדכן את המראה של הרכיב לפי הקוד.
להלן מספר דוגמאות קוד שימושיות ומעניינות להטמעה באתר שלכם:
קוד מספר 1.
מספר טלפון אשר מצלצל בלחיצה עליו (בנייד).
<a href="tel:0555555555">
055-5555555
</a>
<style> @import url(http://fonts.googleapis.com/earlyaccess/alefhebrew.css); a{ direction:rtl; color:black; font-size:30px; font-family:'Alef Hebrew',Arial,Helvetica,sans-serif; margin:0 auto; text-decoration: none; /* font-size:1em; */ } </style>
כמובן לא לשכוח לשנות את המספר טלפון מ-0555555555, בשני המקומות, למספר המתאים.
הסבר הקוד:
שורה ראשונה, היא תג html (אות a קטנה באנגלית) אשר מסמן שהמספר הרשום בין התגיות הוא קישור של טלפון, כך הדפדפן יודע שזה טקסט אשר נועד להפעיל שיחה יוצאת בלחיצה עליו.
בעיקרון מספיק להעתיק את שלוש השורות הראשונות וזהו.
מהקטע השני ואילך (בין התגיות style) זה קוד css אשר אחראי על העיצוב.
השורה המתחילה בשטורדל (ֿ@), מייבאת את הפונט אלף, אשר הוא נחמד יותר לדעתי.
בשורות הבאות (בין הסוגריים המסולסלות של הסלקטור a).
1. קבענו את היישור מימין לשמאל (rtl).
2. את הצבע לשחור (black). הברירת מחדל אגב היא כחול כמו כל קישור אינטרנטי אבל אם תרצו צבע שונה תשנו (אפשר להכניס כל צבע בפורמט #000000).
3. את הגודל לשלושים פיקסלים (אפשר להשתמש בסימן % במקום px, על מנת שזה יהיה רספונסיבי).
4. קבענו שישתמש בפונט אלף שייבאנו, אם לא ימצא את הפונט הזה ישתמש באריאל, וכן הלאה.
5. קבענו את הרווחים למעלה ולמטה לאפס ואת הרווחים בצדדים שיהיו שווים אוטומתית, כך שזה יהיה ממורכז.
6. הורדנו את הקו התחתון אשר ישנו בכל קישור כברירת מחדל.
7. קוד אשר לא נקרא, אשר נמצא כהערה (בין הסימנין /* */) על מנת שאם נרצה נוכל להשתמש בו בהמשך.
קוד מספר 2.
חדשות נגללות (פחות אופנתי היום אבל עדיין הולך).
<marquee scrolldelay="1000" direction="left"
onmouseover="this.stop()" onmouseout="this.start()">
...אני טקסט נגלל
</marquee>
שנו את הטקסט בשורה השלישית, אשר נמצא בין התגיות (marquee), כאוות נפשכם.
הסבר הקוד:
שורה ראשונה, היא תג html (בשם marquee),
עם תכונה של עצירה (המתנה) של שניה בין גלילה לגלילה (כל יחידת זמן אלפית השניה). ועם תכונה של כיוון (ימין left). ניתן לבחור כיוונים אחרים כגון: up, down, right.
שורה שלישית היא רוד סקריפט, אשר בתכונת אירוע עכבר מסמן על הטקסט (onmouseover), היא עוצרת את הגלילה (stop). וכשהעכבר זז משם (onmouseout), הגלילה ממשיכה כרגיל (start).
תכונות נוספות אשר ניתן להוסיף באותו דרך,
1. רוחב המוקצה לאלמנט החדשות נגללות: width. המקבל מספר פיקסלים שתקבעו.
2. כך גם גובה, height. לדוגמה: height="55px", כשהערך שקבענו לגובה תחום בין גרשיים.
3. התנהגות (תכונה בשם behavior), יכולה לקבל: גלילה רגילה (scroll).
גלילה משתנה (alternate), אשר פעם נגללת בכיוון אחד וחוזרת חלילה לכיוון שני, בלי לצאת מהמסך.
גלילה חד פעמית (slide), אשר נעצרת בסוף מסלול הגלילה.
4. תכונה בשם loop, אשר יכולה לקבל ערך מספרי שקובע כמה פעמים תתבצע הגלילה.
או את ערך אין סופי (infinite), שזהו הברירת מחדל.
5. תכונת scrollamount, קובעת את מהירות הגלילה (מספר תנועות בכל שניה).
6. תכונת Align, קובעת את יישור הטקסט (כגון: Left, right, middle, top).
7. Bgcolor - צבע הרקע בה ינוע הטקסט, כגון: אפור (gray).
קוד מספר 3.
תמונה אשר ניתן להוזיזה על ידה מקשי החיצים, למעלה למטה, ימין ושמאל.
<div id="main"> <img
src="http://static.wixstatic.com/media/53dda1_78944ebd189d4cb187eb3880cefc9b5a.png_srb_p_128_123_75_22_0.50_1.20_0.00_png_srb"/> </div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<style>img { position: relative; left: 5; top: 5; }</style> <script> $(document).ready(function() {
alert("ברוכים הבאים!");
$('img').animate({top: "+=50px"}, 'fast'); // down
$('img').animate({left : "+=50px"}, 'fast'); // right $(document).keydown(function(key) { switch(parseInt(key.which,10)) { // Left arrow key pressed case 37: $('img').animate({left: "-=10px"}, 'fast'); // left break; // Up Arrow Pressed case 38: $('img').animate({top: "-=10px"}, 'fast'); // top break; // Right Arrow Pressed case 39: $('img').animate({left : "+=10px"}, 'fast'); // right break; // Down Arrow Pressed case 40: $('img').animate({top: "+=10px"}, 'fast'); // down break; } }); });
</script>
שנו את התמונה על ידי שינוי הקישור הנמצא בשורה השלישית של הקוד, בין הגרשיים (" ") שנמצאים בתוך התגית (img), לכל תמונה אחרת שתבחרו.
הסבר הקוד:
נסתפק בהסבר קצר.
בהתחלה יש לנו בלוק שבתוכו הקישור לתמונה.
אח"כ אנחנו מייבאים את ספריית ג'ייקוורי, משרת של גוגל.
אח"כ קוד CSS אשר קובע שהתמונה תהיה בפינה השמאלית למעלה (עם מרווח של 5 פיקסלים).
אח"כ יש קוד ג'אווה סקריפט ששולח הודעה קופצת עם ברוכים הבאים
לאחר מכן קוד ג'ייקוורי שקודם כל עושה אנימציה של חמישים פיקסלים לימין ולמטה
ואח"כ הוא בודק כל פעם איזה מקש חץ נלחץ ולפי זה משנה את מרווח הפיקסלים שקבענו בקוד CSS.
על מנת שהקוד יעבוד, עליכם ללחוץ על התמונה ואז לשחק עם מקשי החיצים.
בהצלחה!
אהבתם? רוצים עוד דוגמאות?
כתבו בתגובות למטה :)
אם יהיה תגובות בעד, אוסיף לכם קוד שישאל את גולש לשמו
ויגיד לו אם הוא גולש דרך אנדרואיד או אייפון.
נ.ב. על מנת לראות את הסקיפטים בפעולה, לחצו כאן.
