تعویض Background

M_Alireza

M_Alireza

Member
با سلام
ميخواستم يک دکمه درست کنم که وقتي موس بر روي متن قرار ميگيره تصوير Background عوض بشه
فکر کنم با CSS بشه - ممنون ميشم راهنمايي کنيد - در ضمن اينکه مي خوام فقط متن بذارم نه عکسي که داخلش متن نوشته شده باشه و به صورت عکس باشه!

اساتيد کمک
 
echessdesign

echessdesign

مدیر انجمن طراحی وب
درود بر شما
به نظرت، سوالت رو پیچیده نکردی؟
HTML: 
<style type="text/css">
a:link, a:visited {
display:block;
width:300px;
padding:2px 4px;
background:red url('echess.jpg');
margin:0;
font:normal 9px verdana;
color:#fff;
}
a:hover {
background: pink url('echess2.jpg') ;
color:#000;
}
</style>
 
آخرین ویرایش:
M_Alireza

M_Alireza

Member
با عرض شرمندگی میشه بیشتر توضیح بدین ؟
این کد باید کجا استفاده بشه ؟
 
آخرین ویرایش:
echessdesign

echessdesign

مدیر انجمن طراحی وب
درور بر شما
در انجمن مجید انلاین به هر تعداد که مایل باشید می توانید سوال بفرمایید.
این کد را باید بین تگ های head قرار دهید
 
B

bazyan1350

Member
echessdesign گفت:
درود بر شما
به نظرت، سوالت رو پیچیده نکردی؟
HTML: 
<style type="text/css">
a:link, a:visited {
display:block;
width:300px;
padding:2px 4px;
background:red url('echess.jpg');
margin:0;
font:normal 9px verdana;
color:#fff;
}
a:hover {
background: pink url('echess2.jpg') ;
color:#000;
}
</style>
کلیک کنید تا باز شود...

سلام
کاملا درسته اما مشکل کوچکی که هست دو بارتصویر لود میشه میتوانیم هر دو تصویر را یکی کنیم و در هنگامی که ماوس روس کلید هست تصویر را بکشیم بالا که تصویر زیری جایگزین شود در این حالت فقط تصویر یکبار لود میشه !
 
echessdesign

echessdesign

مدیر انجمن طراحی وب
درود بر شما
دوست عزیز
در a:link, a:visited عکسی در پس زمینه لینک شما لود می شود.
در a:hover زمانی که موس بر روی لینک میرود، عکس دومی لود میشود.
 
B

bazyan1350

Member
echessdesign گفت:
درود بر شما
دوست عزیز
در a:link, a:visited عکسی در پس زمینه لینک شما لود می شود.
در a:hover زمانی که موس بر روی لینک میرود، عکس دومی لود میشود.
کلیک کنید تا باز شود...

سلام
دوست عزیز نظر من هم همینه که دو تصویر لود میشه . راهی که من دارم اینه که فرض کنید ما عرض هر دو تصویرمان 30 باشد حال هر دو تصویر را در یک تصویر با عرض 60 قرار میدهیم و در حالت اول ما تصویر را با عرض 30 باز میکنیم در قسمت a:hover دیگه لازم نیست دوباره عکس دانلود کنیم بلکه همان عکس را 30 پیکسل به بالا میکشیم تا تصویر دوم نشان داده شود در اینحالت فقط یکبار تصویر لود میشه
اگر منظورم را نفهمیدید میتوان کد css را بذارم .
 
echessdesign

echessdesign

