درخواست یک کد برای فایل اچ تی ام ال

[jing]

سلام

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

 

[zegersot]

با jqurey میتونی اینو انجام بدی

فک کنم تو سایت اصلیش باشه چون قبلا همون جا دیده بودم

خودمم میگردم اگه پیدا کردم چشم میزارم

موفق باشی

 

[iPersianScript]

.

. سـلام :55:

. بدون خونریزی! با CSS این کار رو انجام بده.. :67:

. مثال بسیار زیبا! و البته کاربردی :26: :

. CSS مورد استفاده ( به دلخواه خود و در حدتوان ویرایش نمائید.. ) :

.size { display:block; float:left; text-decoration:none; border:0; border-right:1px solid #fff; }.size img { display:block; width:60px; height:40px; border:0; cursor:pointer; -webkit-transition-duration: .7s; -moz-transition-duration: .7s; -o-transition-duration: .7s;}.size:hover img { width:480px; height:320px; }

. و HTML تصویر :

. <a class="size"><img src="Image" /></a>

. اگر مشکلی بود بفرمائیـد بلکه بتوانیـم مرتفـع! نمائیـم.. /

. خـوش باشیـد :54:

.

 

[homayon574]

پاسخ دوستان همه گی کامل بود اگر حوصله وارد کردن طول و عرض برای هر عکس نداری میتونی برای خاصیت hover این کدا رو بزنی(در CSS):

width:auto;
height:auto;

موفقو پیروز باشی :53:

 

[jing]

خیلی ممنون

راستش من چون css بلد نیستم درست متوجه نشدم

من فکر میکردم کدی هست که میشه در فایل html گذاشت وکار حودش انجام بده

الان درست متوجه نشدم اگرامکان داره زیر پیش دبستانی یک توضیح بدین که روال این کد از چه قرار است ممنون میشم

 

[mahdiali35]

خیلی ممنونراستش من چون css بلد نیستم درست متوجه نشدم

من فکر میکردم کدی هست که میشه در فایل html گذاشت وکار حودش انجام بده

الان درست متوجه نشدم اگرامکان داره زیر پیش دبستانی یک توضیح بدین که روال این کد از چه قرار است ممنون میشم

درود...با اجازه...

برای فراخوانی فایل css در html این کد رو در ابتدای فایل اصافه کنید...

<STYLE TYPE="text/css">

دستورات css که بالا نوشته شده رو کپی کنید و :

</STYLE>

در نهایت یه نمونه کد html برای این کار...نام عکس رو از image.jpg به نام مورد نظر تغییر بدید...

<a class="size"><img src="image.jpg" /></a>
<STYLE TYPE="text/css">
.size { display:block; float:left; text-decoration:none; border:0; border-right:1px solid #fff; }.size img { display:block; width:60px; height:40px; border:0; cursor:pointer; -webkit-transition-duration: .7s; -moz-transition-duration: .7s; -o-transition-duration: .7s;}.size:hover img { width:480px; height:320px; }
</STYLE>

پیروز و شاد باشید...

 

[iPersianScript]

خیلی ممنونراستش من چون css بلد نیستم درست متوجه نشدم

من فکر میکردم کدی هست که میشه در فایل html گذاشت وکار حودش انجام بده

الان درست متوجه نشدم اگرامکان داره زیر پیش دبستانی یک توضیح بدین که روال این کد از چه قرار است ممنون میشم

.

. سـلام jing عزیز.. :55:

. بنده هم ساده ترین حالت رو در نظر گرفتم وگرنه میشه بسیار زیباتر از این هم نمایش داد! :|:|

. حالا هم اگر که بخوای فقط با اضافه کردن کد این کار انجام بشه، میشه، فقط

. اگه بگی تصاویر تو اون صفحه تو چه تگی قرار دارن راحت تر میتونم بهت کمک کنم.. :-??

. البته بازم یه مثال می زنم بلکه خودت متوجه شدی.. :26: با توجه به مثال قبلی، حالا تصاویر کل صفحه رو در نظر می گیریم :

[COLOR=#2f4f4f][/COLOR][/COLOR][COLOR=#2f4f4f]body img { float:left; display:block; width:60px; height:40px; border:0; cursor:pointer;[/COLOR]
[COLOR=#2f4f4f] -webkit-transition-duration: .7s; -moz-transition-duration: .7s; -o-transition-duration: .7s;[/COLOR]
[COLOR=#2f4f4f]}[/COLOR]

[COLOR=#2f4f4f]body img:hover { width:480px; height:320px; }[/COLOR][COLOR=#2f4f4f][COLOR=#2f4f4f][/COLOR]

. یعنی بدون در نظر گرفتن اینکه تصاویر تو چه تگی قرار دارن.. /

. حالا شما کمی تفکر کن! و سعی خودت رو هم بکن اگه نشد ماشاا.. اینجا بچه ها همیشه برای پاسخگویی آماده باشن!.. :67:

. مـوفق باشیـد :54:

.

 

[jing]

باتشکر از همه دوستان

من کدهای دوست عزیزmahdiali35 را در فایل css وhtmlگذاشتم وتصویر فراخوانی شده ولی چندتا سوال

1-برای هر تصویرباید یک classتعریف بشه؟

2-تصاویر که اضاف می کنم زیر هم یا بصورت ستونی نمایش میده.حتی کدها در تک بادی هم قرار دادم ولی درست نشد...در ضمن من می خوام در ردیف 6تا ودر ستون10تایی باشه

3-اگر اینوبخوام توصفحات سایت نمایش بدم بابد چکار کنم یعنی تصویر در ابعاد کوچک نمایش داده شود ولی بعد از بردن ماوس تغییر اندازه بده...درحال حاضر برای اینکار از افزونه استفاده میکنم

یه نگاه بندازید ببینم کدها در فایل html درست گذاشتم

<STYLE TYPE="text/css">
</STYLE>
<a class="size"><img src="H:\test album picture\2000.jpg" /></a>
<a class="size"><img src="H:\test album picture\2001.jpg" /></a>
<STYLE TYPE="text/css">
size{ display:block; float:left; text-decoration:none; border:0; border-right:1px solid #fff; }.size img { display:block; width:60px; height:40px; border:0; cursor:pointer; -webkit-transition-duration: .7s; -moz-transition-duration: .7s; -o-transition-duration: .7s;}.size:hover img { width:480px; height:320px; }

 

[iPersianScript]

.

. سـلام :37:

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

. ولی خب خودت گفتی با CSS آشنائی نداری، الان و در این ساعت پیشنهاد می کنم از لینک زیر استفاده کنی :67: :

.

لینک ها تنها برای اعضای سایت قابل نمایش است.

. کمی باهاش ور بری می فهمی چی به چیه! قول بده تمام تلاشت رو انجام بدی.. :|:|

. در نهایت اگه نتونستی بگو خودم صفحه تو میسازم!! :45:

. کد هارو هم اشتب استفاده کردی! CSS هارو باید کاملاً تو تگ <style></style> قرار بدی :

<html>
<head>

<style>
body img { float:left; display:block; width:60px; height:40px; border:0; cursorointer; -webkit-transition-duration: .7s; -moz-transition-duration: .7s; -o-transition-duration: .7s;}
body img:hover { width:480px; height:320px; }
</style>

</head>

<body>
<img src="H:\test album picture\2000.jpg" />
<img src="H:\test album picture\2001.jpg" />
</body>
</html>​

. چون فقط HTML و CSS هستش، کمی دقت و تمرکز کنی به جان خودم میگیری قضیه رو.. :76:

. ولی بازم میگم نتونستی بگو خودم صفحه ایی برایت بسازم چـــِل ستون چـــــــــِل پنجــ..!!! /

. مخلصیـم jing عزیز..

. فعلا شب خـوش! نه صبح بخیـر!! :40:

.