リンクにマウスオーバーしたときに、追加情報やテキストが風船のようにポップアップするサイト、たまにあります。
ツールチップなどと呼ばれている機能です。
意外と「ポップアップさせる部分だけのコード」という情報がないため情報共有します。
本記事では、「マウスオーバーしたときにポップアップでリンク先のリストを表示する」ソースコードを掲載します。
マウスオーバーしたときにポップアップでリンク先のリストを表示
マウスオーバーしたときにリンク先のリストをポップアップする部分のソースコードを掲載します。
出来上がりがこちら動画のようになります。
ツールチップでリンク先のリストをポップアップのコード
この風船のソースを以下に掲載します。
<!DOCTYPE html>
<html lang="ja">
<head>
<style type="text/css">
.tips { //風船部分のスタイル設定
position: absolute;
visibility:hidden; //初期設定では風船非表示
background-color: #666666;
margin-left:2%;
padding:1em;
}
</style>
<script>
function show(id){
if(document.getElementById){
var element = document.getElementById(id);
element.style.visibility = (element.style.visibility == 'visible')? "hidden": "visible";
//document.getElementById(id)でid="menu"が設定されているツールチップ部分を取得。
}
}
</script>
</head>
<body>
<h1>マウスオーバーでヘルプ表示</h1>
<span onmouseover = "show('menu');" onmouseout = "show('menu');">
<a href="contents0.html">Contents</a>
<span id = "menu" class="tips">
<a href="contents1.html">Introduction</a><br>
<a href="contents2.html">Examples</a><br>
<a href="contents3.html">Conclusion</a>
</span>
</span>
</body>
</html>
マウスオーバーでリンク先URLをツールチップで表示
今度は、リストをマウスオーバーしたときに、リンク先のリストを表示するのではなく、URLをツールチップとして表示させるコードです。
テキストにマウスオーバーするとそのURLがツールチップとして浮かび上がります。
こちらも「ツールチップ部分のみ」の基本的なコードというのは情報がなく、私も探したので記事にしました。
URLをツールチップで表示のソースコード
ソースはこちらです。
<html lang="ja">
<head>
<title>Tool Tips</title>
<script type="text/javascript">
window.onload = function(){
var anchor = document.links;
//document.links で、ページ内のすべてのリンクを取得。
for(var i = 0; i < anchor.length; i++) {
anchor[i].title = anchor[i].href;
//anchor.lengthでリンクの個数を取得。
//.title はタイトルバーに表示しますが、
リンクアンカーのエレメントに指定するとツールチップ表示されます。
//.hrefの値がtitleに代入されています。
}
}
</script>
</head>
<body>
<a href="http://www.yahoo.co.jp/">Yahoo</a><br>
<a href="http://www.google.co.jp/">Google</a><br>
<a href="https://torutsume.net/">トルツメ日記</a>
</body>
</html>まとめ
「マウスオーバーしたときにポップアップでリンク先のリストを表示する」シンプルなソースコードを紹介しました。
JavaScriptに関するこんな小ネタを少しずつ勉強中です。
PR プログラミング＆Webデザイン奮闘記
なんだかんだでプログラミングまたはWebデザイン関係のスクールは3校ほど受講しました。
その質はばらつきが激しいと痛感。
3校の様子をレビューしますね。
通学型：料金は高いですが、対面なので先生は気合い入れて教えてくれるし、なにより同士となる生徒とのコミュニケーションは通学型でしか手に入らないと思いました。
仕事で悩みがあったのかいきなり泣き出す生徒さんに出会ったこともあり、そんな人間臭い出会いも良い思い出です。
オンライン型：オンライン型のスクールは私はこちら↓の侍エンジニア塾さんにお世話になりました。
私は当時、長期では通えなかったので侍エンジニア塾さんは１ヶ月コースがある点が良かったです。
私には都合が良いスクールでしたが契約する前に必ず体験を勧めます。
詳しくは、以下の侍エンジニア塾さんの公式ページをご確認くださいね。
侍エンジニア塾での体験談は以下の記事でまとめています。
ご興味がある方は参考にしていただけると嬉しいです。
