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

סיפי

משתמש מקצוען
עיצוב גרפי
אני רוצה ליצור באתר אפשרות לבחירת אזור בארץ ברעיון של התמונה המצ"ב,
האם יש אפשרות פשוטה לעשות את זה ע"י תמונה אחת שמורכבת מכמה צורות (האזורים בארץ) שתהיה 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>
 

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

הפרק היומי

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


תהילים פרק קל

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

אתגר AI

ממה זה עשוי...? • אתגר 16

לוח מודעות

למעלה