نمایش کادر متنی با رفتن موس روی عکس

[hadiemp]

سلام چطوری میتونم این کار رو بکنم تو php یا html خیلی وقته دنبال کدش هستم. ممنون
135846

[H:Shojaei]

باید با javascript یا jquery یا اگر شرایط واسه انجام با css محیا باشه با css انجام بدین...
دو مورد اول بیشتر پیشنهاد میشه...

[siros1983]

فکر کنم بشه یه div تعریف کرد و با استفاده از position z-index display و حالت hover روی عکس اینو براش تعریف کرد با css

[hadiemp]

فکر کنم بشه یه div تعریف کرد و با استفاده از position z-index display و حالت hover روی عکس اینو براش تعریف کرد با css

میتونید کدی در این باره بهم بدین اگر امکانش باشه

[pbm_soy]

اگه درست فهمیده باشم شما نوعی tooltip میخواهید نمایش دهید
در لینک زیر نمونه ای از اینکار وجود دارد در واقع یک api آماده برای نمایش tooltip است چند سال پیش از آن استفاده کردم بد نبود امکانات خوبی هم داشت شاید تا حالا امکاناتش بیشتر هم شده باشه!
http://www.walterzorn.de/en/tooltip/tooltip_e.htm

[siros1983]

میتونید کدی در این باره بهم بدین اگر امکانش باشه

البته مثل این نیست یکم کدهاشو تغییر بدید مثل بالایی میشه


body{
padding:66px;
}
a.tooltips{
color:red;
border-bottom:1px solid gray;
cursor:pointer;
position:relative;
}

a.tooltips span{
position:absolute;
right:2px;
bottom:25px;
background-color:darkgray;
color:white;
border-radius:15px;
width:99px;
text-align:center;
box-shadow:3px 3px 6px #181819;
font-size:10px;
z-index:999;
opacity:0.7;
visibility:hidden;

}

a span:after{
content:'';
position:absolute;
top:100%;
right:50%;
width:0;
height:0;
border-top:8px solid #181819;
border-right:8px solid transparent;
border-left:8px solid transparent;
}

a:hover span{
visibility:visible;

}







<p> For See Download Link Go To Our <a class="tooltips"> Web Site <span>https://mysite.com</span></a> </p>

[H:Shojaei]

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

[hadiemp]

البته مثل این نیست یکم کدهاشو تغییر بدید مثل بالایی میشه


body{
padding:66px;
}
a.tooltips{
color:red;
border-bottom:1px solid gray;
cursor:pointer;
position:relative;
}

a.tooltips span{
position:absolute;
right:2px;
bottom:25px;
background-color:darkgray;
color:white;
border-radius:15px;
width:99px;
text-align:center;
box-shadow:3px 3px 6px #181819;
font-size:10px;
z-index:999;
opacity:0.7;
visibility:hidden;

}

a span:after{
content:'';
position:absolute;
top:100%;
right:50%;
width:0;
height:0;
border-top:8px solid #181819;
border-right:8px solid transparent;
border-left:8px solid transparent;
}

a:hover span{
visibility:visible;

}







<p> For See Download Link Go To Our <a class="tooltips"> Web Site <span>https://mysite.com</span></a> </p>


ممنون این به دردم خورد با تشکر از همه نتیجه گرفتم.