اضافه شدن عکس یا متن جدید با بردن موس روی متن یا عکس دیگر

[mhd07]

سلام به همگی...

سوالم از عنوان تاپیک مشخصه

حالا یه توضیح بدم:

من میخوام وقتی که نشانگر موس رو روی یک متن یا عکسی میبرم بلافاصله یه متن یا یه عکس جدید ( با طول و عرض دلخواه و قابل تغییر ) در کنارش نشون داده بشه طوری که متن یا عکس قبلی هم پیدا باشه

مثل حالت راهنمایی برای بازدید کننده سایت میمونه که نمیدونه این عکس یا آیکون توی سایت به چه معنی هست و با بردن موس روی اون عکس یا آیتم ، عکس جدید به عنوان راهنما ظاهر بشه

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

با تشکر

 

[Hasam]

سلام به همگی...

سوالم از عنوان تاپیک مشخصه

حالا یه توضیح بدم:

من میخوام وقتی که نشانگر موس رو روی یک متن یا عکسی میبرم بلافاصله یه متن یا یه عکس جدید ( با طول و عرض دلخواه و قابل تغییر ) در کنارش نشون داده بشه طوری که متن یا عکس قبلی هم پیدا باشه

مثل حالت راهنمایی برای بازدید کننده سایت میمونه که نمیدونه این عکس یا آیکون توی سایت به چه معنی هست و با بردن موس روی اون عکس یا آیتم ، عکس جدید به عنوان راهنما ظاهر بشه

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

با تشکر

<img id="first" /><img id="second" />

<style type="text/css">
#second { visibility: hidden; }
#first:hover #second { visibility:visible; }
</style>

 

[mhd07]

<img id="first" /><img id="second" />

<style type="text/css">
#second { visibility: hidden; }
#first:hover #second { visibility:visible; }
</style>

فقط یه چیز اینکه آدرس عکس ها رو چجوری بهش بدم ؟ کجای کد باید باشه ؟

 

[Hasam]

فقط یه چیز اینکه آدرس عکس ها رو چجوری بهش بدم ؟ کجای کد باید باشه ؟

<img src="{IMAGE_LINK}" />

 

[mhd07]

<img src="{IMAGE_LINK}" />

​

اول یه تشکر کنم از اینکه جواب میدید ؛ دوم اینکه من الان کد پایین رو توی سایت های تست آنلاین کدهای Html میزنم قسمت link هم آدرس دو عکس رو میدم ولی فقط عکس اولی ( id="first" ) رو نشون میده و با بردن موس روی عکس خبری از عکس دوم نیست

<img id="first" src="link" /><img id="second" src="link" />

<style type="text/css">
#second { visibility: hidden; }
#first:hover #second { visibility:visible; }
</style>

 

[Hasam]

​

اول یه تشکر کنم از اینکه جواب میدید ؛ دوم اینکه من الان کد پایین رو توی سایت های تست آنلاین کدهای Html میزنم قسمت link هم آدرس دو عکس رو میدم ولی فقط عکس اولی ( id="first" ) رو نشون میده و با بردن موس روی عکس خبری از عکس دوم نیست

<img id="first" src="link" /><img id="second" src="link" />

<style type="text/css">
#second { visibility: hidden; }
#first:hover #second { visibility:visible; }
</style>

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

این ویرایش جدید:

<style type="text/css">
.first { background:red; width:48px; }
.second { display:none; }
.first:hover .second { display:block; }
</style>

<div class="first">
<img src="http://173.194.35.2/images/icons/product/chrome-48.png" />
<div class="second"><img class="second" src="http://173.194.35.2/images/srpr/logo4w.png" /></div>
</div>

 

[b.soshiant]

منم این مشکل رو دارد
اون عکسی که در پایین سایت هست: کافه کتاب میخوام وقتی ماوس میره روش ی عکس جایگزین نشون بده. ترجیحا یه تکه کد html باشه و مجبور نشیم توی ریشه سایت چیز اضافلع ای بذاریم بهتره

 

[sinarigi]

خیلی خوب بود ممنون فقط خ رو بخون ی چیز مهم فرستادم.. مرسی از آقا حسام

هاست رایگان | هاست دانلود | هاست لینوکس