למומחים- איך אני עושה דבר כזה?

סיפי

משתמש מקצוען
עיצוב גרפי
אני רוצה ליצור באתר אפשרות לבחירת אזור בארץ ברעיון של התמונה המצ"ב,
האם יש אפשרות פשוטה לעשות את זה ע"י תמונה אחת שמורכבת מכמה צורות (האזורים בארץ) שתהיה SVG וע"י לחיצה על אזור מסוים ישתנה הצבע.
זה אפשרי?
אם כן אשמח לשמוע איך, לא צריכה קוד מדויק אלא באופן כללי איך אני יוצרת את זה
 

קבצים מצורפים

  • ‏‏לכידה.JPG
    ‏‏לכידה.JPG
    KB 12.6 · צפיות: 2

Shia

משתמש מקצוען
מנוי פרימיום
בוגר/תלמיד פרוג
D I G I T A L
בעיקרון svg כזה מורכב מקבוצה של צורות כל צורה מיוצגת בעזרת תגית path.
בתגית הזאת אפשר לטפל בעזרת css / js כמו כל אלמנט במסמך.
כמו"כ, אפשר לעטוף כל path בתגית a כדי שתהיה קישור.

הנה דוגמה:
http://codepen.io/joshcoil/pen/YZywgK
 

סיפי

משתמש מקצוען
עיצוב גרפי
נכתב ע"י Shia;2462662:
בעיקרון svg כזה מורכב מקבוצה של צורות כל צורה מיוצגת בעזרת תגית path.
בתגית הזאת אפשר לטפל בעזרת css / js כמו כל אלמנט במסמך.
כמו"כ, אפשר לעטוף כל path בתגית a כדי שתהיה קישור.

הנה דוגמה:
http://codepen.io/joshcoil/pen/YZywgK

וואו, תודה, זה בדיוק מה שאני צריכה!
אתה יכול אולי להעלות לי את הקובץ SVG של המפה?
אני רוצה טיפה לשחק בעיצוב של קוי המפה ולקחת את הקוד כמו שהוא...
 

סיפי

משתמש מקצוען
עיצוב גרפי
הסתדרתי עם התמונה. יצרתי לבד. שוב תודה!
 

Shia

