2010年05月03日

a:hoverで、へこむアンカーテキスト、リンクボタン

スポンサード リンク

 Javascriptを使わずCSSだけで
作るへこむリンクボタン,

JavaScript スタイルシートサンプル集
格安高速バスキラキラ号

サンプルソース

<html>
 <head>
  <title>マウスが乗るとへこむアンカーテキスト、ボタン</title>
<style type="text/css">
<!--/*cssだけで作るへこむテキスト、ボタン*/
.push0 a:hover{
  position: relative; /* 相対位置への配置 */
  top: 1px;
  left: 1px;

  text-decoration: none; /* 下線なし */
}
.push1 a{
  display: block; /* ブロック要素にする */
  width: 170px;  /* 横幅 */
  color: #000000; /* 文字色 */
  background-color: #e0ffff; /* 背景色 */
  border: outset 2px #7cfc00; /* ボーダー */
  margin-bottom: 5px;  /* 下 マージン */
  padding: 5px;       /* 内側余白 */
  text-align : left;     /* 水平位置 左揃え */
  text-decoration: none; /* 下線なし */
}
.push1 a:hover {
  position: relative;
  top: 1px;
  left: 1px;

  color: red;
  background-color: #90ee90;
  border: inset 2px #7cfc00;
}

-->
</style>
</head>
<body>
  <p class="push0">
   <a href="#">JavaScript スタイルシートサンプル集</a><br>
   <a href="#">格安高速バスキラキラ号</a>
 </p>
<div class="push1">
  <a href="#">背景 背景画像</a>
  <a href="#">スタイルシート CSS</a>
  <a href="#">レンタル サーバー</a>
  <a href="#">動く文字 ティッカー</a>
  <a href="#">テーブル</a>
</div>

</body>
</html>

a:hover疑似クラス
 (アンカーテキストにマウスカーソルが乗った時)を使ってプロパティ値を換え
スタイルを変更しています。
position:relative; top: *px; left: *px;
 [相対的配置] 本来表示されるべき位置から、 配置の設定分
