Ehs@n
کاربر عضو
سلام
خسته نباشید
همونطور که دیشب هم گفتم امروز آموزش نمایش عکس به صورت پاپ آپ رو براتون می ذارم ولی اول یه سوال که شاید واسه شما هم پیش بیاد این ه که پاپ آپ چیه! منظور از پاپ آپ اینه که عکس در حال عادی نمایش داده نمیشه و بعد از اینکه ماوس روی لینک قرار میگیره ظاهر میشه! اگه متوجه نشدید عیب نداره با دمو های زیر کامل از موضوع سر در میارید
اول کد ها و توضیحاتش لازمش و در آخر لینک دمو ها!
موارد لازم:
صبر و شکیبایی
برنامه کد نویسی نظیر دریم ویور
چند عکس مناسب!
خوب برنامه دریم رو باز کنید و کد های زیر رو توش بنویسید(لطفا کپی پیست نکنید چون در این صورت یاد نمی گیرید)
خوب حالا شنما می تونید لینک ها و نوشته هاتون رو جایگزین کنید!
حالا بریم سراغ فایل استایل
فایل استایل رو ایجاد کنید و به سند HTML تون پیوست کنید!
کد های زیر رو توش بذارید
علت این که تو تگ vij2 span از کد display استفاده کردیم این بود که عکس پاپ آپ مون در حالت عادی نمایش داده نشه!
کد های z-index به خاطر اینه که لینک موجود روی عکس اصلی به عکس پاپ آپ هم سرایت کنه و وقتی روش کلیک می کنیم لینک عکس اصلی رو برامون باز کنه!
خوب حالا در حالت عادی عکس زیر متن لینک مون ظاهر میشه و واسه این که جای عکس رو جا به جا کنیم باید چی کار کنیم؟
واسه تغییر جای عکس در تگ a vij2:hover span دو خاصیت top:1em; و left:1em; وجود داره که شما با تغییر معیار هایشون(1em) می تونید جای عکس رو مشخص کنید و به نوعی با عکس بازی کنید! توجه داشته باشید که نباید واحد هاشون رو (em) رو تغییر بدید و همینطور می تونید از واحد های منفی(مثلا -10em) استفاده کنید
اگه خواستید به جای متن عکس جایگزین کنید باید در سند HTML تون به جای پرشین اسکریپت کد زیر رو اضافه کنید
که خوب باید به جای 23.jpg عکس خودتون رو جایگزین کنید و اندازش رو جایگزین معیار های داده شده بکنید
در صورتی که بخواید از عکس به جای لینک استفاده کنید کد html نهایتون چیزی میشه شبیه این
اینم لینک دمو ها:
ماوس رو روی عکس/لینک نگهدارید تا تغییرات رو ببینید :43:
سوالی بود در خدمت ام
اگه غلط املایی یا نگارشی یا اشتباه تایپی داشتم ببخشید آلام که دارم اینو می نویسم ساعت 5صبح ه و بد جور خوابم میاد ولی چون قول داده بودم نخواستم بزنم زیر قول ام. :-"
شاد باشید
خسته نباشید
همونطور که دیشب هم گفتم امروز آموزش نمایش عکس به صورت پاپ آپ رو براتون می ذارم ولی اول یه سوال که شاید واسه شما هم پیش بیاد این ه که پاپ آپ چیه! منظور از پاپ آپ اینه که عکس در حال عادی نمایش داده نمیشه و بعد از اینکه ماوس روی لینک قرار میگیره ظاهر میشه! اگه متوجه نشدید عیب نداره با دمو های زیر کامل از موضوع سر در میارید
اول کد ها و توضیحاتش لازمش و در آخر لینک دمو ها!
موارد لازم:
صبر و شکیبایی
برنامه کد نویسی نظیر دریم ویور
چند عکس مناسب!
خوب برنامه دریم رو باز کنید و کد های زیر رو توش بنویسید(لطفا کپی پیست نکنید چون در این صورت یاد نمی گیرید)
کد:
[SIZE=12px]<a class="vij2" href="http://persianscript.ir" title=" پرشین اسکریپت">پرشین اسکریپت[/SIZE]
[SIZE=12px]<span>[/SIZE]
[SIZE=12px] <img src="23.jpg" width="200" height="200" />[/SIZE]
[SIZE=12px] </span> [/SIZE]
[SIZE=12px] </a>[/SIZE]حالا بریم سراغ فایل استایل
فایل استایل رو ایجاد کنید و به سند HTML تون پیوست کنید!
کد های زیر رو توش بذارید
کد:
[SIZE=12px]a.vij2 { [/SIZE]
[SIZE=12px] position:relative; [/SIZE]
[SIZE=12px] z-index:20; [/SIZE]
[SIZE=12px]} [/SIZE]
[SIZE=12px]a.vij2:hover { [/SIZE]
[SIZE=12px] display:block; [/SIZE]
[SIZE=12px] z-index:30; [/SIZE]
[SIZE=12px]} [/SIZE]
[SIZE=12px]a.vij2 span { [/SIZE]
[SIZE=12px] display:none; [/SIZE]
[SIZE=12px]}[/SIZE]
[SIZE=12px]a.vij2:hover span { [/SIZE]
[SIZE=12px] display:block; [/SIZE]
[SIZE=12px] position:inherit; [/SIZE]
[SIZE=12px] top:1em; [/SIZE]
[SIZE=12px] left:1em; [/SIZE]
[SIZE=12px] width:128px; [/SIZE]
[SIZE=12px] height:128px; [/SIZE]
[SIZE=12px]}[/SIZE]کد های z-index به خاطر اینه که لینک موجود روی عکس اصلی به عکس پاپ آپ هم سرایت کنه و وقتی روش کلیک می کنیم لینک عکس اصلی رو برامون باز کنه!
خوب حالا در حالت عادی عکس زیر متن لینک مون ظاهر میشه و واسه این که جای عکس رو جا به جا کنیم باید چی کار کنیم؟
واسه تغییر جای عکس در تگ a vij2:hover span دو خاصیت top:1em; و left:1em; وجود داره که شما با تغییر معیار هایشون(1em) می تونید جای عکس رو مشخص کنید و به نوعی با عکس بازی کنید! توجه داشته باشید که نباید واحد هاشون رو (em) رو تغییر بدید و همینطور می تونید از واحد های منفی(مثلا -10em) استفاده کنید
اگه خواستید به جای متن عکس جایگزین کنید باید در سند HTML تون به جای پرشین اسکریپت کد زیر رو اضافه کنید
کد:
<img src="23.jpg" width="200" height="200" />در صورتی که بخواید از عکس به جای لینک استفاده کنید کد html نهایتون چیزی میشه شبیه این
کد:
<a class="vij2" href="http://www.padnet.ir" title="گرافیک">
<img src="vije2.PNG" width="140" height="40" /><span>
<img src="grah.PNG" width="200" height="200" />
</span>
لینک ها تنها برای اعضای سایت قابل نمایش است.
لینک ها تنها برای اعضای سایت قابل نمایش است.
ماوس رو روی عکس/لینک نگهدارید تا تغییرات رو ببینید :43:
سوالی بود در خدمت ام
اگه غلط املایی یا نگارشی یا اشتباه تایپی داشتم ببخشید آلام که دارم اینو می نویسم ساعت 5صبح ه و بد جور خوابم میاد ولی چون قول داده بودم نخواستم بزنم زیر قول ام. :-"
شاد باشید
آخرین ویرایش توسط مدیر:
