کمک فوری درباره کامل سازی این اسکریپت

[ehsanmc1]

سلام دوستان ، من اسکیریپتی طراحی کردم که کدش رو در اینجا قرار می دم .. تقریبا به چیزی که خواستم رسیدم فقط برای کامل کردنش نیاز به راهنمایی دارم .. می خوام داخل اسلایدر چند دکمه بزارم که کاربر وقتی روش کلیک میکنه با کانتکت های جدید روبرو بشه ... مشکلم اینجاست که بارگذاری یک اسکریپت در این اسکیریپت باعث به هم ریختگی و تداخل css ها میشه ... لطفا کد زیر رو تست کنید و اگه ممکنه مثالی در این باره بهش اضافه کنید .. با تشکر فراوان
کد :


<script type="text/javascript" src="jquery.js"></script><script type="text/javascript">
$(document).ready(function(){
$(".flip").click(function(){
$(".panel").slideToggle("slow");
});
});

function FP_preloadImgs() {//v1.0
var d=document,a=arguments; if(!d.FP_imgs) d.FP_imgs=new Array();
for(var i=0; i<a.length; i++) { d.FP_imgs[i]=new Image; d.FP_imgs[i].src=a[i]; }
}

function FP_swapImg() {//v1.0
var doc=document,args=arguments,elm,n; doc.$imgSwaps=new Array(); for(n=2; n<args.length;
n+=2) { elm=FP_getObjectByID(args[n]); if(elm) { doc.$imgSwaps[doc.$imgSwaps.length]=elm;
elm.$src=elm.src; elm.src=args[n+1]; } }
}

function FP_getObjectByID(id,o) {//v1.0
var c,el,els,f,m,n; if(!o)o=document; if(o.getElementById) el=o.getElementById(id);
else if(o.layers) c=o.layers; else if(o.all) el=o.all[id]; if(el) return el;
if(o.id==id || o.name==id) return o; if(o.childNodes) c=o.childNodes; if(c)
for(n=0; n<c.length; n++) { el=FP_getObjectByID(id,c[n]); if(el) return el; }
f=o.forms; if(f) for(n=0; n<f.length; n++) { els=f[n].elements;
for(m=0; m<els.length; m++){ el=FP_getObjectByID(id,els[n]); if(el) return el; } }
return null;
}
</script>
<p><style type="text/css">
div.panel,p.flip
{
background-position: 0% 0%; margin:0px; padding:5px; text-align:center;
border:1px solid C#‎3C3C3;; background-image:none; background-repeat:no-repeat; background-attachment:scroll
}
div.panel
{
height:120px;
display:none;
}</style></p>
<p class="flip">اینجا را کلیک کنید</p>
<div class="panel">
<div align="right">
<div align="right">
<table id="table2" height="102" cellspacing="0" cellpadding="0" width="733" border="1" style="border-top-width: 0px; border-left-width: 0px; border-bottom-width: 0px; border-right-width: 0px">
<tbody>
<tr>
<td width="18" height="34" style="border-right: medium none; border-top: medium none; border-left: medium none; border-bottom: medium none">
<p align="center"><img height="18" alt="" width="18" border="0" src="/CMSfiles/Image/check.png" /></p>
</td>
<td width="384" height="34" style="border-right: medium none; border-top: medium none; border-left: medium none; border-bottom: medium none">
<p align="right">متن 3</td>
<td width="317" height="34" style="border-right: medium none; border-top: medium none; border-left: medium none; border-bottom: medium none">
<p align="center"><img id="img1" height="24" alt="ویترین محصولات" width="120" align="left" border="0" fp-title="ویترین محصولات" fp-style="fp-btn: Embossed Capsule 1; fp-justify-vert: 0" onmouseup="FP_swapImg(0,0,/*id*/'img1',/*url*/'CMSfiles/Image/button3.png')" onmousedown="FP_swapImg(1,0,/*id*/'img1',/*url*/'button4.jpg')" onmouseout="FP_swapImg(0,0,/*id*/'img1',/*url*/'CMSfiles/Image/button2.png')" onmouseover="FP_swapImg(1,0,/*id*/'img1',/*url*/'CMSfiles/Image/button3.png')" src="/CMSfiles/Image/button2.png" /></p>
</td>
</tr>
<tr>
<td width="18" height="34" style="border-right: medium none; border-top: medium none; border-left: medium none; border-bottom: medium none">
<p align="center"><img height="18" alt="" width="18" border="0" src="/CMSfiles/Image/check.png" /></p>
</td>
<td width="384" height="34" style="border-right: medium none; border-top: medium none; border-left: medium none; border-bottom: medium none">
<p align="right">متن 2</td>
<td width="317" height="34" style="border-right: medium none; border-top: medium none; border-left: medium none; border-bottom: medium none">
<p align="center"><img id="img2" height="24" alt="پیشنهادات ویژه" width="120" align="left" border="0" fp-title="پیشنهادات ویژه" fp-style="fp-btn: Embossed Capsule 2; fp-justify-vert: 0" onmouseup="FP_swapImg(0,0,/*id*/'img2',/*url*/'CMSfiles/Image/buttonC.png')" onmousedown="FP_swapImg(1,0,/*id*/'img2',/*url*/'buttonD.jpg')" onmouseout="FP_swapImg(0,0,/*id*/'img2',/*url*/'CMSfiles/Image/buttonB.png')" onmouseover="FP_swapImg(1,0,/*id*/'img2',/*url*/'CMSfiles/Image/buttonC.png')" src="/CMSfiles/Image/buttonB.png" /></p>
</td>
</tr>
<tr>
<td width="18" height="34" style="border-right: medium none; border-top: medium none; border-left: medium none; border-bottom: medium none">
<p align="center"><img height="18" alt="" width="18" border="0" src="/CMSfiles/Image/check.png" /></p>
</td>
<td width="384" height="34" style="border-right: medium none; border-top: medium none; border-left: medium none; border-bottom: medium none">
<p align="right">متن 1</td>
<td width="317" height="34" style="border-right: medium none; border-top: medium none; border-left: medium none; border-bottom: medium none">
<p align="center"><img id="img3" height="24" alt="سوالات متداول" width="120" align="left" border="0" fp-title="سوالات متداول" fp-style="fp-btn: Embossed Capsule 3; fp-justify-vert: 0" onmouseup="FP_swapImg(0,0,/*id*/'img3',/*url*/'CMSfiles/Image/buttonF.png')" onmousedown="FP_swapImg(1,0,/*id*/'img3',/*url*/'button10.jpg')" onmouseout="FP_swapImg(0,0,/*id*/'img3',/*url*/'CMSfiles/Image/buttonE.png')" onmouseover="FP_swapImg(1,0,/*id*/'img3',/*url*/'CMSfiles/Image/buttonF.png')" src="/CMSfiles/Image/buttonE.png" /></p>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div>
<p>&nbsp;</p>
</div>