درباره mouse over و عکس ها

abbasjoon

Member
سلام بچه ها. من 1 عکس دارم که کوچک شده دارم نشونش میدم. می خوام کاربر وقتی ماوس رو روی عکس برد عکس در اندازه واقعیش یزرگ بشه. و وقتی ماوس رفت کنار وضعیت به حالت اول برگرده. از چه کدی باید استفاده کنم؟
مرسی
 

echessdesign

مدیر انجمن طراحی وب
درود بر شما
این امر به سادگی با Css امکان پذیر است:
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=utf-8" />
<title>Untitled 1</title>
<style type="text/css">
#imgwrp{
	padding:0; margin:10% auto 0 auto; text-align:left; direction:ltr;
}
#imgwrp li {
	width:100px; height:100px; list-style:none; float:left; margin:5px 11px; background:red;
}
#imgwrp a {
	width:100px; height:100px; display:block; float:left; cursor:default;
}
#imgwrp a img {
	width:100px; height:100px; border:0; float:left; 
}
#imgwrp a:hover {
	position:absolute; width:200px; height:200px; z-index:999;
}
#imgwrp a:hover img {
	width:200px; height:200px; position:absolute; left:-50px; top:-50px; border:1px dotted #f00;
}
</style>
</head>

<body>

<!-- Start Image gallery --><div id="imgwrp">
<ul>
<li><a href="../img/add/ga16.jpg" target="_blank"><img src="../img/add/lga16.jpg" alt="" /></a></li>
<li><a href="../img/add/ga17.jpg" target="_blank"><img src="../img/add/lga17.jpg" alt="" /></a></li>
<li><a href="../img/add/ga18.jpg" target="_blank"><img src="../img/add/lga18.jpg" alt="" /></a></li>
<li><a href="../img/add/ga19.jpg" target="_blank"><img src="../img/add/lga19.jpg" alt="" /></a></li>
<li><a href="../img/add/ga20.jpg" target="_blank"><img src="../img/add/lga20.jpg" alt="" /></a></li>
<li><a href="../img/add/ga21.jpg" target="_blank"><img src="../img/add/lga21.jpg" alt="" /></a></li>
<li><a href="../img/add/ga22.jpg" target="_blank"><img src="../img/add/lga22.jpg" alt="" /></a></li>
<li><a href="../img/add/ga23.jpg" target="_blank"><img src="../img/add/lga23.jpg" alt="" /></a></li>
<li><a href="../img/add/ga24.jpg" target="_blank"><img src="../img/add/lga24.jpg" alt="" /></a></li>
<li><a href="../img/add/ga25.jpg" target="_blank"><img src="../img/add/lga25.jpg" alt="" /></a></li>
<li><a href="../img/add/ga26.jpg" target="_blank"><img src="../img/add/lga26.jpg" alt="" /></a></li>
<li><a href="../img/add/ga27.jpg" target="_blank"><img src="../img/add/lga27.jpg" alt="" /></a></li>

<li><a href="../img/add/ga01.jpg" target="_blank"><img src="../img/add/lga01.jpg" alt="" /></a></li>
<li><a href="../img/add/ga02.jpg" target="_blank"><img src="../img/add/lga02.jpg" alt="" /></a></li>
<li><a href="../img/add/ga03.jpg" target="_blank"><img src="../img/add/lga03.jpg" alt="" /></a></li>
<li><a href="../img/add/ga04.jpg" target="_blank"><img src="../img/add/lga04.jpg" alt="" /></a></li>
<li><a href="../img/add/ga05.jpg" target="_blank"><img src="../img/add/lga05.jpg" alt="" /></a></li>
<li><a href="../img/add/ga06.jpg" target="_blank"><img src="../img/add/lga06.jpg" alt="" /></a></li>
<li><a href="../img/add/ga07.jpg" target="_blank"><img src="../img/add/lga07.jpg" alt="" /></a></li>
<li><a href="../img/add/ga08.jpg" target="_blank"><img src="../img/add/lga08.jpg" alt="" /></a></li>
<li><a href="../img/add/ga09.jpg" target="_blank"><img src="../img/add/lga09.jpg" alt="" /></a></li>
<li><a href="../img/add/ga10.jpg" target="_blank"><img src="../img/add/lga10.jpg" alt="" /></a></li>
<li><a href="../img/add/ga11.jpg" target="_blank"><img src="../img/add/lga11.jpg" alt="" /></a></li>
<li><a href="../img/add/ga12.jpg" target="_blank"><img src="../img/add/lga12.jpg" alt="" /></a></li>
<li><a href="../img/add/ga13.jpg" target="_blank"><img src="../img/add/lga13.jpg" alt="" /></a></li>
<li><a href="../img/add/ga14.jpg" target="_blank"><img src="../img/add/lga14.jpg" alt="" /></a></li>
<li><a href="../img/add/ga15.jpg" target="_blank"><img src="../img/add/lga15.jpg" alt="" /></a></li>
</ul>

