كود الاختيار المتعدد بشكل جميل لصفحات ال HTML

كود رائع و منسق اقتبسته من اسلوب الاى باد يمكن ان يستخدم فى بوابات المواقع و المنتديات

الكود :

الكود:: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Language" content="en-us"> <meta http-equiv="Content-Type" content="text/html; charset=windows-1252"> <title>Happy 3ID</title> <script type="text/javascript" src="http://yourjavascript.com/1346118141/jquery.js"></script> <script type="text/javascript" src="http://yourjavascript.com/4110831136/interface.js"></script> <style media="screen" type="text/css"> body { font: 11px Tahoma, Helvetica, sans-serif; padding: 0; margin: 0; } img { border: none; } /* dock - top */ .dock { position: relative; height: 50px; text-align: center; } .dock-container { position: absolute; height: 50px; padding-left: 20px; } a.dock-item { display: block; width: 40px; color: #000; position: absolute; top: 0px; text-align: center; text-decoration: none; font: bold 12px Tahoma,Helvetica, sans-serif; } .dock-item img { border: none; margin: 5px 10px 0px; width: 100%; } .dock-item span { display: none; padding-left: 20px; } </style> </head> <body>  <div class="dock" id="dock"> <div class="dock-container"> <a class="dock-item" href="http://help.ahlamontada.com/"><img src="http://i41.servimg.com/u/f41/14/51/27/24/am-ico11.png" alt="home" /><span>Home </span></a> <a class="dock-item" href="http://help.ahlamontada.com/montada- f1/"><img src="http://2img.net/i/fa/fdf/annonce.png" alt="News" /><span>Notices and News</span></a> <a class="dock-item" href="http://help.ahlamontada.com/f5- montada"><img src="http://2img.net/i/fa/fdf/questions.png" alt="FAQ" /><span>FAQ</span></a> <a class="dock-item" href="http://help.ahlamontada.com/f79- montada"><img src="http://2img.net/i/fa/fdf/magic.png" alt="Advanced techniques" /><span>Advanced techniques</span></a> <a class="dock-item" href="http://help.ahlamontada.com/f84- montada"><img src="http://2img.net/i/fa/fdf/peindre.png" alt="Design" /><span>Design services and innovation</span></a> <a class="dock-item" href="http://help.ahlamontada.com/f22- montada"><img src="http://2img.net/i/fa/fdf_ar3/multib.png" alt="Support" /><span>Support Section AhlaBlogs</span></a> <a class="dock-item" href="http://help.ahlamontada.com/f7- montada"><img src="http://2img.net/i/fa/optimisation_fdf/common/medaille.gif" alt="calendar" /><span>General Thought Forum </span></a> <a class="dock-item" href="http://help.ahlamontada.com/f15- montada"><img src="http://2img.net/i/fa/fdf_ar3/discussion_ar.png" alt="Discussion" /><span>Discussion Section</span></a> <a class="dock-item" href="http://help.ahlamontada.com/f38- montada"><img src="http://2img.net/i/fa/fdf/ampoule.png" alt="Suggestions" /><span>Suggestions Forum </span></a> </div> </div>  <script type="text/javascript"> $(document).ready( function() { $('#dock').Fisheye( { maxWidth: 50, items: 'a', itemsText: 'span', container: '.dock-container', itemWidth: 40, proximity: 90, halign : 'center', valign : 'center' } ) $('#dock2').Fisheye( { maxWidth: 60, items: 'a', itemsText: 'span', container: '.dock-container2', itemWidth: 40, proximity: 80, alignment : 'left', valign: 'bottom', halign : 'center' } ) } ); </script> </body> </html>

صوره للكود:
كود الاختيار المتعدد بشكل جميل لصفحات ال HTML Captur17

شكرا لهذه المسابقات Cool