שלום
יש לי טבלה בעלת 12 תאים, אשר מכילה 4 תמונות לכל תא קיימים בטבלה תאים בצבעים שונים ולחלקם יש תמונת רקע.
אני רוצה שבמעבר עכבר מעל הטבלה כל המאיפפנים האלו יתצחלפו במאפיינים אחרים, כלומר שכל התמונות יתחלפו באחרות, כל הצבעים של הרקע ישתנו וכל תמונות הרקע יוחלפו באחרות.
השאלה היא איך אני מחליף כל כך הרבה פרטים במעבר יחיד מעל הטבלה ?

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

המטרה שלי היא לשנות את מראה הטבלאות הכחולות למעלה http://fcp.kuchi.be

תודה

קוד:

element.onmouseover = function(){
	this.style.color = "blue";
	this.src = "path/to/file.ext";
	........
};

שתי שאלות בקשר לזה...
- בנית כאן פונק', באיזה שפה היא ? הרי לא ניתן לעשות פונקציות ב HTML , אני צריך לשים תגי JS לפני ואחרי ?
- האם במקום element אני כותב את שם הטבלה ובמקום this את שם התמונה/התא


תודה

1. כמובן שזה קוד JS ואמור להיות כתוב במקטע קוד של JS (בקובץ נפרד או במקטע של התג script).
2. ה-element אמור להיות מצביע לאלמנט. לדוגמה:

קוד:

var element = document.getElementById('td1');

ה-this זה כידוע 'מילה שמורה' המכילה 'מצביע' לאותו אלמנט שבו הוא נקרא (במקרה זה, לאובייקט שאליו מצביע המשתנה בשם element).

בנוסף למה ששחר כבר ציין, אם כל המאפיינים שברצונך לשנות הינם רק מאפייני עיצוב (css) תוכל ליצור מחלקה (class) ספציפית ל'מעבר' ובמעבר/יציאה לשנות את שם המחלקה באופן הבא:

קוד:

element.className = 'tdHover';

תוכל לעשות זאת גם עם hover ב-css.

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

זה מה שעשיתי

קוד:

<SCRIPT LANGUAGE="JavaScript">
var element = document.getElementById('table1');
var td1 = document.getElementById('td1');

element.onmouseover = function(){
	td1.style.color = "blue";

};
</script>

בנוסף הגדרתי בתג הטבלה id="table1"
ובתג של התא המסויים id="td1"

1. אני מתפלא עליך, אתה פעיל בפורום זה לא מאתמול, ואתה אמור לדעת שבצורה תקנית התג script נכתב באופן זה:

קוד:

<script type="text/javascript"></script>

2. תעלה את הדף ותצרף קישור, שנבין למה מתייחס ה-id הנ"ל וכו'.
תצרף גם תיאור מה בדיוק אתה רוצה שיקרה בעת מעבר העכבר.

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

זה העמוד ....
http://fcp.kuchi.be/
בצד ימין למעלה יש "תא" שהוא תפריט משתמש, אני רוצה שבמעבר עכבר התא ישנה את צבעו.

התא הוא בעצם טבלה עם 12 תמונות המורכבות זו ליד זו, ובכדי שצבע התא ישתנה צריך לשנות הרבה מאפיינים.

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

אני לא יכול לשלוח את כל הקובת כי הוא גדול, שלחתי כבר את הקטע הרלוונטי.

תג הפתיח של התא שאמור להשתנות:

קוד:

<td id="td1" bgcolor="#E6F5FF">

תג הפתיח של הטבלה

קוד:

<table id="table1" border="0" width="810" cellspacing="5" cellpadding="0">

קוד:

<script type="text/javascript">
var element = document.getElementById('table1');
var td1 = document.getElementById('td1');

element.onmouseover = function(){
	td1.style.color = "blue";

};
</script>

כמו כן קטע הקוד מצוי בקובץ לפני הקטע של הטבלה .. לא שזה משנה

סביר להניח שבזמן הקריאה ל-getElementById הדף לא סיים לעלות (אירוע onload).
שים את כל הקוד בתוך

קוד:

window.onload = function (){...}

איך בדיוק ?
ככה ?

קוד:

<script type="text/javascript">

var element = document.getElementById('table1');
var td1 = document.getElementById('td1');

window.onload = element.onmouseover = function(){
	td1.style.color = "blue";

};
</script>

ניסיתי גם ככה ועדיין לא עובד

קוד:

<script type="text/javascript">
window.onload = function ttt();
var element = document.getElementById('table1');
var td1 = document.getElementById('td1');