top: 1px;(上から下へ1px)
left: 1px;(左から右へ1px
移動した位置に表示されます。
border: outset 2px #7cfc00;
枠線の設定です。border : スタイル 幅 色 ;  書き方は順浮同でスペースで区切って記述します。
border のスタイルに outset を指定すると枠線に囲まれた領域が盛り上がって観えます。
inset を指定すると少し窪んで観えます。以上を利用してマウスカーソルが乗った時
右下に押し下したようにしています。
文字色や背景色を変えるにはcolorプロパティ,background-colorプロパティ
値を変更します。カラーコード 色見本

a:hoverを使ってアンカーのスタイルを変更します
hover疑似クラスでテーブルの行とセルをハイライト
さくらのレンタルサーバ スタンダード
無料レンタルカウンター「デジデジ」
ロリポップ!なら初心者でも安心!
ホームページ簡単作成 「ホムペロリ!」、「woopa!」
CGI簡単設置 「CGI CANDYBOX!」が無料で使えます!!

posted by javaScript at 19:32 | 大阪 ☁ | リンク、ジャンプ、ページ移動 | このブログの読者になる | 更新情報をチェックする

2009年10月24日

説明付きリストを使ったインタレストマッチ風な広告枠

スポンサード リンク

インタレストマッチ風の広告枠

 広告枠の土台は説明付きリスト(定義型リスト)です。
これを css で装飾して上のように表示しています。

説明付きリスト HTML タグ 表示
<dl>
<dt>ETCカード...</dt>
<dd>eelife.cool</dd>
<dd>ガソリン代が...</dd>
</dl>
ETCカード...
eelife.cool
ガソリン代が...

さくらのレンタルサーバ ビジネス
大容量・高機能レンタルサーバー heteml

サンプルソース

<html>
<head>
<title>説明付きリストを使ったインタレストマッチ風な広告枠</title>
<style type="text/css">
<!--
.mBox{/*広告枠の設定*/
 background-color:#ccffff; 
 font-size: 12px; 
 text-align: left; 
 width: 100%;
}

.mBox a{/*広告枠の a要素*/
 text-decoration: none;
 cursor: pointer;
}

.mBox dl{  /*dlの設定*/
  margin: 0;
  padding: 0;
  width: 100%;
}

.dtBox {  /*タイトル(ETCカード...)*/
  margin: 0;
  padding: 0.5em;
  font-size: 17px;
  font-weight: bold;
  float: left;
  color: #0000cc;
  text-decoration: underline;
}

.ddBox1{ /*説明文1(eelife.cool)*/
 margin-left: 2em;
padding: 1em 0.5em 0.5em 0.5em;
 color:green;
}

.ddBox2{  /* 説明文2(ガソリン代が...)*/
 margin: 0;
 padding: 0em 0em 1em 2em;
 clear: both;
 color: #333333;
}
-->
</style>
<script language="JavaScript">
<!--
function Mover(chkID){
myID = document.getElementById(chkID);
myID.style.background='#87cefa';
myID.getElementsByTagName('dt')[0].style.color = '#ffffff';
myID.getElementsByTagName('dd')[0].style.color = 'purple';
}

function Mout(chkID){
myID = document.getElementById(chkID);
myID.style.background='none';
myID.getElementsByTagName('dt')[0].style.color ='#0000cc';
myID.getElementsByTagName('dd').item(0).style.color = 'green';
}

//-->
</script>
</head>
<body>
<div  class="mBox">
      <a href="http://eelife.cool.ne.jp/card/gaso_top.html" target="_blank">
      <dl id="dlBox1" onmouseover="Mover('dlBox1')" onmouseout="Mout('dlBox1')">
        <dt class="dtBox">ETCカード...</dt>
        <dd class="ddBox1">eelife.cool</dd>
        <dd class="ddBox2">ガソリン代が...</dd>
      </dl>
      </a>
    <a href="http://www.moshimo.com/bargain/405/227349" target="_blank">
     <dl id="dlBox2" onmouseover="Mover('dlBox2')" onmouseout="Mout('dlBox2')">
        <dt class="dtBox">風、インフルエンザ予防に</dt>
        <dd class="ddBox1">www.moshimo.com</dd>
        <dd class="ddBox2">新型インフルエンザ対策に</dd>
      </dl>
     </a>
    <a href="http://kirakirabus.seesaa.net/" target="_top">
     <dl id="dlBox3" onmouseover="Mover('dlBox3')" onmouseout="Mout('dlBox3')">
        <dt class="dtBox">高速バスキラキラ号</dt>
        <dd class="ddBox1">kirakirabus.seesaa.net</dd>
        <dd class="ddBox2">足元ゆったりで評判の高速バス</dd>
     </dl>
    </a>
  </div>
</body>
</html>
 

a 要素でリストを包んでボックス全体でクリック可能にして います。
<dt class="dtBox">float: left; を設定して左に回り込ませ
これにつづく <dd class="ddBox1">を右側に表示します。
<dd class="ddBox2">clear: both; で回り込みを解除します。

function Mover(chkID){
myID = document.getElementById(chkID);
// 指定したID属性値 内の全要素をmyIDに格納します。
myID.style.background='#99cbff';
//背景色
myID.getElementsByTagName('dt')[0].style.color = '#ffffff';
//myID内の上から0番目(1からでなく 0から)の<dt>タグの文字色
myID.getElementsByTagName('dd')[0].style.color = 'purple'; }

//myID内の 上から0番目の<dd>タグの文字色

 スタイルシートを理解する一番の方法はプロパティの値をいじり倒すことです。
そしてどの様に表示が変わるかを見ることで徐々にその働きが分かるようになります。

Dom getElementsByTagName()メソッド
DOM(Document Object Model)の基本
リンク文字の背景領域でもクリック可能にする
リスト要素を使ったナビゲーションメニュー
スタイルシート css を使った横並びリストメニュー
スタイルシートだけでポップアップメニュー、補足説明文を表示します。

posted by javaScript at 23:12 | 大阪 ☔ | リンク、ジャンプ、ページ移動 | このブログの読者になる | 更新情報をチェックする
×

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