Facebook
Twitter
RSS479
צפיות
צפיות
20
תשובות
תשובות
טעינת תמונה לזיכרון הדפדפן….
אני רוצה ליצור כפתורים באתר שלי שהם תמונות וכאשר העכבר עובר עליהם הם מתחלפות לתמונה אחרת.
אני יודע שבשביל שזה יעבוד חלק אני צריך לטעון את התמונות לזיכרון הדפדפן, איך אני עושה זאת?
תודה מראש….
20 תשובות
תשובה
prePic = new Image();
prePic.src = "somePic01.gif";
אם יש לך כמות מסוימת של תמונות אז נסה להכניסן למערך ולעבור בלולאה על כולן בצורה כזו:
var tmpImages = [];
var arrImages = [
"button1_over.gif","button2_over.gif",
"button3_over.gif","button4_over.gif",
tmpImages[i].src = arrImages[i];
}
תודה רבה, עוד שאלה…
איך אני יכול לעשות שתמונת הרקע בתא בטבלה תתחלף כאשר העכבר עובר מעליה?
ניסיתי כך
prePic = new Image();
prePic.src = "images/button1.jpg";
prePic2 = new Image();
prePic2.src = "images/button.jpg";
<td background="images/button.jpg" onmouseover="this.background=Prepic;" onmouseout="this.background=Prepic2;>
זה לא עובד לי, אני לא בטוח שאני מגדיר לרקע להתחלף בצורה נכונה, ואני גם לא בטוח שאני נגש ל Prepic נכון.
אם משהו יכול לתקן אותי אני אשמח,
תודה מראש…..
נסה משהו כזה
<td style="background-image:url(images/button.jpg);" OnMouseOver="this.style.backgroundImage='url(images/button1.jpg)';" OnMouseOut="this.style.backgroundImage='url(images/button.jpg)';">
תודה אחי, יש לי רק בעיה אחת…
אני כותב בראש העמוד כך:
<SCRIPT language=JavaScript>
prePic = new Image();
prePic.src = "images/button.jpg";
prePic2 = new Image();
prePic.src2 = "images/button2.jpg";
</SCRIPT>
ואז בתא של הטבלה כך:
<td onClick=location="system.html" OnMouseOver="this.style.backgroundImage=prePic;" OnMouseOut="this.style.backgroundImage=prePic2;">
אך הדפדפן רושם לי שגיאה, אני פשוט לא יודע איך לגשת ל prePic אחרי שהגדרתי אותו.
תודה מראש למי שיכול לתקן אותי.
נסה ככה:
<td onClick=location="system.html" OnMouseOver="this.style.background=images/button.jpg;" OnMouseOut="this.style.background=images/button2.jpg;">
זה מה שאני עושה.
לי יכול להיות זה טוען אבל אני לא יוכל ליבדוק בגלל שאני בודק על המחשב וזה טוען מהר גם בלי זה.
אבל ככה אני עושה שבמעבר עכבר תיתחלף התמונה.
אבל עדיף לעשות את זה ב css אם אתה משתמש בזה בתור קישור לאיזה מקום.
שניה יש עוד משהו.
onClick="location.href='system.html'"
וכמו שאמרתי אני רואה אתה עושה את זה בתור קישור אז תעשה בcss ככה:
<style type="text/css">
.button{
height:הגובה של השורה;
width:100%;
display:block;
text-decoration:none;
background-image:url(images/button2.jpg);
/*שנה עוד או תוסיף למה שאתה רוצה..*/
}
.button:hover{
background-image:url(images/button.jpg);
}
</style>
זה הקוד css שמתאים לך….
שנה רק או תוסיף אך שאתה רוצה.
ניסיתי כך על השרת שלי…
ובצד לקוח זה עובד איטי, אני צריך לדעת איך אפשר להשתמש ב-
prePic = new Image();
prePic.src = "button.jpg";
למה אתה לא עושה כמו שכתבתי?
ניסיתי כך…
זה מה שהקובץ שלי מכיל:
<head>
<SCRIPT language=JavaScript>
prePic = new Image();
prePic.src = "images/button.jpg";
prePic2 = new Image();
prePic.src2 = "images/button2.jpg";
</SCRIPT>
</head>
<body>
<table><tr>
<td onClick=location="system.html" OnMouseOver="this.style.backgroundImage=prePic;" OnMouseOut="this.style.backgroundImage=prePic2;">
………..
………..
אך זה לא עובד…אתה יכול לראות למה?
תודה…
2 דברים
1. איפה url בקוד?
2. נסה להגדיר את שם משתנה התמונה עם ה-src ולא האובייקט.
מצטער אבל לא הבנתי…
משהו כזה
<td onClick=location="system.html" OnMouseOver="this.style.backgroundImage='url('+prePic.src+')';" OnMouseOut="this.style.backgroundImage='url('+prePic2.src+')';">
תודה רבה זה עובד, אבל זה לא חלק…
התמונה לא מתחלפת מיד יש השהיה של איזה חצי שניה כל פעם שהתמונה מתחלפת. יש דרך לעשות זאת חלק לגמרי?
כמו בתפריטים האלה:
סליחה.. http://news.walla.co.il/
זה הלינק:
http://news.walla.co.il/
אתה יכול לתת נתיב מלא לרקע
אבל בעיקרון הם עובדים באותה צורה רק ב-CSS.
כל התאים שם הם קישורים ואז הם פשוט עושים class רגיל ו-class של hover.
וזה אמור לעבוד יותר חלק?
נווווווו!!!
זה מה שעשיתי לך.
אתה צריך לשים את זה בתור קישור.!!!
הינה:
<style type="text/css">
.button{
height:הגובה של השורה;
width:100%;
display:block;
text-decoration:none;
background-image:url(images/button2.jpg);
/*שנה עוד או תוסיף למה שאתה רוצה..*/
}
.button:hover{
background-image:url(images/button.jpg);
}
</style>
ואז אתה עושה:
<a href="///" class="button">קישור</a>
relax…
אולי תנסה ותראה?
חחחח….
אמרתי לו והוא אומר שזה לא פועל ואני בטוח שהוא שם את זה בתוך השורה במקום בלינק…
ניראה לי אתה צריך לעבור על המדריך css באתר…(לא לbuildhome).