עבור לתוכן

JAVASCRIPT - איך אני מחליף תמונות של הממשק באתר?

Featured Replies

פורסם

אין לי מושג בJS.

מצאתי קוד וניסיתי לערוך אותו כדי להתאים.

לא עובד משום מה.

איפה הטעות?


// ==UserScript==
// @name Smaller Quote Button
// @description Replace Image on HWZONE.CO.IL
// @version 1.0
// @include *hwzone.co.il/community/threads/*
// @grant none
// ==/UserScript==

var images = document.getElementsByTagName ("img");
var x=0;
while(x<images.length)
{
if(images[x].src == "/community/images/statusicon/quote.png")
{
images[x].src = "http://www.movingrelocation.com/wp-content/themes/movingrelocation/inc/images/quote-icon.jpg";
}
x=x+1;
}

- - - תגובה אוחדה: - - -

מצאתי קוד יותר יעיל שעובד.


// ==UserScript==
// @name Smaller Quote Button
// @description Replace Image on HWZONE.CO.IL
// @version 1.0
// @include *hwzone.co.il/community/threads/*
// @grant none
// ==/UserScript==

var theImg = document.getElementById('quoteimg_4810806');
theImg.src = 'http://www.movingrelocation.com/wp-content/themes/movingrelocation/inc/images/quote-icon.jpg'

נערך על-ידי Art Tatum

פורסם

אתה רומז משהו? :)

אייקון זה מונח מטעה, אני חשבתי מהכותרת שאתה מדבר על favicon

פורסם
  • מחבר

אני רק רוצה להחליף את צטט ותגובה בתמונות קטנות יותר.

עדיין לא לגמרי מסתדר לי.

לכל ID יש מספר שונה.

#quoteimg_4810806

#quoteimg_4810807

וכו..

ניסיתי 'quoteimg' או '*quoteimg*' ולא עבד.

איך אפשר לנסח משהו שיתפוס את כל הID שמכילים quoteimg ?

נערך על-ידי Art Tatum

פורסם

כדי להבין מה בעצם לא עבד בדוגמה הראשונה שלך:

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

לדוגמה, תוכל להחליף את השורה הרלוונטית במשהו כזה:


if(images[x].src.indexOf("/community/images/statusicon/quote.png")!=-1)

פורסם

למה אתה לא יכול להחליף את הנתיב ישירות ב- HTML?

בכל מקרה, ID הוא מזהה ייחודי, משמע צריך להיות רק אחד כזה בזמן נתון.

אם אתה רוצה לתפוס כמה אלמנטים אתה צריך לתת להם class זהה ואז ניתן לתפוס אותם באמצעות querySelectorAll.

פורסם
  • מחבר

אני מריץ את הSCRIPT עם GREASEMONKEY, לא יודע אם זה משנה.

בנתיים לא הצלחתי לגרום לזה לעבוד כמו שאני רוצה.

אין לי מושג בJAVASCRIPT, סתם לקחתי קוד שאמור להיות מתאים וניסיתי לשנות אותו להשגת מטרתי.

הדוגמה השניה היא אידיאלית, גם כי הקוד מאוד פשוט, וגם כי היא עובדת.

הבעיה היחידה היא שכדי שכל ה<img> הרלוונטים יוחלפו, הID בקוד צריך להיות לא מדויק/חלקי, ולאפשר זיהוי של כל ה<img> בעלי ID שחלקו הראשון מתחיל ב"quoteimg".

איך אפשר לנסח כך שההגדרה תתפוס?

נערך על-ידי Art Tatum

פורסם

כמו שגיל אמר, אפשר להשתמש בjquery (כי הוא כלול באתר).

דוגמה שאמורה לעבוד:

$('img[id^="quoteimg_"]').attr('src','http://www.movingrelocation.com/wp-content/themes/movingrelocation/inc/images/quote-icon.jpg')

פורסם
  • מחבר

וואלה עובד.

תודה.

- - - תגובה אוחדה: - - -

הנה התוצאה אם מישהו מעוניין לנסות:


// ==UserScript==
// @name Smaller Edit Buttons
// @description Replace Images on HWZONE.CO.IL
// @version 1.0
// @include *hwzone.co.il/community/threads/*
// @grant none
// ==/UserScript==


$('img[id^="quoteimg_"]').attr('src','http://www.mosesnutrition.com/wp-content/uploads/Quotation-Marks-Ending.png')
$('img[src^="/community/images/statusicon/reply.png"]').attr('src','http://countrywidecommunications.com/wp-content/themes/countrywide/images/plans/plus_sign2.png')
$('img[id^="editimg_"]').attr('src','http://iconbug.com/download/size/24/icon/816/green-pencil/')

- - - תגובה אוחדה: - - -

עכשיו שאני חושב על זה, אולי זאת הזדמנות טובה גם להחליף(באופן חד צדדי כמובן) כמה תמונות של משתמשים.

satan-tenacious-d_6329.jpg

congressional-satan1.jpg

3630520_7993066-prn01_lz.jpg

