title属性を透過できれいに表示
- Category : coding > javascript / 2007.02.12 Mon 10:26
- permalink
<a href="" title="">タイトル属性に、タイトルテキストと、URLを表示、ちょっとお洒落にするjavascript：nicetitle.jsを導入してみました。動作例
『nicetitle.js』の動作例｜PamGauins要素の例
ins要素の例：この文字列は挿入されました。<ins cite="http://pamgau.net/" datetime="2006-02-21T07:00:00+09:00">ins要素の例：この文字列は挿入されました。</ins>del要素の例
<del cite="http://pamgau.net/" datetime="2006-02-21T07:00:00+09:00">del要素の例：この文字列は削除されました。</del>cite属性が無い場合のins要素の例
ins要素（cite属性が無い場合）：この文字列は挿入されました。<ins datetime="2006-02-21T07:00:00+09:00">ins要素（cite属性が無い場合）：この文字列は挿入されました。</ins>cssはこんな感じにしてます（boldがつかないんだけど…まぁいいや）
ただ、IE6には透過が効かないんですよね。。。→
というわけで、
nicetitle.jsの表示をIE6以下で背景透過｜myselfArchiver
ここでレクチャーされてました。
徹底して透過させたい方はご参照ください。
opacity: 0.9;だけだと、IE6もIE7アウトなんですが、filter:Alphaを使えば、参照→
のように、IE7だけは透けます。
（もともとfilter技はIE6でも使えたのになぁ…）
-----
以下のblogにトラックバック送らせて頂きました。
http://floors.ty.land.to/
http://pamgau.net/
.nicetitle {
font-weight: bold;
text-align: left;
position: absolute;
left: 0;
top: 0;
width: 25em;
z-index: 20;
max-width: 50%;
color: #333;
}
.nicetitle-content {
overflow: hidden;
border: 1px dashed #999;
padding: 5px;
opacity: 0.9; /* Firefox用透過 */
background-color: #f9f9f9;
filter:Alpha(opacity=75,enabled=75); /* IE7用透過 */
}
.nicetitle p {
margin: 0;
line-height: 1.5;
}
.nicetitle p.destination {
font-weight: normal;
font-size: 10px;
color: #B1290C;
}
div.nicetitle p span.accesskey {
color: #B1290C;
}
ただ、IE6には透過が効かないんですよね。。。→というわけで、
nicetitle.jsの表示をIE6以下で背景透過｜myselfArchiver
ここでレクチャーされてました。
徹底して透過させたい方はご参照ください。
opacity: 0.9;だけだと、IE6もIE7アウトなんですが、filter:Alphaを使えば、参照→のように、IE7だけは透けます。
（もともとfilter技はIE6でも使えたのになぁ…）
-----
以下のblogにトラックバック送らせて頂きました。
http://floors.ty.land.to/
http://pamgau.net/
Comments