درخواست کد html,css مانند این نمونه!

[profile 0]

سلام دوستای گلم..

من میخواستم همچین چیزی و با همین استایل در سایتم استفاده کنم. با این تفاوت که من خودم به صورت دستی عکس و لینک و الت و میذارم برای هر کدوم..

نمونه آنلاین

http://www.wp-parsi.com/

قسمت

اعضای گروه وردپرس پارسی

==========

پیشاپیش از اینکه لطف کردین و وقتتون گذاشتین سپاس گزاریم . .

ویرایش شده مهر 92 توسط profile

[SM-Mahdavi 5428]

این اسمش Tooltip هست. با CSS و CSS JQuery می تونید ایجادش کنید. تو گوگل که جستجو کنید نمونه های آماده زیادی میاره. منم یه نمونه ساده الان براتون می زارم

کد HTML

<a href="#" class="tooltip">
    Tooltip
    <span>
	    <img class="callout" src="src/callout_black.gif" />
	    <strong>Most Light-weight Tooltip</strong><br />
	    This is the easy-to-use Tooltip driven purely by CSS.
    </span>
</a>
<a href="#" class="tooltip">
    <img src="../img/demo/css-tooltip-image.gif" />
    <span>
	    <img class="callout" src="src/callout_black.gif" />
	    <strong>CSS only Tooltip</strong><br />
	    <img src="../img/demo/css-tooltip-image.gif" style="float:right;" />
	    Pure CSS popup tooltips with clean semantic XHTML.
    </span>
</a>

کد CSS

a.tooltip {outline:none; }
a.tooltip strong {line-height:30px;}
a.tooltip:hover {text-decoration:none;}
a.tooltip span {
    z-index:10;display:none; padding:14px 20px;
    margin-top:60px; margin-left:-160px;
    width:240px; line-height:16px;
}
a.tooltip:hover span{
    display:inline; position:absolute;
    border:2px solid #FFF;  color:#EEE;
    background:#000 url(src/css-tooltip-gradient-bg.png) repeat-x 0 0;
}
.callout {z-index:20;position:absolute;border:0;top:-14px;left:120px;}

/*CSS3 extras*/
a.tooltip span
{
    border-radius:2px;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;

    -moz-box-shadow: 0px 0px 8px 4px #666;
    -webkit-box-shadow: 0px 0px 8px 4px #666;
    box-shadow: 0px 0px 8px 4px #666;
    opacity: 0.8;
}

[profile 0]

این اسمش Tooltip هست. با CSS و CSS JQuery می تونید ایجادش کنید. تو گوگل که جستجو کنید نمونه های آماده زیادی میاره. منم یه نمونه ساده الان براتون می زارم

کد HTML

<a href="#" class="tooltip">
Tooltip
<span>
	 <img class="callout" src="src/callout_black.gif" />
	 <strong>Most Light-weight Tooltip</strong><br />
	 This is the easy-to-use Tooltip driven purely by CSS.
</span>
</a>
<a href="#" class="tooltip">
<img src="../img/demo/css-tooltip-image.gif" />
<span>
	 <img class="callout" src="src/callout_black.gif" />
	 <strong>CSS only Tooltip</strong><br />
	 <img src="../img/demo/css-tooltip-image.gif" style="float:right;" />
	 Pure CSS popup tooltips with clean semantic XHTML.
</span>
</a>

کد CSS

a.tooltip {outline:none; }
a.tooltip strong {line-height:30px;}
a.tooltip:hover {text-decoration:none;}
a.tooltip span {
z-index:10;display:none; padding:14px 20px;
margin-top:60px; margin-left:-160px;
width:240px; line-height:16px;
}
a.tooltip:hover span{
display:inline; position:absolute;
border:2px solid #FFF; color:#EEE;
background:#000 url(src/css-tooltip-gradient-bg.png) repeat-x 0 0;
}
.callout {z-index:20;position:absolute;border:0;top:-14px;left:120px;}

/*CSS3 extras*/
a.tooltip span
{
border-radius:2px;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;

-moz-box-shadow: 0px 0px 8px 4px #666;
-webkit-box-shadow: 0px 0px 8px 4px #666;
box-shadow: 0px 0px 8px 4px #666;
opacity: 0.8;
}

ممنون دوست عزیز..

ولی من میخواستم از این کد توی "ابزارک==html" استفاده کنم...

جطور میشه؟؟

[SM-Mahdavi 5428]

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