درخواست Tab

Printable View

15-11-2008, 23:26
oxford2008

درخواست Tab

دوستان عزیزم سلام

من یه سری tab میخوام دقیقا مثل شکل زیر (البته بدون عکس فولدر و کامپیوتر و...). درضمن همونطور که میبینید میخوام یه طوری باشه که هر وقت ماوس روی هرکدوم میره highlight بشه (مثل شکل که tab دومی highlight شده). اگه بشه یه صدای تیک (مثل این صدای پایین) هم بده که دیگه واقعا عالی میشه.

کد:

http://tinypic.com/player.php?v=11gkj0z&s=4

لطفا اصلا فلش نباشه و یه چیزی باشه که من بتونم با فرانت پیچ ادیتش کنم.

از اینکه درخواست منو خوندید واقعا ممنونم . امیدوارم کسی بتونه کمکم کنه.

مرسی
16-11-2008, 00:19
David.Jn

ميتونيد از دو تا عكس استفاده كنيد
به اين صورت كه وقتي موس رفت روي اون ناحيه بك گراند اون يdiv عوض بشه
اينكار رو راحت ميتونيد هم با css انجام بديد هم javascript .

ولي ميشه با javascript ترفند بهتري زد يعني از عكس دومي استفاده نكنيد
واسه اون ببينيم بچه ها چي ميگن.
16-11-2008, 01:17
oxford2008

ممنون از جوابتون. من java که اصلا کلا عربم. حالا اگه کسی راهنمایی کنه خوشحال میشم.

اما دروهله اول میخوام بدونم خود tab ها رو با این شکلی که بالا گذاشتم اصلا چه طوری میشه طراحی کرد؟ اگه یکی از بچه ها یه زحمت بکشه اینا رو واسم طراحی کنه یه دنیا ممنون میشم.
16-11-2008, 08:43
as13851365

ببینید شما اگر اون عکس رو که گذاشتید از یک سایتی چیزی برداشتید بهتر بود آدرس اون سایت رو می زاشتید تا دوستان کد رو از صفحه برات دربیارن

ولی اگر نه یعنی می خواهید خودتان یه همچین صفحه ای درست کنید روش کار رو جناب زیباترین نام گفتن