משתמש מקצוען
מנוי פרימיום
בוגר/תלמיד פרוג
D I G I T A L
PHP:
<svg  xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="340.2 101.7 152.5 396.6"><path fill="#BABABA" d="M485.7,147.6c-2.1-6.3,0.4-9.8-4.5-13.4v-1.5c1.5-2.3,2.2-3.8,1.6-6.3l-1.9-1.2l-0.3-4.7 c-3.6-1.8-3-4.1-0.1-6.4l-3.2-2.2c3-0.9,4.6-3,4.5-6.1l0.4-0.6l-0.1-0.5c-4.9,6.1-11.3,10-17.8,13.7l-0.7,0.7 c0.7,2.2,0.6,2.8-0.3,1.9v0h0c-1.1-1.5-2.7-3-4.1-3.7c-5.8,10.5-2.3,23.2-18.4,22.5c-2.3-5-8.4-5.4-12.4-2.7l-6.7-0.5 c-0.1,0.1-0.3,0.1-0.5,0.2l0.6,0.7c-0.4,0.4-0.8,0.8-1.2,1.3l0.3,1.8c-1,4.2-1.3,8.7-2.6,12.7l1,0.5l0.2,1.2 c-0.3,3.1-1.9,6.1-4.4,7.9l-0.8,0.1l-1.3-0.2c-0.8-0.7-1.8-1.2-2.8-1.4l-1.2,0.7c-1.7,4.8-3.1,15.5-2.9,20.5 c-0.5,1.9-0.9,3.8-0.9,5.8c-5.9,15.7-7.7,33.8-12.9,50l-1.2,0.7c0.3,9.4-7.9,22.4-12.1,30.4c-3.1,5.8-6.5,11.9-10.2,17.3 c-3.3,4.9-8.5,8.6-11,13.8l-3.9,2.9c-1.6,3.7-5.4,6.8-8.6,9.2c7.2,11.2,9.4,27.3,14.1,39.8c2.7,7.1,5.6,14.3,8.1,21.5 c1.8,5.3,1.6,14.7,5.2,18.8v0l0.9,1.2c-0.4,2.4-1,4.6-0.8,7.1c4.8,6.2,7.3,9.7,10,17.4c2.7,7.6,6,15.4,7.6,23.3 c1.8,8.4,5.1,16,7.5,24.3c2.4,8.3,1,16.4,5.2,24c0.7,0,1.4,0,2,0c4.5-9.8,6.5-19.5,10.1-29.9c1.9-5.5,1.9-10.9,3.1-16.5 c1.2-5.6,4.7-9.5,6.5-14.9c0.5-5.7-2.2-10.1-0.7-16c0.7-2.8,2.3-5.6,1.9-8.5c-0.6-0.9-1.2-1.9-1.6-3v-2.3c3.3-7,4.2-15,7.5-22.2 c2-4.3,3-12.4,7-15.2l0.5-0.9c0.2-2.2,0.3-4.4,0.5-6.6c1.3-2.8,3.8-4.4,5.3-7.2c-0.4-4.9,1.8-8.4,3.9-12.6 c-0.9-0.1-1.8-0.4-2.6-0.9l-0.6-1.2l-0.4-2.8l-2.1-3.3l-0.4-3.4l0.9-2.5l2.6,0.5l0-0.1l-0.4-2.6c0.6-1.6,1.3-3,2.2-4.5l0.2-2.1 l-0.1-0.1l-0.7-0.1c-2.1-4.9-1.3-10.7-1.4-15.8l0,0l-0.4-2.6c0.6-1.7,1.2-3.4,1.9-5.1c-0.3-1.6-0.5-3.2-0.6-4.8 c2.7-4.5,4-10.6,8.3-13.9c1.4-0.5,2.9-0.8,4.4-1l0,0c-0.8-1.9-1.4-4-1.8-6l0.9-1.2l-2.1-7.9l0.2-0.8c0.3-0.2,0.7-0.4,1.1-0.5 l0.4-0.4l0.1-0.8c-1-4.3-2.7-8.5-1.5-12.9l1.4-1.2l-0.9-1.2l0.1-1.1l1.4-2.4l-0.4-0.6v-0.6c0.3-0.4,0.6-0.7,1.1-0.8 c0-0.7-0.1-1.3-0.4-1.9l1.5-6.3H460c0-0.3,0.2-0.7,0.4-0.9c0.2-0.2,0.5-0.4,0.7-0.5l-0.7-1.2c-0.4-1.6-0.4-3.3,0.1-4.9l-0.7-1.5 l0.1-3l-0.4-1v-0.7h0.6v0.7h0.5c-0.4-1.5-1-2.8-1.7-4.1l0.8-0.2l0.4-0.3l-0.1-0.4l-0.5-0.5v-0.6h0.6l-0.1-0.5l-0.1-0.1l-0.2,0 l-0.2-0.2l1.1-0.7l-0.5-0.7c0.4-0.2,0.8-0.4,1.1-0.6v-0.7c-1.7-0.3-1-1.7-0.1-2.5l0.7-0.2v-0.6c-1.6-1.7-1.7-1.8-2.4-2.8h1.1 c-1-2.9-1-3.5,0-2.1c0.5-1.9,0.6-1.5,0.9-0.9l0.3-0.5c0.1-1.7-0.3-3.3-1.2-4.7v-0.8h0.6v-0.6l-0.7-0.4L460,182 c1-2.8,3.4-4.8,6.4-4.6c7.2-4.4,14.4-9.2,17.4-17.4l-0.3-1.3c-0.2-3.3,0.8-5.2,3.1-5.6l1.2-2.2L485.7,147.6z M466.9,163.3 c-0.9,1.8-0.9,3.4,0,4.8l-0.5,0.3c-0.3,2.1-1.2,3.8-3,5.2l-1.9-0.3c-1.9-4.7-4.2-8.1-4.5-13.2c2.6-3.5,4.3-5.1,7.6-4.4 C467.1,157.5,467.9,160,466.9,163.3C466.5,164.5,466.7,161.5,466.9,163.3z"/></svg>
 

אולי מעניין אותך גם...

הפרק היומי

הפרק היומי! כל ערב פרק תהילים חדש. הצטרפו אלינו לקריאת תהילים משותפת!


תהילים פרק קכו

א שִׁיר הַמַּעֲלוֹת בְּשׁוּב יי אֶת שִׁיבַת צִיּוֹן הָיִינוּ כְּחֹלְמִים:ב אָז יִמָּלֵא שְׂחוֹק פִּינוּ וּלְשׁוֹנֵנוּ רִנָּה אָז יֹאמְרוּ בַגּוֹיִם הִגְדִּיל יי לַעֲשׂוֹת עִם אֵלֶּה:ג הִגְדִּיל יי לַעֲשׂוֹת עִמָּנוּ הָיִינוּ שְׂמֵחִים:ד שׁוּבָה יי אֶת (שבותנו) שְׁבִיתֵנוּ כַּאֲפִיקִים בַּנֶּגֶב:ה הַזֹּרְעִים בְּדִמְעָה בְּרִנָּה יִקְצֹרוּ:ו הָלוֹךְ יֵלֵךְ וּבָכֹה נֹשֵׂא מֶשֶׁךְ הַזָּרַע בֹּא יָבוֹא בְרִנָּה נֹשֵׂא אֲלֻמֹּתָיו:
נקרא  108  פעמים

אתגר AI

תאומים • אתגר 145

לוח מודעות

למעלה