2009年11月26日

オンマウスで吹き出し説明文がポップアップ

スポンサード リンク

吹き出し 説明文 ポップアップ

リンク文字,画像にマウスを乗せてください。

【幼児・子供用マスク】3層不織布マスク 50枚セット (税込:1,800円) ・小さなお子様を集団感染から守る子供用サイズ!
・BFE95素材を使った3層構造でインフルエンザ対策用にもピッタリ!
・自由に伸び縮みするプリーツ構造で快適な着け心地を実現!
・官公庁採用実績あり

■幼児・子供に最適なサイズ

  「通常サイズのマスクでは隙間ができる」
  「ゴムが長すぎて顔にうまくフィットしない」

  通常サイズのマスクでは、お子様には隙間ができてしまい
ウイルスを効果的に遮断できません。
このマスクは、プリーツ構造で自由に伸び縮みするプリーツ構造で快適な着け心地を実現しています。1日中着けていても、息苦しくなったり耳が痛くなったりしづらい作りになっています。 普通のマスクよりも小さめに設計された
幼児・子供用のマスクなので、顔が小さい方でもジャストフィット。
幼児や学校に通うお子様にぴったりです。

新型インフルエンザ新型インフルエンザとは? 動物のインフルエンザウイルスが変化して人に感染したものが『新型インフルエンザ』です。容易に人から人へ感染して広がり、急速な世界的大流行(パンデミック)を起こす危険性があります。対策の3層型高性能マスク 外側と内側には不織布、
  真ん中にBFE95規格フィルターを採用した3層構造でウイルスを防ぎます。
  2層目にはBFE95素材が使われているため、
  新型インフルエンザ対策としても最適です。

今のブログで満足ですか?

サンプルソース

<html>
<head>
<title>吹き出しポップアップ CSSサンプル</title>
<style type="text/css">
<!--
.pop a:hover{ /*マウスが乗ったら*/
        position: relative;
        top: 0px; left: 0px;
}
.fukidasipop { /*吹き出し本体*/
        position: absolute;
        top:17px; left:20px;
        display: none; /*何も表示しない*/
        padding: 5px; /*内側の余白*/
        width: 300px; /*ブロックの幅
        font-weight: bold; /*文字の太さ*/
        text-decoration: none; /*文字飾り*/
        color: #ffffff; /*文字色*/
        background-color: #b22222; /*背景色*/

        border-top:white solid 10px;
        border-left:#b22222 solid 10px;

     filter: alpha(opacity=85); /* IE */
  -moz-opacity:0.85; / *Firefox・Netscape */
   opacity:0.85; /* Opera・Safari */
}
a:hover .fukidasipop {
        display: block; /*ブロック要素で表示*/
}
-->
</style>
</head>
<body>
<p class="pop">このマスクは、
<a href="javascript:void(0);">
プリーツ構造<span class="fukidasipop">
吹き出しポップアップ</span></a>です。

<a href="javascript:void(0);">
新型インフルエンザ
<span class="fukidasipop">吹き出しポップアップ
</span></a>対策
<br>
<br>
吹き出しが少し透けて見えます。CSSでオブジェクトの透明度を操作する
<br>Opacityプロパティを使って半透明を実現しています。
</p>
</body>
</html>
ボックスの配置方法
position:relative; top:0px; left:0px;
 [相対的配置] 本来表示されるべき位置から、
配置の設定分 top: *px; left: *px 移動した位置に表示されます。
このサンプルの場合は .pop a:hover に position:relative; を
設定しているので top:0px; left:0px; 以外を設定するとリンク文字に
マウスが乗った時その位置に移動するので表示が乱れます。

position:absolute; top:*px; left:*px;
 [絶対的配置] ブロックの性質をもつ親要素から、
配置の設定分移動した位置 top: *px; left: *px に表示されます。
position:relative;
top:0px; left:0px;親要素position:absolute;
top:35px; left:150px;
上記の図では親要素に対して上から35px,左から150px 移動した位置に
青色のボックスが配置されています。
border-top:white solid 10px;
border-left:#b22222 solid 10px;

borderプロパティを使って吹き出しの出っ張りを作ります。
CSSで作る吹き出しボックス
filter: alpha(opacity=85); /* IE */
-moz-opacity:0.85; / *Firefox・Netscape */
opacity:0.85; /* Opera・Safari */


 吹き出しが少し透けて見えます。CSSでオブジェクトの透明度を操作する
Opacityプロパティを使って半透明を実現しています。
値:IE // 1(透明)〜100(不透明)
    Firefox・Netscape・Opera・Safari //0.0(透明)〜1.0(不透明)

CSSで作る吹き出しボックス,サンプル
display プロパティ
JavaScriptとCSSで指定した要素の表示/非表示
スタイルシート CSS
CSSだけでおこなう、画像の入れ替えとポップアップ
画像にマウスを乗せると説明文を表示します。
画像のロールオーバー,マウスが乗ると画像が入れ替わります。
a:hoverを使ってアンカーのスタイルを CSSだけで変更します
スタイルシートだけでポップアップメニュー、補足説明文を表示します。

posted by javaScript at 17:30 | 大阪 ☁ | 吹き出し、見出し装飾 | このブログの読者になる | 更新情報をチェックする
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。