این هم یک نمونه : ( هر چند مشکلات زیادی داره ولی برای شروع بد نیست)
کدی رو که در صفحه قرار دادم رو با یک نام با پسوند html ذخیره کن دوتا عکس با نام های 1 و 2 هر دو از نوع jpg رو کنار برنامه قرار بده بعد صفحه رو در مرورگر ببین
[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-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style>
td {
height:40px;
text-align:center;
}
.im {
float:right;
width:40px;
height:35px;
}
.d1 {
float:left;
}
</style>
</head>

<body>
<script type="text/javascript" language="javascript">
function a1(s,i)
{
if(i==1)s.background='1.jpg';
else s.background='2.jpg';
}
</script>
<table width="200" border="1">
<tr>
<td background="2.jpg" onmouseover="a1(this,1)" onmouseout="a1(this,0)"><div class="d1">sssssssss</div><img src="" class="im" /></td>
</tr>
<tr>
<td background="2.jpg" onmouseover="a1(this,1)" onmouseout="a1(this,0)"> </td>
</tr>
<tr>
<td background="2.jpg" onmouseover="a1(this,1)" onmouseout="a1(this,0)"> </td>
</tr>
<tr>
<td background="2.jpg" onmouseover="a1(this,1)" onmouseout="a1(this,0)"> </td>
</tr>
<tr>
<td background="2.jpg" onmouseover="a1(this,1)" onmouseout="a1(this,0)"> </td>
</tr>
</table>

</body>
</html>
[/HTML]

مشکل من بیشتر مربوط به اون عکس های بالایی می شه ( کامپیوتر و پوشه و ... ) که روی عنصر دیگری قرار داره اگه یکی از دوستان در این باره کمکی بکنه ممنونش می شم
16-11-2008, 10:15
oxford2008

خیلی خیلی ممنون از زحمتتون. ولی راستش همونطور که بالا گفتم فکر نمیکنم گذاشتن فایل و عکس زیاد جالب بشه واسه همینم خیلی عالی میشه اگه کسی بتونه بهم کد همون عکسی که گذاشتمو بده البته بدون ( کامپیوتر و پوشه و ... ) .

راستش این عکس مربوطه به سایت ویستا. اون اوایل که اومده بود. البته الان دیگه نیست واسه همینم ازش آدرسی نداشتم که بزارم. ولی کد صفحشو میزارم (هنوز کار میکنه) و امیدوارم که یه نفر بتونه واسم کد این tab ها رو درآره.

مرسی

[html]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<HTML><HEAD><TITLE>Windows Vista Home Page</TITLE>
<META http-equiv=Content-Type content="text/html; charset=utf-8">
<META content=_windowsvista_ name=WT.sp>
<META
content="Windows Vista brings clarity to your world, so you can more safely and easily accomplish everyday tasks and instantly find what you want on your PC. Explore entertainment, such as TV and music, on your Windows Vista-based PC like never before."
name=description>
<META content="Windows Vista, Vista, Windows, PC, computer" name=keywords>
<SCRIPT language=javascript
src="http://127.0.0.1:1025/js.cgi?pca&r=28015"></SCRIPT>
<SCRIPT src="http://www.microsoft.com/library/svy/broker.js"
type=text/javascript></SCRIPT>
<SCRIPT src="http://www.microsoft.com/windowsvista/includes/preload.js"
type=text/javascript></SCRIPT>
<LINK href="http://www.microsoft.com/windowsvista/includes/wvhp.css"
type=text/css rel=stylesheet><LINK title="Windows Vista"
href="/windowsvista/rss.xml" type=application/rss+xml rel=alternate>
<META content="MSHTML 6.00.5730.11" name=GENERATOR></HEAD>
<BODY>
<DIV id=hpbody style="Z-INDEX: 12; PADDING-TOP: 3px; POSITION: absolute">
<DIV id=msviMasthead>
<P><A href="http://www.microsoft.com/">Home</A> | <A
href="http://go.microsoft.com/?linkid=4412891">Worldwide</A></P></DIV>
<DIV id=msviWinHeader>
<FORM id=searchform
action=http://www.microsoft.com/library/toolbar/3.0/search.aspx>
<DIV><LABEL for=searchBox>Search Microsoft.com for:</LABEL> <INPUT id=hidden1
type=hidden value=en-us name=View> <INPUT id=hidden2 type=hidden
value=iso-8859-1 name=charset> <INPUT id=searchBox maxLength=255 name=qu> <INPUT id=goButton type=submit value=Go name=goButton> </DIV></FORM></DIV></DIV>
<DIV id=wvhpA><IMG id=homeLogo height=66 alt="Windows Vista Logo"
src="http://www.microsoft.com/library/media/1033/windowsvista/images/wv_home_logo_wht.png"
width=330 border=0> </DIV>
<DIV id=forTopMenu></DIV>
<DIV id=menuTypeA><A title="The Experience"
href="http://www.microsoft.com/windowsvista/experiences/default.mspx">The
Experience</A></DIV>
<DIV id=menuTypeB><A title="The Features"
href="http://www.microsoft.com/windowsvista/features/default.mspx">The
Features</A></DIV>
<DIV id=menuTypeC><A title="The Community"
href="http://www.microsoft.com/windowsvista/community/default.mspx">The
Community</A></DIV>
<DIV id=menuTypeD><A title="Get Ready"
href="http://www.microsoft.com/windowsvista/getready/">Get Ready</A></DIV>
<DIV id=infoFor></DIV>
<DIV id=menuTypeE>
<P>Information For</P></DIV>
<DIV id=menuTypeF><A class=subMenu title="Small Businesses"
href="http://www.microsoft.com/smallbusiness/products/windows-vista/detail.mspx">Small
Businesses</A></DIV>
<DIV id=menuTypeG><A class=subMenu title=Businesses
href="http://www.microsoft.com/windowsvista/businesses/default.mspx">Businesses</A></DIV>
<DIV id=menuTypeH><A class=subMenu title=Developers
href="http://msdn.microsoft.com/windowsvista/">Developers</A></DIV>
<DIV id=menuTypeI><A class=subMenu title="IT Professionals"
href="http://www.microsoft.com/technet/windowsvista/default.mspx">IT
Professionals</A></DIV>
<DIV id=menuTypeJ><A class=subMenu title="Media Relations"
href="http://www.microsoft.com/presspass/presskits/windowsvista/default.mspx">Media
Relations</A></DIV>
<DIV id=menuTypeK><A class=subMenu title=Partners
href="http://www.microsoft.com/windowsvista/partners/">Partners</A></DIV>
<DIV id=menuTypeL><IMG id=homePearl
style="BORDER-TOP-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; BORDER-RIGHT-WIDTH: 0px"
height=133 alt="Windows Vista"
src="http://www.microsoft.com/library/media/1033/windowsvista/images/wv_home_nav_pearl.png"
width=90></DIV>
<DIV id=wvhpContent>
<DIV class=contentBlock style="CURSOR: default">
<DIV
style="PADDING-RIGHT: 0px; PADDING-LEFT: 0px; Z-INDEX: 1; PADDING-BOTTOM: 0px; MARGIN: 0px 0px -21px; PADDING-TOP: 0px; TEXT-DECORATION: none"><IMG
id=GreatExperience height=60
alt="Get ready for a great Windows Vista experience"
src="http://www.microsoft.com/library/media/1033/windowsvista/images/Headline_GreatExperience.png"
width=324 border=0> </DIV></DIV>
<DIV class=contentBlock style="CURSOR: default">
<P class=contentBlock style="MARGIN-TOP: 18px">Wondering if you should buy a new
PC this holiday or wait for Windows Vista (which will be broadly available
January 30, 2007)? We can tell you: The time to buy is now! Here's how to feel
confident that the PC you buy will be ready for the edition of Windows Vista you
want:</P>
<OL>
<LI>Choose the <A
href="http://www.microsoft.com/windowsvista/getready/editions/default.mspx">edition
of Windows Vista</A> that's right for you.
<LI>Look for the <A
href="http://www.microsoft.com/windowsvista/getready/capable.mspx">Windows
Vista Capable or Premium Ready PC</A> logo when you shop.
<LI>Make sure the PC you choose is eligible for an <A
href="http://www.microsoft.com/windowsvista/getready/expressupgrade.mspx">Express
Upgrade</A> to Windows Vista. </LI></OL></DIV>
<DIV class=contentBlock>
<DIV
style="PADDING-RIGHT: 0px; PADDING-LEFT: 0px; Z-INDEX: 1; PADDING-BOTTOM: 0px; MARGIN: 0px 0px -21px; PADDING-TOP: 0px; TEXT-DECORATION: none"><A
onclick=javascript:trackInfo(this);
href="http://www.microsoft.com/windowsvista/businesses/default.mspx"
LinkArea="Main_Content" LinkID="Headline1"><IMG id=VistaforBiz height=30
alt="Windows Vista for business"
src="http://www.microsoft.com/library/media/1033/windowsvista/images/Headline_VistaforBiz.png"
width=342 border=0></A> </DIV></DIV>
<DIV class=contentBlock>
<P class=contentBlock style="MARGIN-TOP: 18px"><A
onclick=javascript:trackInfo(this);
href="http://www.microsoft.com/windowsvista/businesses/default.mspx"
LinkArea="Main_Content" LinkID="Headline1">Windows Vista introduces dramatic
improvements for business. Help people do their best work, collaborate, and
connect to resources—<BR>regardless of location. See why it's better, and how to
get the right edition of Windows Vista for your organization. <IMG
class=HomeArrowPNG
style="BORDER-TOP-WIDTH: 0px; MARGIN-TOP: 4px; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; BORDER-RIGHT-WIDTH: 0px"
height=9 alt=""
src="http://www.microsoft.com/library/media/1033/windowsvista/images/VistaHome_arrow.png"
width=12></A></P></DIV>
<P></P>
<P></P>
<DIV style="HEIGHT: 75px"></DIV></DIV>
<DIV id=msviFooter>
<HR>
<UL id=msviLocalFooter>
<LI><A class=first href="http://go.microsoft.com/?linkid=317027">Manage Your
Profile</A>
<LI><A href="http://go.microsoft.com/?linkid=2028372">Contact Us</A>
<LI><A href="http://www.microsoft.com/windowsvista/rss.xml">RSS: New Windows
Vista Content</A> </LI></UL>
<P id=msviGlobalFooter>©2006 Microsoft Corporation. All rights reserved. <A
class=first href="http://www.microsoft.com/info/cpyright.htm">Terms of Use</A>
<A
href="http://www.microsoft.com/library/toolbar/3.0/trademarks/en-us.mspx">Trademarks</A>
<A href="http://www.microsoft.com/info/privacy.htm">Privacy Statement</A>
</P><IMG height=62 alt=Microsoft
src="http://www.microsoft.com/library/media/1033/windowsvista/images/wv_footerlogo_white.gif"
width=170 border=0> </DIV>
<SCRIPT type=text/javascript>
var gTrackEvents=1;
var gDomain="m.webtrends.com";
var gDcsId="dcsjwb9vb00000c932fd0rjc7_5p3t";
var gFpc="WT_FPC";if(document.cookie.indexOf(gFpc+"=") ==-1){document.write("<SCRIPT TYPE='text/javascript' SRC='"+"http"+(window.location.protocol.indexOf('h ttps:')==0?'s':'')+"://"+gDomain+"/"+gDcsId+"/wtid.js"+"'><\/SCR"+"IPT>");}
</SCRIPT>
<SCRIPT src="http://www.microsoft.com/library/mnp/2/wt/js/wt.js"
type=text/javascript></SCRIPT>
<NOSCRIPT><IMG id=DCSIMG height=1 alt=""
src="http://m.webtrends.com/dcsjwb9vb00000c932fd0rjc7_5p3t/njs.gif?dcsuri=/nojavascript&WT.js=No"
width=1 border=0> </NOSCRIPT>
<SCRIPT language=javascript>postamble();</SCRIPT>
</BODY></HTML>
[/html]
16-11-2008, 13:40
as13851365

این شد یه چیزی .

ببینم می تونم کدش رو برات دربیارم .
16-11-2008, 15:06
as13851365

این هم از کد

توی این صفحه ( بهتر بکم توی این کد ) از جدول استفاده نشده است

نحویه کار کلا با عکس و Div و فایل css است

یعنی اون کامپیوتر و پوشه هایی رو که هم می بینید همش یک عکس است و در کل برای هر آیتم دو تا عکس استفاده شده است که یکی در حالت عادی نمایش داده می شه و یکی هم برای موافعی که موس رویش برود

برای این هم از کدی مانند زیر در فایل css استفاده کردن :
[HTML]
#menuTypeA A {
BACKGROUND: url(wv_home_nav_exp_dn.jpg) no-repeat;
LEFT: 30px;
OVERFLOW: hidden;
WIDTH: 185px;
PADDING-TOP: 61px;
POSITION: absolute;
TOP: 156px; HEIGHT:0px;
voice-family: inherit;
}
#menuTypeA A:hover {
BACKGROUND: url(wv_home_nav_exp_up.jpg);
}
[/HTML]

