عدد المساهمات : 573 نقاط : 1743 تاريخ الميلاد : 11/09/1993 العمر : 31 | موضوع: كود صورة وعند مرور الماوس عليها تأتي قائمة منسدلة لتضع بها ما تشاء 2011-07-23, 08:38 | |
| أهلا بجميع زوار وأعضاء [ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط][ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط] الكرامكما سبق وتم وعدكم بوضع جميع أكوادنا التي تعجبكم لكم هنا بالمجان, فلقد وفينا بوعدنا ولا خير في كاتم العلم.شرحنا اليوم هو طريقة وضع كود صورة وعند مرور الماوس عليها تأتي قائمة منسدلة لتضع بها ما تشاء. الأن نأتي للشرح:-هو عبارة عن كودين, واحد تضعه بأي مكان تريده ليظهر والآخر تضعه بورقة تصميم css لتحديد المكان بدقة لوضعه يمينآ كان أم يسارآ.الكود الأول, وهو الكود الذي تضعه بأي مكان عدى ورقة تصميم css: - الكود:
-
<div class="eshary_com"><ul id="topMenu"><li class="" onmouseover="this.className = 'over';" onmouseout="this.className = '';"></li><li class="" onmouseover="this.className = 'over';" onmouseout="this.className = '';"><img src="http://i63.servimg.com/u/f63/16/33/53/90/oouso10.png" alt=""><ul style="width: 200px; top: 10px; left: 20px;" -3px;="" 25px;="" 50%="" top:="" 26px;="" left:="" 10px;=""><li><table class="forumline" width="100%" border="0" cellpadding="0" cellspacing="1"><tbody><tr><td class="row1" onmouseover='this.className="row2"' onmouseout='this.className="row1"' width="100%">منتدى العرب Eshary.Com</td></tr></tbody></table></li></ul></li></ul><table dir="ltr" border="0" cellpadding="0" cellspacing="0"><style>#topMenu{padding: 0;margin: 0;list-style: none;}#topMenu li{float: left;list-style:none;position: relative;}#topMenu li ul{display: none;position: absolute;left: 0;padding: 0;margin: 0;}#topMenu li:hover ul, #topMenu li.over ul{display: block;}</style></table></div>
استبدل الرابط: [ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط] برابط الصورة التي تريدها أن تظهر. استبدل جملة: منتدى العرب بأي شيء تريدة أن يظهر عند مرور الماوس على الصورة. والأن نأتي للكود الثاني, وهو كود ورقة تصميم css: أضف هذا الكود في ورقة تصميم cssلوحة الاداره >> مظهر المنتدى >> الصور والألوان >> ألوان >> ورقة تصميم css - الكود:
-
.arabe.moontada_net { float: left; }
ثم سجل إن واجهتك مشكلة بتحويلة للجهة اليمنى, فأعلم بأنه يجب عليك تعديلة من الكود الأول. |
|