اولا نضع وسم راديوس
وبعد وسم الراديوس نحجز مساحة ظمن وسم div و هذا الوسم هو الذي نضع فيه التقييم (جيد، جيد جدا ...) لكن يجب ان يكون مخفي، وذالك عن طريق
كود PHP:
style="display:none"
وايضا يجب ان نعطي له ID خاص به حتى نتحكم به بالجافاسكريبت، لإظهاره وإخفائه وقت الحاجة كما في المثال السابق وضعت له كلمة wino
نصف المسألة قد أنجزت الآن
سنضع الآن وسم الجافاسكريبت، هذه الدالة
كود PHP:
window.onload = function(){
مفادها ان وقت انتهاء تحميل الصفحة فطبق ما يوجد داخلها
وما يوجد داخل هذه الدالة هو ان المتغير w يأخد قيمة مقبض الوسم الذي يحمل التعليمة wino وهي
كود PHP:
w = document.getElementById("wino").style
هذا حتى يسهل علينا التحكم بتنسيق هذا الوسم
نعود للأوسمة
نريد عند مرور الفأرة عل زر الراديوس ان يظهر لنا ما في المساحة div
اذا سنظيف للوسم هذا الأمر
كود PHP:
onmouseover="w.display=''"
وعند خروج مؤشر الفأرة منها تختفي
كود PHP:
onmouseout="w.display='none'"
نفي الأوامر نضعهم للوسم div
كود PHP:
<div id="wino" style="display:none" onmouseover="w.display=''" onmouseout="w.display='none'">
وفقط
والآن مثال متقدم
كود PHP:
<script type="text/javascript">
<!--
var r1,r2,r3,r4
window.onload = function(){
r1 = document.getElementById("r1").style
r2 = document.getElementById("r2").style
r3 = document.getElementById("r3").style
r4 = document.getElementById("r4").style
}
//-->
</script>
<input type="radio" name="" onmouseover="r1.display=''" onmouseout="r1.display='none'">
<div id="r1" style="display:none" onmouseover="r1.display=''" onmouseout="r1.display='none'">
<a href="#">ممتاز جدا </a><br>
<a href="#">ممتاز </a><br>
<a href="#">جيد جدا </a><br>
<a href="#">جيد </a>
</div>
<br>
<input type="radio" name="" onmouseover="r2.display=''" onmouseout="r2.display='none'">
<div id="r2" style="display:none" onmouseover="r2.display=''" onmouseout="r2.display='none'">
<a href="#">ممتاز جدا </a><br>
<a href="#">ممتاز </a><br>
<a href="#">جيد جدا </a><br>
<a href="#">جيد </a>
</div>
<br>
<input type="radio" name="" onmouseover="r3.display=''" onmouseout="r3.display='none'">
<div id="r3" style="display:none" onmouseover="r3.display=''" onmouseout="r3.display='none'">
<a href="#">ممتاز جدا </a><br>
<a href="#">ممتاز </a><br>
<a href="#">جيد جدا </a><br>
<a href="#">جيد </a>
</div>
<br>
<input type="radio" name="" onmouseover="r4.display=''" onmouseout="r4.display='none'">
<div id="r4" style="display:none" onmouseover="r4.display=''" onmouseout="r4.display='none'">
<a href="#">ممتاز جدا </a><br>
<a href="#">ممتاز </a><br>
<a href="#">جيد جدا </a><br>
<a href="#">جيد </a>
</div>
ل4 أزرار راديوس بنفس الطريقة
لاحظ ان ال id يختلف لكل وسم div
والسلام عليكم ورحمة الله