- - - תגובה אוחדה: - - -

ומה עם החלפת הICON של וינדוס 8.1 שמציג כרגע ICON של וינדוס NT?

INSPECT לאוביקט מוביל לקוד בו אין תמונה שאפשר להחליף.

אומנם אני יכול להחליף את הCLASS ואז התמונה תשתנה לCLASS קיים אחר(כמו גם הTITLE הנכון שמוצג בMOUSE OVER):

$('img[alt^=Windows NT 6.3]').attr('class','win8').attr('alt','Win 8.1').attr('title','win8.1')

שזה טוב, אבל לא מעולה.

איך אני מחליף אותו בתמונה הזאת אין לי מושג:

windows8_1.pmg

- - - תגובה אוחדה: - - -

וואללה עובד:


$('img[alt^="Windows NT 6.3"]').attr('class','win8').attr('alt','Win 8.1').attr('title','win8.1').attr('src','http://www.netzwerktotal.de/images/news/windows8_1.pmg')

נערך על-ידי Art Tatum

פורסם
  • מחבר

להחליף תמונות משתמשים זה קצת יותר מאתגר.

בנתיים הצלחתי רק להחליף AVATAR באופן גורף לכל אלו שאין להם AVATAR.

וגם אז אני לא לגמרי סגור על ההגדרות כך שיתאימו לכל גדלי התמונות.


// ==UserScript==
// @name Replace Users Avatars
// @namespace Replace Users Avatars
// @description Replace Users Avatars thank you very much
// @include http://hwzone.co.il/community/threads/*
// @version 1
// @grant none
// ==/UserScript==

$('div[class^="avataarinfono"]').attr('style','background:url(http://ih3.redbubble.net/image.14723706.6777/sticker,375x360.u1.png); background-size: contain; width: 180px; height:180px; top: -20px; right: 5px; background-repeat: no-repeat')

נערך על-ידי Art Tatum

פורסם

תנסה את זה:

כנס לפרופיל תעתיק את החלק האחרון אחרי הסלאש בקישור, שלך לדוגמה זה 36230-Art-Tatum

ואז:


var changeAvatars = {
'36230-Art-Tatum': 'http://avatar.url',
'28706-IlanF': 'http://avatar.url.2'
}


for(var index in changeAvatars) {
$('.postuseravatar[href*='+index+'] a.avatarinfocom').css('background', 'url('+changeAvatars[index]+')').find('img').attr('src', changeAvatars[index]);
}

**לא בדקתי את זה אם כתבתי נכון, אם זה לא עובד אז תפתח developer console (F12) ותראה אם יש שגיאה...

פורסם
  • מחבר

האמת שכל זה התחיל כי הכפתור "צטט" יצא מהמקום והסתיר את הטקסט בשורה הראשונה של ההודעות ואחרי כמה פעמים שלא הצלחתי לקרוא הגעתי למסקנה שאני צריך להתחיל לעצב את הדף בעצמי.

ואם כבר התחלתי אז למה לא לשנות את האיקון לוינדוס 8.1 שהרבה אנשים רוצים שתסדרו.

שינוי הAVATARS זה סתם בשביל הצחוק ובאמת מיותר.

לפחות אני לומד מזה כמה דברים לפעם הבאה שמשהו ישתבש בפורום וידרוש התערבות כירורגית של משתמשים.

ואם היה לי מספיק ידע אולי הייתי עושה עיצוב קומפקטי לפורום.

הרבה אנשים היו נהנים מזה.

נערך על-ידי Art Tatum

פורסם

אם יש בעיה שמפריעה לך לגלוש באתר אז תדווח עליה ויטפלו בזה. אין צורך להתחיל להתאים את הפורום אישית...

אבל אני לא נתקלתי בתופעה שכפתור הצטט מפריע לקרוא תגובות.

ולצורך העניין, לא אכפת לי להשקיע 5 דקות בשביל סקריפט חסר תועלת שכל מה שהוא עושה זה להחליף את האווטר למשתמש :P

פורסם
  • מחבר

העיצוב עובד יופי ללא תוספי חסימות.

אבל לבעלי תוספי חסימות כבר הרבה זמן שדברים יוצאים מהמקום.

וההנהלה/מפתחים כבר אמרו שהם לא מעוניינים להשקיע זמן לפתור בעיות של שיטת גלישה שלילית מבחינתם.

עד עכשיו זה היה קוסמטי ולא בא על חשבון פונקציונליות, ועכשיו זה ממש חוסם חלק מהטקסט.

דרך אגב בלי קשר לכל זה.

אם אני(או מישהו אחר) יעשה עיצוב קומפקטי שמקצץ רווחים מיותרים ומקטין אלמנטים, ואולי גם משנה את הTHEME של הצבעים, זה ילך חזק.

לא מעט אנשים היו מעוניינים בכך.

נערך על-ידי Art Tatum

ארכיון

דיון זה הועבר לארכיון ולא ניתן להוסיף בו תגובות חדשות.

דיונים חדשים