السلام عليكم ....
كما وعدتك اخي عادل
احاول اشرح لك الكود وانت بنفسك راح تصمم القائمة انشاء الله .
انا ما فهمت الكود كله لكني راح اوضح لك الفكرة ( على قد فهمي ) وانت صدقني انك بتستمر .
هذا الكود لزر واحد
<script>
pic2 = new Image()
pic2.src = 'run2.jpg';
pic1 = new Image()
pic1.src = "run.jpg"
var fRunning
function StartTrans(which2,xchng)
{
if (fRunning == 0)
{
fRunning = 1
which2.filters.blendTrans.Apply();
which2.src = xchng;
which2.filters.blendTrans.Play();
}
}
function EndTrans(which2,xchng)
{
fRunning = 0
which2.filters.blendTrans.Apply();
which2.src = xchng;
which2.filters.blendTrans.Play()
}
</script>
هذا طبعا بال Java Scripts
واضف هذه الاسطر التاليه بال HTML
<img src="l1.jpg" ID='e5' onmouseover="StartTrans(X,pic2.src)" onmouseout="EndTrans(X,pic1.src)" >
<p><center><img src="run.jpg" width="300" height="300" id="X" style="filter:blendTrans(duration=0.3)">
والان اسمع :
الفكرة بصوره عامه اننا نرسم صورتين عشان وحدة تظهر قبل ما يلمس الماوس الكلمة الموجودة بالقائمة onmouseout و الثانية بعد ما يلمس الماوس الكلمة الموجودة بالقائمة onmouseover
اول سطرين في السكربت :
Pic2 = new Image // هنا انشأنا صورة
Pic2.src = "run2.jpg" // وهنا حددنا عنوان الصورة وهو الملف Run2.jpg
وهذه ال Pic2 هي الصورة التي ستظهر اذا لمس الماوس الكلمة الموجودة بالقائمة .
وبالمثل مع الصورة التي تظهر قبل ان يلمس الماوس الكلمة Pic1
والان هنا وظيفتان Function
- الاولى : StartTrans(Which2,xchang)
وهي التي تبدأ بالتحويل من الصورة الاولى الى الثانية وتنفذ عند الحدث (action) onmouseover
ولاحظ هنا اننا نستخدم الفلتر blendTrans وانا صراحة ما اعرفه ولا تعاملت معه من قبل !!! المعذرة .
وتحتاج هذه الوضيفة متغيران : Which2 وحتوي على اسم الصورة الذي نحدده في ال HTML مثل <img ID='X' ...
والمتغير الاخر : xchange الذي يحتوي على عنوان الصورة Pic1.src
- وبالمثل الوظيفة الاخرى ...
*** وهذه الظائف ثابته في الكود الا اذا اردت ان تغير الفلتر blendTrans ...
والان جاء دور ال HTML
<img src="l1.jpg" ID='e5' onmouseover="StartTrans(X,pic2.src)" onmouseout="EndTrans(X,pic1.src)" >
هذا معروف بال HTML وهو ادراج صورة وهذه الصورة تكون الكلمة التي في القائمة .
ولاتنسى onmouseover حيث انها ستشغل الوظيفة StartTrans بالمتغيرات السابقة اذا لمس المؤشر هذه الصورة (صورة القائمة ).
وكذلك onmouseout حيث انها توقف التحويل بتشغيل الوظيفة EndTrans بالمتغيرات نفسها .
واخيرا :
<img src="run.jpg" width="300" height="300" id="X" style="filter:blendTrans(duration=0.3)">
وهذه الصورة التي ستتحول ولا تنسى ان تسميها كما فعلنا هنا < img ID = 'X'
وكذلك ان تححد فلتر ال blendTrans الي هو اساس السالفة في خاصية style
هكذا :
<img src="run.jpg" id='X' style="filter:blendTrans(duration=0.3)">
ونفس الشي اذا بغيت تضيف عناصر اخرى للقائمة مع التغيير في اسم الصورة وعنوانها ولا تنسى ان الظائف StartTrans و EndTrans ثابته
وما في داعي انك تعيدها لكل عنصر في القائمة .
وعسى اني افدتك وافدت الجميع