و از کدی مانند زیر برای نمایش عکس ها استفاده کردن :
[HTML]
<DIV id=menuTypeA>
<A title="The Experience" href="http://www.microsoft.com/windowsvista/experiences/default.mspx">The Experience</A></DIV>
[/HTML]

برای من که خیلی جالب بود .

این هم نمونه کد :
[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-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style>
#a1 A{
BACKGROUND: url(wv_home_nav_exp_dn.jpg) no-repeat;LEFT: 31px;OVERFLOW: hidden;WIDTH: 185px;PADDING-TOP: 61px;POSITION: absolute;TOP: 155px; HEIGHT:0px;voice-family: inherit;
}
#a1 A:hover {
BACKGROUND: url(wv_home_nav_exp_up.jpg);
}
#b1 A {
BACKGROUND: url(wv_home_nav_fea_dn.jpg) no-repeat; LEFT: 30px; OVERFLOW: hidden; WIDTH: 185px; PADDING-TOP: 60px; POSITION: absolute; TOP: 217px; HEIGHT: 0px; voice-family: inherit
}
#b1 A:hover {
BACKGROUND: url(wv_home_nav_fea_up.jpg)
}
#c1 A {
BACKGROUND: url(wv_home_nav_com_dn.jpg) no-repeat; LEFT: 30px; OVERFLOW: hidden; WIDTH: 185px; PADDING-TOP: 60px; POSITION: absolute; TOP: 277px; HEIGHT: 0px; voice-family: inherit
}
#c1 A:hover {
BACKGROUND: url(wv_home_nav_com_up.jpg)
}
#d1 A {
BACKGROUND: url(wv_home_nav_get_dn.jpg) no-repeat; LEFT: 30px; OVERFLOW: hidden; WIDTH: 185px; PADDING-TOP: 60px; POSITION: absolute; TOP: 337px; HEIGHT: 0px; voice-family: inherit
}
#d1 A:hover {
BACKGROUND: url(wv_home_nav_get_up.jpg)
}
#infoFor {
BACKGROUND: url(wv_home_nav_infoFor_bg.jpg) no-repeat left top;LEFT: 30px; WIDTH: 185px; POSITION: absolute; TOP: 397px; HEIGHT: 290px;
}
</style>
</head>

