Webist
  • קורס בניית אתרים בוורדפרס
  • בלוג
    • בניית אתרים
      • וורדפרס
      • בניית חנות וירטואלית
      • דפי נחיתה
      • מערכות ניהול תוכן
    • קידום אתרים
    • עיצוב אתרים
    • אחסון אתרים
      • מדריך Cpanel
      • אחסון קבצים
      • גוגל אנליטיקס
    • כללי
      • ברשת
      • כלים חינמיים
  • צור קשר
  • שירותים
    • בניית אתרים בתשלום חודשי
    • בניית אתרים חינם בגוגל
    • קידום אתרים
    • פרסום בגוגל
  • קורס בניית אתרים בוורדפרס
  • בלוג
    • בניית אתרים
      • וורדפרס
      • בניית חנות וירטואלית
      • דפי נחיתה
      • מערכות ניהול תוכן
    • קידום אתרים
    • עיצוב אתרים
    • אחסון אתרים
      • מדריך Cpanel
      • אחסון קבצים
      • גוגל אנליטיקס
    • כללי
      • ברשת
      • כלים חינמיים
  • צור קשר
  • שירותים
    • בניית אתרים בתשלום חודשי
    • בניית אתרים חינם בגוגל
    • קידום אתרים
    • פרסום בגוגל
ווביסט ● בניית אתרים ● איך עושים כפתור ששולח את העמוד להדפסה?

איך עושים כפתור ששולח את העמוד להדפסה?

יוסי ג'אנה נובמבר 1, 2012 5:41 pm אין תגובות

יש לפעמים צורך בנתינת הרשאה להדפסה של העמוד מסוים באתר. זה יכול להיות הדפסת תמונה או קופון או עפילו הדפסת מסמכים. הפרקטיקה הזאת שימושית מאוד עבור בעלי אתרים ובעלי עסקים באופן כללי שרוצים לתת אפשרות קלה של הדפסת תמונה או מסמכים כאלה ואחרים בצורה פשוטה. למשל, אם ברצונכם לאפשר הדפסת תמונה שלכם דרך האתר ללא צורך בהורדת תמונה למחשב, ביכולתכם ליצור קישור html פשוט ולהוסיף פקודת js (ג'אווהסקריפט) לקישור התמונה כפי שמפורט בהמשך, והקישור יהפוך לקריאה לצורך פתיחת תוכנת הדפסה עם מידע הרצוי עבור הגולש. מדובר ב- א ב בתחום של בניית אתרים שכל בונה אתרים צריך לדעת מכיוון שיש מקרים בהם תרצו להשתמש בטכניקה זו.

כדי לצפות בדוגמה, ניתן ללחוץ על כפתור המופיע כאן למטה. לחיצה על הכפתור תאפשר לכם להדפיס תמונת לוגו של של האתר – Webist. לחיצה על הכפתור באופן אוטומטי ישלח את תמונת הלוגו של האתר להדפסה. כל מה שנדרש מהגולש לעשות זה לאשר את ההדפסה.

אז איך יוצרים כפתור ששולח את התמונה להדפסה?

לפני הכל אנחנו צריכים את התמונה עצמה ותגיות html בסיסיות כדי להציג את התמונה. למשל כך:

[php]
<img src="https://www.webist.co.il/logo.png" alt="" />
[/php]

בקוד למעלה אנחנו רוצים תגית img של html ושרשור לקובץ logo.png של האתר באמצעות תג src. כך אנחנו מקשרים לתמונה בדף html. כעת כדי להפוך את התמונה ללחיץ ויחד עם זאת לבצע קריעה של משלוח תמונה להדפסה אנחנו צריכים להוסיף עוד קוד קטן, אך הפעם מדובר בקוד js.

שלב 2: הוספת קוד JS ועטיפת תמונה בקישור לצורך משלוח התמונה להדפסה

כעת אנחנו צריכים להעטוף את התמונה בקישור מכיוון שהרי אנחנו מעוניינים לשלוח את התמונה להדפסה על ידי לחיצה / הקלקה עליו. האפשרות הקלקה על התמונה תופעל כאשר נגדיר קישור / נהפוך את התמונה ללחיץ.
כדי להפוך את התמונה ללחיץ אנחנו עוטפים אותה בתגית פתיחה וסגירה a. צפה בדוגמה בהמשך.
[php]
<a href="#"><img src="https://www.webist.co.il/logo.png" alt="" /></a>
[/php]

בקוד למעלה עטפנו את התמונה בקישור שמוביל לשום מקום. סולמית (#) היא דימוי של כתובת URL שלשם אנחנו רוצים להפנות את הגולש בעת הלחיצה. השלב הבא והאחרון הוא לשלב את קוד JS במקום הקישור (במקום הסולמית שמופיע בדוגמה). מה שאנחנו צריכים זה לשלב את הקוד JS כפי שמופיע כאן למטה במקום סולמית.

[js]
javascript:window.print()
[/js]

ותוצאה הסופית היא:
[html]
<a href="javascript:window.print()">
<img src="https://www.webist.co.il/logo.png" alt="" />
</a>
[/html]

//

לדוגמה, באפשרותך ללחוץ על התמונה כעת.

« פוסט קודם
פוסט הבא »

השארת תגובה

ביטול

צור איתנו קשר
בניית אתרים
בנה אתר מקצועי עכשיו
עשה קליק
קידום אתרים
קדם אתר בגוגל
קבל מחיר ותוצאות
פרסום בגוגל
פרסום היחיד שעובד חזק
קבל מחיר ותוצאות
הקודם
הבא
קטגוריות בבלוג
  • קידום אתרים
  • בניית אתרים
  • וורדפרס
  • תוספים של וורדפרס
  • עיצוב אתרים
  • שרתי אחסון
  • אחסון אתרים
  • אחסון קבצים
  • בניית חנות וירטואלית
  • ברשת
  • גוגל אנליטיקס
  • דפי נחיתה
  • מדריך Cpanel
  • קוד פתוח
פוסטים אחרונים
  • אז מה חדש בוורדפרס 4.0 ועד 4.7?
  • איך פותחים כתובת מייל ממותג בשרת – Cpanel
  • איך מתחברים לחשבון Cpanel בשרת אחסון
  • תוסף וורדפרס לבדיקת ביצועים – P3 💯
  • Facebook סוגרת פיצ'ר הנפוץ של Like Box
iDox סוכנות דיגיטל
Webist.co.il - כל הזכויות שמורות 2008 - 2017
גלילה לראש העמוד