element.onmouseover = function ttt(){
	td1.style.color = "blue";

};
</script>

זה ממש לא נראה לי טוב ... אני לא מכיר את הסינטקס של JS ככה שאין לי מושג ..

לא ולא, נראה שכלל לא ברור לך "מי נגד מי", אנסה להסביר.

קוד:

var element, td1;

window.onload = function(){
	element = document.getElementById('table1');
	td1 = document.getElementById('td1');

	element.onmouseover = function(){
		td1.style.color = "blue";
	};
};

1. הצהרתי על המשתנים, כדי שהם יהיו גלובאליים ולא מקומיים בפונקציה (אחרת לא תוכל להשתמש בהם בהמשך).
3. לתוך המאפיין onload של האובייקט window, שהוא בעצם מכיל את הערך של האירוע onload של הדף, "הכנסתי" פונקציה שתריץ את הפעולות הבאות:
4. תציב במשתנה element מצביע לאלמנט שה-id שלו הינו table1.
5. תציב במשתנה td1 מבציע לאובייקט בעל id בשם td1.
7. תציב באירוע onmouseover של האלמנט שמצביע אליו שמור במשתנה element את הפונקציה שתבצע את קטע הקוד שבין הסוגריים המסולסלות.

אני אגב מעדיף את הדרך הבאה, אלא אם המשתנים ישמשו למקרים נוספים.

קוד:

window.onload = function(){
	document.getElementById('table1').onmouseover = function(){
		td1.style.color = 'blue';
	};

	document.getElementById('td1').onmouseover = function(){
		td1.style.color = 'blue';
	};
};

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

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

אפשר לראות כאן http://fcp.kuchi.be בריבוע הימני העליון...

זה עושה בדיוק מה שהקוד צריך לעשות.
שחר נתן לך רק דוגמה לכיוון הפתרון, עכשיו תכניס בתוך הפונקציה את כל הפעולות שתרצה שיתבצעו.
color - היה ונשאר המאפיין של צבע הכתב.
backgroundColor - היה ונותר צבע הרקע וכו' עיין ב-w3schools או בכל אתר אחר המכיל את הפירוט המלא של ה-dom.

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

אני מנסה לשנות את תמונת הרקע של תא מסויים.
תמונת הקרע מוגדרת עם background ולאחר מכן את הנתיב, אבל כאשר אני עושה
img2.style.background
התמונה לא משתנה, כנראה בגלל שזה לא תקני לקרוא לתמונת רקע של תא כ background.
אז מה אני עושה ? לא מצאתי ב w3schools...

לשום אלמנט אין את attribute בשם background.
אתה יכול לשנות את ה-src רק לתגי תמונה (img).
את הרקע אתה מגדיר ב-CSS

קוד:

background: url('path/to/file.ext');

שמתי את זה ועכשיו כלום לא עובד, זה משגע אותי

קוד:

img2.style.background: url('images/newBlocks1/t.gif');

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

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

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

ברם, למרות שאתה אמור להגדיר את עיצוב הדף בדף המכיל אך ורק את קוד ה-css או במקטע ה-css הנמצא ב-head (תקן xhtml לא מאפשר להכניס מקטע css בגוף המסמך), ישנם דרכים לשנות מאפייני עיצוב בצורה דינאמית כמובן באמצעות קוד js.
כדי לאפשר גישה לכל אלמנט במסמך או אלמנט עיצוב של אלמנט כלשהו, נוצר ה-dom. ה-dom הוא מסמך המכיל את מודול האלמנטים ומתאר את הגישה לכל אלמנט פיזי, מאפיין של אלמנט או אלמנט/מאפיין עיצובי.
ה-dom הנ"ל הוא אשר הגדיר שהגישה לשינוי מאפיין עיצובי כלשהו נעשית בדרך הזאת: element.style ולאחריה שוב נקודה כשלאחריה שם המאפיין העיצובי שאליו ברצוננו לגשת.
ה-dom מגדיר כמובן במפורט מאד את הגשיה לכל מאפיין עיצובי כפי שתוכל לראות כאן.

מהתיאור לעיל עולה כי יש לנו שתי דרכים להגדרת עיצוב מאפיין באמצעות css:
1. באמצעות קוד css במקטע קוד של css.
2. באמצעות קוד css באמצעות js תוך שימוש ב-dom.

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

ולעניינינו: הקוד ששחר הציג לך לגבי תמונת רקע, הינו קוד css שאותו עליך להזין בתוך מקטע css תרני (קובץ חיצוני או מקטע css בתוך התג style).
במקרה שלך, אתה מנסה כרגע להגדיר את תמונת הרקע באמצעות ה-dom, לכן עליך לגשת בצורה שונה, כפי שתוכל לראות בקישור שצירפתי.