<!-- End of Image gallery --></div>

</body>

</html>
نمونه را در این سایت استفاده کردم، سوالی داشتید بفرمایید.
پاینده باشید.
 

teamnet

Member
دوست عزیزم شما وقتی در صفحه اصلی بروی عکس ها می ریم نوشته ایی در پاییئن در کادری ظاهر میشه لطفا راهنمایی کنین به چه صورت کار می کنه ..؟
 

abbasjoon

Member
ممنون. همونی بود که میخواستم. با تشکر
ولی من نمی خوام تو سایتم از هر عکسی دو تا داشته باشم. یم عکس دارم. خودم اون رو به صورت کوچک شده نشون می دم و وقتی کاربر ماوس رو آورد روش عکس بزرگ میشه به اندازه واقعی
یک سوال دیگه . مکان عکس بزرگ رو چه جوری معین کنم. من دلم نمی خواد روی عکس کوچیک بیفته .دوست دارم بالاش عکس بزرگ نمایش داده بشه.
 
آخرین ویرایش:

abbasjoon

Member
بچه ها موقعیتشو پیدا کردم. ولی وقتی تصویر بزرگ در خارج از تصویر کوچک نمایش داده می شه. پرش تصویر به وجود میاد. اینو دیگه چیکار کنم.
 

teamnet

Member
لطفا منظور خود را واضحتر بفرمایید....

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

می خواستم راهنمایی کنین اینکار چطور امکان پذیره
 

bahy_my

