いいモノみーつけた!


  パソコン使い方教室:ホームページ小技集


  HOME


  

背景関連


   

グラデーション



  

画像関連


   

サムネイル(1)


   

サムネイル(2)


   

スライドショウ


   

クリックで切り替え



  

日付・時間表示関連


   

時刻表示(1)


   

時刻表示(2)


   

時間別メッセージ


   

曜日別メッセージ


   

日別メッセージ



  

テキスト関連


   

文字列の点滅



  

ウインドウ関連


   

サブウインドウの表示



  

一般的な便利技


   

クリッカブル マップ


  

関連サイト


   

パソコン使い方教室


   

ホームページ講座


   

CSS 講座




文字列の点滅


ページ内の重要な部分に気付いてもらう為に便利な手法です。
例えば、次のようにリンクバナーの上に点滅文字を入れます。




一度は見てね ↓
パソコン使い方教室



上の例のタグソースは、次の通りです。


行数

タグソース

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

<html>
<head>
<title>文字列の点滅</title>

<script language="JavaScript">
<!--

function blinkAnime() {
var flag = div1.style.color
if(flag == "#ffffff") {
div1.style.color = "red"
} else {
div1.style.color = "#ffffff"
}
setTimeout("blinkAnime()",1000)
}

-->
</script>

</head>
<body bgcolor="#ffffff" onload="blinkAnime()">

<div name="div1" id="div1"><p style="font-family : 'MS P ゴシック '; font-weight:bold ; font-size : 80% ;">一度は見てね ↓<br><a href="index.html" target="_blank"><img src="slide/title.gif" border="0" alt="パソコン使い方教室"></a><br><br></p></div>

</body>
</html>


11行目の div1.style.color = "red" の赤い文字と、13行目の div1.style.color = "#ffffff"の白い文字を切り替えて表示すことでアニメーションのように見せています。
15行目は、点滅間隔を1秒に指定しています。
緑の部分は、見て貰いたいページのリンクバナーですから、ご自身で用意していただくことになります。



Copyright (C) N.Hamano All Rights Reserved