אני מקווה שכעת יהיה ברור יותר

1. יש לך כאן רשימה מפורטת להגדרות העיצוב על פי ה-dom.
2. במקום לעשות שימוש לא נכון ב-JS (כי עיצוב לא אמור להתערב עם קוד html או js), תגדיר את תמונת הרקע כפי ששחר הראה לך בהודעה מעלי, ותשתמש ב-hover או במאפיין className (ב-dom) כדי להגדיר לאלמנט בכל מצב עיצוב שונה.

ישבתי על זה שעות וזה לא עובד באיכספלורר !!!!!!!
בפיירפוקס הכול בסדר אבל באיכספלורר יש בעייה , והוא גם מראה שיש לי שגיאה בקוד איפשהוא ...
נמאס לי ..
הנה הקוד הגרוע שלי ....

קוד:

<script type="text/javascript">
var element, td1;

window.onload = function(){
	element = document.getElementById('table1');
	td1 = document.getElementById('td1');
	img1 = document.getElementById('img1');
	img3 = document.getElementById('img3');
	img4 = document.getElementById('img4');
	img5 = document.getElementById('img5');
	img6 = document.getElementById('img6');
	img7 = document.getElementById('img7');
	img8 = document.getElementById('img8');
	img9 = document.getElementById('img9');
	img10 = document.getElementById('img10');
	img11 = document.getElementById('img11');
	img12 = document.getElementById('img12');
	img13 = document.getElementById('img13');
	img2 = document.getElementById("img2");

	element.onmouseover = function(){
	
		td1.style.backgroundColor  = "#E2EBFF";
		img1.src = "images/newBlocks1/t-r.gif";
		img2.style.backgroundImage = "url(images/newBlocks1/t.gif)";
		img3.src = "images/newBlocks1/t-l.gif";
		img4.style.backgroundImage = "url(images/newBlocks1/r.gif)";
		img5.src = "images/newBlocks1/bg-r.gif";
		img6.style.backgroundImage = "url(images/newBlocks1/bbg.gif)";
		img7.style.backgroundImage = "url(images/newBlocks1/l.gif)";
		img8.src = "images/newBlocks1/bg-l.gif";
		img9.style.backgroundImage = "url(images/newBlocks1/r.gif)";
		img10.style.backgroundImage = "url(images/newBlocks1/l.gif)";
		img11.src = "images/newBlocks1/b-r.gif";
		img12.style.backgroundImage = "url(images/newBlocks1/b.gif)";
		img13.src = "images/newBlocks1/b-l.gif";
	}
	element.onmouseout = function(){
		td1.style.backgroundColor  = "#E6F5FF";
		img1.src = "images/newBlocks/t-r.gif";
		img2.style.backgroundImage = "url(images/newBlocks/t.gif)";
		img3.src = "images/newBlocks/t-l.gif";
		img4.style.backgroundImage = "url(images/newBlocks/r.gif)";
		img5.src = "images/newBlocks/bg-r.gif";
		img6.style.backgroundImage = "url(images/newBlocks/bbg.gif)";
		img7.style.backgroundImage = "url(images/newBlocks/l.gif)";
		img8.src = "images/newBlocks/bg-l.gif";
		img9.style.backgroundImage = "url(images/newBlocks/r.gif)";
		img10.style.backgroundImage = "url(images/newBlocks/l.gif)";
		img11.src = "images/newBlocks/b-r.gif";
		img12.style.backgroundImage = "url(images/newBlocks/b.gif)";
		img13.src = "images/newBlocks/b-l.gif";
	}
};
</script>

וכמו שהסברתם את התמונות הגדרתי ב HTML כIMG
ואת התמונות רקע של התאים דרך CSS

הצלחתי לתקן

בכלל לא צריך את החלק הזה ... הוא עושה שגיאה ...

קוד:

	td1 = document.getElementById('td1');
	img1 = document.getElementById('img1');
	img3 = document.getElementById('img3');
	img4 = document.getElementById('img4');
	img5 = document.getElementById('img5');
	img6 = document.getElementById('img6');
	img7 = document.getElementById('img7');
	img8 = document.getElementById('img8');
	img9 = document.getElementById('img9');
	img10 = document.getElementById('img10');
	img11 = document.getElementById('img11');
	img12 = document.getElementById('img12');
	img13 = document.getElementById('img13');
	img2 = document.getElementById("img2");