<body background="wv_home_bkgnd_photo.jpg" style="background-repeat:no-repeat">
<DIV id=a1><A title="Get Ready" href="http://www.microsoft.com/windowsvista/getready/">Get Ready</A></DIV>
<DIV id=b1><A title="Get Ready" href="http://www.microsoft.com/windowsvista/getready/">Get Ready</A></DIV>
<DIV id=c1><A title="Get Ready" href="http://www.microsoft.com/windowsvista/getready/">Get Ready</A></DIV>
<DIV id=d1><A title="Get Ready" href="http://www.microsoft.com/windowsvista/getready/">Get Ready</A></DIV>
<DIV id=infoFor></DIV>

</body>
</html>
[/HTML]

:40: :40: :40: :40:

این هم یک نمونه ی کامل برای شما که گفته بودید :
اندازه فایل : 85 کیلوبایت
لینک دانلود :

کد:

http://yahook.persiangig.com/motafarege/Windows%20Vista%20Home%20Page_files.rar
16-11-2008, 19:09
oxford2008

آقا دستت درست. خیلی خیلی زحمت کشیدید. واقعا ممنون. برم ببینم چیکار میتونم باهاش کنم.
17-11-2008, 06:41
oxford2008

خب دوستان عزیز با کمک as13851365 عزیز و زحمت ایشون مشکل اول من در این زمینه حل شد. اما همچنان قسمت دوم سوال بنده بی جواب باقی مونده. و اون اینه که اگه من بخوام یه صدای تیک یا یه صدایی مثل اونی که تو پست اول آپلود کردم وقتی روی هر navigator بریم پخش بشه چکار باید بکنم؟
17-11-2008, 12:25
as13851365

به احتمال زیاد باید برای این قسمت ( پخش صدای تیک ... ) باید از جاوااسکریپت استفاده کنی

نمونه کدهایی برای پخش آهنگ با جاوااسکریپت وجود داره که شما می تونید از اونها استفاده کنید

من در این زمینه ( پخش آهنگ و صدا و.... ) هیچی نمی دونم یعنی تا حالا نیازی بهش نداشتم که بخوام ازش استفاده کنم ولی اگر خودتان هم کمی تلاش کنید فکر کنم به نتیجه می رسید

یا لا اقل کد پخش آهنگ رو جستجو کنید و کمی دستکاریش کنید اگه به نتیجه ی دلخواه نرسیدید مطرح کنید