Active Member
با کسب اجازه از استاد خودم, آقا حسین گل.
teamnet جان :
HTML:
<script>
function ch_txt(id, text){
document.getElementById(id).innerHtml=text;
}
</script>
<img onmouseover="onmouseover="ch_txt('div1','Axe shomareye yek';" onmouseoout="ch_txt('div1','';";" />
..
.
.
..
HTML:
<div id="div1">

</div>

آقا عباس اگه منظورتو خوب فهمیده باشم باید برای تگی که عکس بزرگ توش قرار داره height و width در نظر بگیری تا پرش نداشته باشی.
البته گفتم اگه منظورتو خوب متوجه شدم باشم !
 

echessdesign

مدیر انجمن طراحی وب
بچه ها موقعیتشو پیدا کردم. ولی وقتی تصویر بزرگ در خارج از تصویر کوچک نمایش داده می شه. پرش تصویر به وجود میاد. اینو دیگه چیکار کنم.

درود بر شما
متشکرم از راهنمایی بهمن جان، شما احتمالا در IE7 سایت رو مشاهده می کنید، اما در مرورگر های دیگر این مشکل به وجود نمیاد.
مثال های بسیار جالب و واضحی در این سایت وجود دارد.
پاینده باشید.
 

teamnet

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

در ضمن سئواله دیگه ایی هم داشتم

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

لطفا دوست من بصورت کلی توضیح دهید به چه صورت امکان داره (توضیح کلی )

جایزه اشم اشتراک Vpn رایگان برای شماست مادالعمر

مرسی منتظرم
 

bahy_my

Active Member
اینم کد کامل.
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=utf-8" />
<title>Untitled Document</title>
<script>
function ch_txt(id, text){
document.getElementById(id).innerHtml=text;
}
</script>

</head>

<body>
<table width="200" border="00" cellspacing="1" cellpadding="2">
  <tr>
    <td align="center"><img src="file:///E|/Server/EasyPHP " width="150" height="125" onmouseover="ch_txt('div1','Axe shomareye 1';)" onmouseoout="ch_txt('div1','';)"></td>
    <td align="center"><img src="file:///E|/Server/EasyPHP " width="150" height="125" onmouseover="ch_txt('div1','Axe shomareye 2';)" onmouseoout="ch_txt('div1','';)"></td>
    <td align="center"><img src="file:///E|/Server/EasyPHP " width="150" height="125" onmouseover="ch_txt('div1','Axe shomareye 3';)" onmouseoout="ch_txt('div1','';)"  /></td>
  </tr>
  <tr>
    <td align="center"><img src="file:///E|/Server/EasyPHP " width="150" height="125" onmouseover="ch_txt('div1','Axe shomareye 4';)" onmouseoout="ch_txt('div1','';)"></td>
    <td align="center"><img src="file:///E|/Server/EasyPHP " width="150" height="125" onmouseover="ch_txt('div1','Axe shomareye 5';)" onmouseoout="ch_txt('div1','';)"></td>
    <td align="center"><img src="file:///E|/Server/EasyPHP " width="150" height="125" onmouseover="ch_txt('div1','Axe shomareye 6';)" onmouseoout="ch_txt('div1','';)"></td>
  </tr>
  <tr>
    <td colspan="3" align="center" id="tg1">&nbsp;</td>
  </tr>
</table>
</body>
</html>

د مورد سوال دومتون بهتره یه سرچ کنید و یا یک تاپیک جدید ایجاد کنید.
اون جا اگه سعادت باشه در خدمتتون هستم. گرچه اگه سرچ کنی پیدا می کنی.
 

abbasjoon

Member
سلام. من از IE6 استفاده می کنم. ولی بازم پرش تصویر دارم. در ضمن اقای bahy_my منظورمو درست فهمیدین . من برای عکس بزرگ ارتفاع و پهنا تعریف کردم ولی بازم اینجوریه .
اینم کدی که مشخصش می کنه:
PHP:
#imgwrp a:hover img {
	width:600px; height:400px; position:absolute; left:-200px; top:-400px; border:1px dotted #f00;
}
 

bahy_my

Active Member
سلام.
نه عزیزم منظورم این نیست.
اینطوری می گم :
HTML:
<div style="height:600px; width:550px;">

<img>

</div>
ینی تگی که تصویر توش قرار داره.
[لبخند]
 

abbasjoon

Member
نه ندارم. چه طوری ایجاد کنم؟ این کل محتویات Css منه:
PHP:
style type="text/css">
#imgwrp{
	padding:0; margin:5% auto 0 auto; text-align:left; direction:ltr;
}
#imgwrp li {
	width:100px; height:100px; list-style:none; float:left; margin:5px 2px; background:white;
}
#imgwrp a {
	width:100px; height:100px; display:block; float:left; cursor:default;
}
#imgwrp a img {
	width:100px; height:100px; border:0; float:left; 
}
#imgwrp a:hover {
	position:absolute; width:200px; height:200px; z-index:999;
}
#imgwrp a:hover img {
	width:600px; height:400px; position:absolute; left:-200px; top:-400px; border:1px dotted #f00;
}
</style>
 

bahy_my

Active Member
من از css استافاده نمی کنم اگه به چنین چیزی نیاز داشته باشم.
خوب مگه نمی گید که تصویر دوم ایجاد میشه... کجا ایجاد میشه ؟
شما بهتره تگ img خودت رو بذار توی این :
<div style="height:600px; width:600px">
img
</div>
منظورمو متوجه شدید ؟
اگه مشکل حل نشد فایل رو بذارید ببینم کمکی از دستم بر میاد یا نه.
 

abbasjoon

Member
خوب این چیزی که شما می گی خوبه. من میخوام همین کارو بکنم. یعنی وقتی کاربر روی div که اسمش imgwrp # هستش رفت یک div جدید نمایش داده بشه که عکس داخل اونه. پس باید برای imgwrp a:hover img # کدی بنویسیم که تگ div جدید رو نمایش بده . خوب به جای این چی بنویسم:
PHP:
#imgwrp a:hover img { 
   width:600px; height:400px; position:absolute; left:-200px; top:-400px; border:1px dotted #f00;
}
 

abbasjoon

Member
یه چیز دیگه. من دوست ندارم به عکس ارتفاع و پهنا بدم. دوست دارم عکس در اندازه واقعی خودش نمایش داده بشه. این رو چیکار کنم
 

bahy_my

Active Member
خوب من از جاوااسکریپت استفاده می کنم در این حالت.
که سایز خود عکس هم میشه داد بهش.
تو همین حالت هم میشه. اگه می خوای جاوااسکریپت بگو تا کمک کنم. این روزا یه خورده درسامون زیاده ببخشید.
 

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

بالا