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

[Art Tatum]

אין לי מושג ב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'

[Gil28]

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

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

[Art Tatum]

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

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

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

#quoteimg_4810806

#quoteimg_4810807

וכו..

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

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

[Gil28]

עם jquery.

[yonizaf]

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

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

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

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

[Adir.]

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

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

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

[Art Tatum]

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

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

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

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

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

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

[yonizaf]

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

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

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

[Art Tatum]

וואלה עובד.

תודה.

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

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

// ==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/')

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

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

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

ומה עם החלפת ה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')

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

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

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

וואללה עובד:

$('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')

[IlanF]

תנסה את זה:

כנס לפרופיל תעתיק את החלק האחרון אחרי הסלאש בקישור, שלך לדוגמה זה 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) ותראה אם יש שגיאה...

[Milford Cubicle]

ממש משעמם לך הא...

[Art Tatum]

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

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

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

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

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

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

[IlanF]

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

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

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

[Art Tatum]

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

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

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

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

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

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

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