سوال: نمایش متن روی عکس [بایگانی]

arashmanteghi

سه شنبه 01 شهریور 1390, 00:05 صبح

سلام بچه ها، خسته نباشید. یه راهنمایی میخوام. چطور میشه یه متن رو روی عکس نمایش داد؟ استفاده از خصوصوت alt توی تگ img باعث میشه توی IE متن روی عکس نشون داده بشه، اما توی chorme و فایرفاکس نه. من میخوام مثلا username هر کربر روی عکسه پروفایلش نمایش داده بشه، اونم وقتی که موس میره روش. username هم البته از بانک خونده میشه. راهنمایی دارید آیا؟

amin1softco

سه شنبه 01 شهریور 1390, 06:26 صبح

به نظرم از همون tooltip که با jquery نوشته شده بود استفاده کنی بهتره یا می تونی همچین کدی بنویسی که عکس رو داخل یک div بزاری و یک div دیگه ام اضافه کنی که متن تصویر اونجاست بعد تا ماوس رفت روش متنه رو ظاهر کنی دوباره تا رفت کنار متنه رو فیب کنی همچین کدی

<style type="text/css">
.tip
{
padding:5px;
-moz-border-radius: 13px;
border-radius: 13px;
direction:rtl;
display: none;
background: #eeeeea;
border: #d6d6d2 solid 1px;
border-top: none;
position: absolute;
color: #73736b;
font-family: tahoma;
left: 150px;
top: 150px;
}
</style>
<body>
<body>
<div>
<div onMouseOver="this.firstChild.style.display='block';" onMouseOut="this.firstChild.style.display='none';"><span class="tip">متن تصویر</span><img width="300px" height="300px" src="img.jpg">
</div></div>
</body>
</body>

arashmanteghi

سه شنبه 01 شهریور 1390, 21:41 عصر

به نظرم از همون tooltip که با jquery نوشته شده بود استفاده کنی بهتره یا می تونی همچین کدی بنویسی که عکس رو داخل یک div بزاری و یک div دیگه ام اضافه کنی که متن تصویر اونجاست بعد تا ماوس رفت روش متنه رو ظاهر کنی دوباره تا رفت کنار متنه رو فیب کنی همچین کدی

<style type="text/css">
.tip
{
padding:5px;
-moz-border-radius: 13px;
border-radius: 13px;
direction:rtl;
display: none;
background: #eeeeea;
border: #d6d6d2 solid 1px;
border-top: none;
position: absolute;
color: #73736b;
font-family: tahoma;
left: 150px;
top: 150px;
}
</style>
<body>
<body>
<div>
<div onMouseOver="this.firstChild.style.display='block';" onMouseOut="this.firstChild.style.display='none';"><span class="tip">متن تصویر</span><img width="300px" height="300px" src="img.jpg">
</div></div>
</body>
</body>

ممنونم از راهنماییت دوست خوبم، متاسفانه من jQuery بلد نیستم و هنوز فرصت نکردم یاد بگیرم. ترجیح میدم با همون راه حل دوم شما سر و کله بزنم داداش.