مدیر انجمن طراحی وب
درود بر شما
بدین شکل می فرمایید:
HTML: 
a:link, a:visited {
background: url('echess.jpg') 0 -30px norepeat
text-decoration:none;
width:100px;
height:30px;
overflow:hidden;
display:block;
}
a:hover {
background: url('echess.jpg') 0 0 norepeat;
 
آخرین ویرایش:
B

bazyan1350

Member
سلام
فایل index.html را لطفا مطالعه نمائید .
 

پیوست ها

  • Nieuwe map (2).rar
    2.9 کیلوبایت · بازدیدها: 5
echessdesign

echessdesign

مدیر انجمن طراحی وب
درود بر شما
دوست عزیز، شما باید height رو کم تر بگیرید زیرا در FF و OP عکس به درستی نمایش داده نمیشوند
 
M_Alireza

M_Alireza

Member
با سلام

متاسفانه مشکل من هنوز حل نشده
براي اينکه راحت تر سوالم رو توضيح بدم فايل رو Attach‌کردم

من ميخوام که وقتي موس بر روي نوشته هايي مثل Home‌ و ... رفت عکس بک گروند همان خانه جدول که به نام (nav_01.jpg) هست با فايلي به نام (nav_02.jpg) عوض شود.

از اينکه وقتتون رو گرفتم خيلي شرمنده
خيلي ممنون از راهنمائي شما اساتيد محترم
موفق و پيروز باشيد
 

پیوست ها

  • test.zip
    1.7 کیلوبایت · بازدیدها: 5
echessdesign

echessdesign

مدیر انجمن طراحی وب
درود بر شما
HTML: 
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
.echessdesign, .echessdesign2{
	text-decoration:none;
	color:#000;
	background:url('nav_01.jpg') no-repeat;
}
.echessdesign2 {
	background:url('nav_02.jpg') no-repeat;
}
</style>
</head>

<body>
<div align="center">
  <table width="115" border="0">
    <tr>
      <td background="nav_01.jpg" align="center" class="echessdesign" onmouseover="this.className='echessdesign2'" onmouseout="this.className='echessdesign'">Home</td>
    </tr>
    <tr>
      <td background="nav_01.jpg" align="center" class="echessdesign" onmouseover="this.className='echessdesign2'" onmouseout="this.className='echessdesign'">About</td>
    </tr>
    <tr>
      <td background="nav_01.jpg" align="center" class="echessdesign" onmouseover="this.className='echessdesign2'" onmouseout="this.className='echessdesign'">News</td>
    </tr>
    <tr>
      <td background="nav_01.jpg" align="center" class="echessdesign" onmouseover="this.className='echessdesign2'" onmouseout="this.className='echessdesign'">Contact</td>
    </tr>
  </table>
</div>
</body>
</html>
 
M_Alireza

M_Alireza

Member
سلام

واقعا زحمت کشیدین -- امیدوارم بتونم جبران کنم

البته یه اشکال داره اونم اینکه من میخواستم وقتی کرسر موس بر روی متن اومد این اتفاق بیفته -- الان وقتی موس روی کل خانه جدول میره عکس عوض میشه !

ممنون و متشکر از شما
 
B

bazyan1350

Member
سلام
اینهم یه نمونه دیگه ش
کد: 
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<style type="text/css">
	a:link, a:visited {
	height:24px;
	width:115px;
	display:block;
	padding:2px 4px;
	background:red url('nav_01.jpg');
	margin:0;
	font:normal 12px verdana;
	text-decoration: none;
	color:#000;
	}
	a:hover {
	background:red url('nav_02.jpg');
	color:#000;
}
</style>
</head>

<body>
<div align="center">
  <table width="115" border="0">
    <tr>
      <td align="center" ><a href="http://www.yahoo.com">Visit Yahoo!</a></td>
    </tr>
    <tr>
      <td align="center"><a href="http://www.yahoo.com">Visit Yahoo!</a></td>
    </tr>
    <tr>
      <td align="center"><a href="http://www.yahoo.com">Visit Yahoo!</a></td>
    </tr>
    <tr>
      <td align="center"><a href="http://www.yahoo.com">Visit Yahoo!</a></td>
    </tr>
  </table>
</div>
</body>
</html>
 
echessdesign

echessdesign

مدیر انجمن طراحی وب
درود بر شما
با توجه به ابنکه متن های داخل جداول لینک باشند:
HTML: 
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
a:link, a:visited{
	text-decoration:none;
	color:#000;
	background:url('nav_01.jpg') no-repeat;
	display:block;
}
a:hover {
	background:url('nav_02.jpg') no-repeat;
}
</style>
</head>

<body>
<div align="center">
  <table width="115" border="0">
    <tr>
      <td background="nav_01.jpg" align="center"><a href="">Home</a></td>
    </tr>
    <tr>
      <td background="nav_01.jpg" align="center"><a href="">About</a></td>
    </tr>
    <tr>
      <td background="nav_01.jpg" align="center"><a href="">News</a></td>
    </tr>
    <tr>
      <td background="nav_01.jpg" align="center"><a href="">Contact</a></td>
    </tr>
  </table>
</div>
</body>
</html>
 
B

bazyan1350

Member
درود بر شما
با توجه به ابنکه متن های داخل جداول لینک باشند:
کلیک کنید تا باز شود...

سلام
دوست عزیز شما بقیه جمله تان را ننوشتید با توجه به ابنکه متن های داخل جداول لینک باشند: چی؟
اگر لینک متن داخل جدول باشد با قرار گرفتن ماوس روی نوشته شکل عوض میشه یا اینکه اگر خارج جدول باشد؟
 
echessdesign

echessdesign

مدیر انجمن طراحی وب
ببین دوست من، علاوه بر راهنمایی که میشی، برای حل مشکل باید یه تکونی هم به خودت بدی!
شما می تونید کد ر داخل صفحه قرار بدید و امتحان کنید که ایا برای لینک های داخل جدول چنین اتفاقی میفته یا خارج از جدول...
 
M_Alireza

M_Alireza

Member
echessdesign گفت:
درود بر شما
با توجه به ابنکه متن های داخل جداول لینک باشند:
HTML: 
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
a:link, a:visited{
	text-decoration:none;
	color:#000;
	background:url('nav_01.jpg') no-repeat;
	display:block;
}
a:hover {
	background:url('nav_02.jpg') no-repeat;
}
</style>
</head>

<body>
<div align="center">
  <table width="115" border="0">
    <tr>
      <td background="nav_01.jpg" align="center"><a href="">Home</a></td>
    </tr>
    <tr>
      <td background="nav_01.jpg" align="center"><a href="">About</a></td>
    </tr>
    <tr>
      <td background="nav_01.jpg" align="center"><a href="">News</a></td>
    </tr>
    <tr>
      <td background="nav_01.jpg" align="center"><a href="">Contact</a></td>
    </tr>
  </table>
</div>
</body>
</html>
کلیک کنید تا باز شود...


سلام
متاسفانه وقتی این کد رو میزارم روی تمامی لینکهای صفحه تاثیر دارد - یعنی وقتی با موس روی هر لینکی میرم بک گروند میاره براش !

در رابطه با اون کد اولی که نوشتید وقتی به اون متن لینک میدم استایلش به هم میخوره !

لطقا کمک
 
B

bazyan1350

Member
M_Alireza گفت:
سلام
متاسفانه وقتی این کد رو میزارم روی تمامی لینکهای صفحه تاثیر دارد - یعنی وقتی با موس روی هر لینکی میرم بک گروند میاره براش !

در رابطه با اون کد اولی که نوشتید وقتی به اون متن لینک میدم استایلش به هم میخوره !

لطقا کمک
کلیک کنید تا باز شود...

سلام
دوست عزیز مشخصه که روی همه لینکها تاثیر داره . برای اینکه تاثیر فقط روی لینک خاصی باشه باید برای همان لینک از یک کلاس که فقط به همان لینک مورد نظر لینک شده باشه استفاده کنی
 
برای ارسال پاسخ شما باید وارد سیستم شوید.

آخرین مطالب مجیدآنلاین

جدیدترین ارسال ها

بالا