دوستان من یک کد دیگه گذاشتم داخل سایت !!! درست شد مشکل قبلیش اما یک مشکل دیگه دارم اینکه وقتی عکس ها با کد جاوا اسلاید شو میشن توی اندازه ای که برای قالبش طراحی کردم کشیده میشن !! نمیشه کاری کرد که بیاد مثل یک ماسک اون div رو بندازه روی عکس ؟ یعنی بیاد یک تیکه از عکس رو نشون بده !!! نه بیاد کل عکسو بکشه و نشون بده !!!ممنون
عکس وضعیت فعلی سایتم رو و کد هاشو میگذارم امیدوارم کمکم کنید !!!
این فایل css
.fl{ float:left;}
.slidepart{ width:874px; height:200px; overflow:hidden; position:relative;}
.slidepart img {position:absolute;
top: 0px;
left: 0px;
width: 874;
height: 200px;
}
.sl_paginationpart{ background:url(cssimages/slide_paginationbg.png) no-repeat left; width:auto; height:15px; display:block; position:absolute; right:0px; bottom:0px; padding:6px;}
ul.slpagination{ margin:0px; padding:0px; list-style:none; font-family:arial; }
ul.slpagination li{ margin:0px; padding:0px; list-style:none; float:left; }
ul.slpagination li a.prev{background:url(cssimages/sl_prev.png) no-repeat; width:14px; height:15px; display:block; margin-top: 2px;}
ul.slpagination li a.next{background:url(cssimages/sl_next.png) no-repeat; width:14px; height:15px; display:block; margin-top: 2px; }
ul.slpagination li a.number{background:url(cssimages/sl_nobg.png) no-repeat; width:18px; height:18px ; display:block; text-align:center; margin:0px 3px; font-size:12px; font-weight:bold; color:#006aa6; text-decoration:none; }
ul.slpagination li a.select{background:url(cssimages/select_sl.png) no-repeat;color:#fff; }
اینم کد اصلی:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="Styles_Default" %>
<!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 runat="server">
<title></title>
<script src="../jquery-1.4.2.min.js"></script>
<link href="../style.css" rel="stylesheet" type="text/css" />
<style type="text/css">
body {font:10pt arial; }
.main { text-align:center; font:12pt Arial; width:100%; height:auto; }
.code {border:1px dashed #cecece; background-color:#F7F7F7; padding:5px;}
.contents { background-color:#EDF4F8; padding:10px; border:2px dashed #C2DAE7; }
.contents p span { display:block;float:left; margin-left:0px; width:110px; color:gray; font-weight:bold;}
.contents p select {float:left; margin-left:90px;}
.contents p {clear:both;overflow:hidden;}
</style>
</head>
<body>
<form id="form1" runat="server">
<br />
<br />
<br />
<br />
<asp:Panel ID="Panel1" runat="server"
style="-webkit-border-radius: 15px;-moz-border-radius: 15px;border-radius: 15px;background-position: bottom; background-image:url('../1680x1050%20(13).jpg'); background-repeat: no-repeat;margin-left:auto; margin-right:auto;margin-top:auto; top: auto; bottom: auto;"
Height="502px" width="900"
>
<center>
<div>
<asp:DropDownList ID="DropDownList1" runat="server"
style="margin-left:10px;margin-right:118px;" AutoPostBack="True">
<asp:ListItem>English</asp:ListItem>
<asp:ListItem>Pesian</asp:ListItem>
</asp:DropDownList>
<asp:Button ID="Button1" runat="server" Text="about"
style="margin-left:20px;margin-right:136px;" Width="57px"/>
<asp:Button ID="Button2" runat="server" Text="gallery"
style="margin-left:20px;margin-right:156px;"/>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<asp:Button ID="Button3" runat="server" Text="search" />
</div>
<br />
<div class="contents" style="width:873px; overflow: hidden; height: 202px; background-color: #000000; hight: ;">
<div id="slidy" class="slidepart fl">
<img src="../1.jpg"><img src="../2.jpg"><img src="../3.jpg"><img src="../4.jpg"><img src="../5.jpg">
<div class="sl_paginationpart">
<ul id="slidya" class="slpagination">
<li><a href="javascript: prevnext(0);" class="prev"></a></li>
<li><a href="javascript: thisisit(0)" class="number select">1</a></li>
<li><a href="javascript: thisisit(1)" class="number ">2</a></li>
<li><a href="javascript: thisisit(2)" class="number ">3</a></li>
<li><a href="javascript: thisisit(3)" class="number ">4</a></li>
<li><a href="javascript: thisisit(4)" class="number ">5</a></li>
<li><a href="javascript: prevnext(1);" class="next"></a></li>
</ul>
</div>
</div>
</div>
<script type="text/javascript">
var slo = null;
var sola = Array();
var prev = 0;
var cur = 1;
var timi = null
$(document).ready(function () {
sol = document.getElementById('slidy').getElementsByTagN ame('img')
var sho = document.getElementById('slidya').getElementsByTag Name('a');
for (var i = 1; i < sho.length - 1; i++) sola.push(sho[i])
for (var i = 1; i < sol.length; i++) sol[i].style.display = 'none';
timi = window.setInterval('doslide()', 3000);
})
function doslide() {
$(sol[prev]).fadeOut(500);
$(sol[cur]).fadeIn(500);
sola[prev].className = 'number'
sola[cur].className = 'number select'
prev = cur++;
if (cur > sol.length - 1) {
cur = 0;
prev = sol.length - 1;
}
}
function prevnext(mode) {
window.clearInterval(timi); timi = null;
if (mode) {
if (cur > sol.length - 1) {
cur = 0;
prev = sol.length - 1;
}
doslide();
}
else {
cur--;
prev--;
if (prev < 0) {
cur = 0;
prev = sol.length - 1;
}
if (cur < 0) {
cur = sol.length - 1;
prev = cur - 1;
}
$(sol[cur]).fadeOut(500);
$(sol[prev]).fadeIn(500);
sola[cur].className = 'number'
sola[prev].className = 'number select'
}
timi = window.setInterval('doslide()', 2000)
}
function thisisit(aiyo) {
cur = aiyo
window.clearInterval(timi); timi = null;
$(sol[cur]).fadeIn(500);
$(sol[prev]).fadeOut(500);
sola[cur].className = 'number select'
sola[prev].className = 'number'
prev = cur
++cur;
if (prev < 0) prev = sol.length - 1;
timi = window.setInterval('doslide()', 2000)
}
</script>
</center>
<div style="height: 278px">
<br />
<br />
<br />
<asp:TextBox ID="TextBox2" runat="server"
style="margin-left:41px; margin-right:38px;margin-bottom:10px;"></asp:TextBox>
<asp:Button ID="Button4" runat="server" Text="browse" />
<br />
<asp:TextBox ID="TextBox3" runat="server"
style="margin-left:41px; margin-right:38px;margin-bottom:10px;"></asp:TextBox>
<br />
<asp:TextBox ID="TextBox4" runat="server"
style="margin-left:41px; margin-right:38px;margin-bottom:10px;"></asp:TextBox>
<br />
<asp:TextBox ID="TextBox5" runat="server"
style="margin-left:41px; margin-right:5px; margin-bottom:10px;"></asp:TextBox>
<asp:Label ID="Label5" runat="server" Text="c4v5455c"
style="margin-left:10px; margin-right:10px;margin-bottom:0px;"
ForeColor="White"></asp:Label>
<br />
<asp:Button ID="Button5" runat="server" Text="sign up"
style="margin-left:66px; margin-right:20px;margin-bottom:10px;" />
<br />
<br />
</div>
</asp:Panel>
</asp:Panel>
</div>
</form>
</body>
</html>