الباشمهندس
عدد المساهمات : 8310 عدد المواضيع : 3771 الجنس :
خدمات المنتدى الساعة الآن فى مصر: من فضلك: لاتنسى متابعتنا على:
| موضوع: كود متحرك لتضع بة مجموعة من الخيارات مثل كود افضل استايلات الشهر الأربعاء 21 سبتمبر 2011 - 2:46 | |
|
كود متحرك لتضع بة مجموعة من الخيارات مثل كود افضل استايلات الشهر
يتم استبدال الصور والاسماء و الروابط بما تريده
الصور صوره الستايل الاول صوره الستايل الثاني صوره الستايل الثالث
الاسماء اسم الستايل الاول اسم الستايل الثاني اسم الستايل الثالث
الروابط رابط الاستايل الاول من الهيت سكين رابط الاستايل الثاني من الهيت سكين رابط الاستايل الثالث من الهيت سكين
<head> <style> <!-- .picshow_main { position: relative; width: 180px; height: 135px} img{ border:0px} .picshow_main .imgbig { filter: progid:dximagetransform.microsoft.wipe(gradientsize=1.0,wipestyle=4, motion=forward); width: 180px; height: 135px} .picshow_change {position: absolute; text-align: left; bottom: 0px; height: 30px; right: 0px; left: 100px;} .picshow_change a { border: 1px solid; display: block; float: left; margin-right: 5px; -display: inline} a.axx { border-color: #555} a.bxx { border-color: #000} --> </style> </head>
<div class="h3"> <center>أفضل التصاميم لهذا الشهر</center></div> <center> <style type="text/css"> .picshow { z-index:444; position:relative; background-color:#ffffff; width: 100%; height: 135px} .picshow_main { position: relative; width: 180px; height: 135px} .picshow_main .imgbig { filter: progid:dximagetransform.microsoft.wipe(gradientsize=1.0,wipestyle=4, motion=forward); width: 180px; height: 135px} .picshow_change {position: absolute; text-align: left; bottom: 0px; height: 30px; right: 0px; left: 100px;} .picshow_change img {width:15px; height: 15px} .picshow_change a { border: 1px solid; display: block; float: left; margin-right: 5px; -display: inline} a.axx { border-color: #555} a.axx:hover {border-color: #000} a.axx img { filter: alpha(opacity=40); opacity: 0.4; -moz-opacity: 0.4} a.axx:hover img {filter: alpha(opacity=100); opacity: 1.0; -moz-opacity: 1.0} a.bxx { border-color: #000} a.bxx:hover {border-color: #000} img{ border:0px} </style> <script language="javascript"> var counts = 3; img1 = new Image(); img1.src = 'صورة الاستايل الاول'; img2 = new Image(); img2.src = 'صورة الاستايل الثاني'; img3 = new Image(); img3.src = 'صورة الاستايل الثالث'; var smallImg = new Array(); smallImg[0] = 'https://i.servimg.com/u/f60/12/10/25/45/index_10.gif'; smallImg[1] = 'https://i.servimg.com/u/f60/12/10/25/45/index_11.gif'; smallImg[2] = 'https://i.servimg.com/u/f60/12/10/25/45/index_12.gif'; url1 = 'رابط الاستايل الاول من الهيت سكين'; url2 = 'رابط الاستايل الثاني من الهيت سكين'; url3 = 'رابط الاستايل الثالث من الهيت سكين';
alt1 = new Image(); alt1.alt = 'اسم الاستايل الاول'; alt2 = new Image(); alt2.alt = 'اسم الاستايل الثاني'; alt3 = new Image(); alt3.alt = 'اسم الاستايل الثالث'; var nn = 1; var key = 0; function change_img() { if (key == 0) { key = 1; } else if (document.all) { document.getElementById("pic").filters[0].Apply(); document.getElementById("pic").filters[0].Play(duration = 2); } eval('document.getElementById("pic").src=img' + nn + '.src'); eval('document.getElementById("url_theme").href=url' + nn); eval('document.getElementById("pic").alt=alt' + nn + '.alt'); if (nn == 1) { document.getElementById("url_theme").target = "_blank"; document.getElementById("url_theme").style.cursor = "pointer"; } else { document.getElementById("url_theme").target = "_blank" document.getElementById("url_theme").style.cursor = "pointer" } for ( var i = 1; i <= counts; i++) { document.getElementById("xxjdjj" + i).className = 'axx'; } document.getElementById("xxjdjj" + nn).className = 'bxx'; nn++; if (nn > counts) { nn = 1; } tt = setTimeout('change_img()', 7000); } function changeimg(n) { nn = n; window.clearInterval(tt); change_img(); } function ImageShow() { document.write('<div class="picshow_main">'); document.write('<div><a id="url_theme"><img id="pic" class="imgbig" /></a></div>'); document.write('<div class="picshow_change">'); for ( var i = 0; i < counts; i++) { document.write('<a href="javascript:changeimg(' + (i + 1) + ');" id="xxjdjj' + (i + 1) + '" class="axx" target="_self"><img src="' + smallImg[i] + '"></a>'); } document.write('</div></div>'); change_img(); } </script> <script language="javascript" type="text/javascript"> ImageShow(); </script> <div class="picshow_main"> <div style="width: 180px; height: 135px"> </div> </div> </center> |
| |
|