livedoor
アフィリエイトは儲かんないってば2008年02月09日18:33
ブログも3年半を経過しましたが、今更ながら新しいカテゴリー「javascript」を作ろうと思います。今更新しいカテゴリーというのも、気恥ずかしいものですが、javascriptをやろうと思うのは、いわゆるAjax（XMLとjavascriptの非同期通信によるアレ。アレ、というレベルくらいにしかわかっていない）というものに足を踏み入れたいのです。
新カテゴリー
かと言って、何もわからないおっさんがいきなり基礎から学んで行っても、時の流れに取り残されるだけです。
とりあえず、ライブラリというものを利用して、できる事を効率的に増やしたいと思います。
ライブラリは、誰か偉い人が作ってくれた「拡張ソフト」みたいなもので、それを使えばプログラムの事を深く利用していなくても、複雑なことができるようになったりします。
カテゴリーPHPで使っていたPEARもPHPのライブラリです。
本格的な理解はあとでもいいと思います。
使っているうちになれてくるはず、たぶん。
そういうわけで、javascriptをオフにしている人には面白くもなんともないカテゴリー「javascript」ですが、最初はImage Menuとかいうのが以前から気になっていたので、使ってみることにしました。
実際の導入してみたものはこちら。
にょいーん、にょいーんと動いてくれます。
この動きがWeb2.0的でいいんですよね。こういうライブラリをどんどん探し求めて行きたいということです。
今回、こちらを参考にさせていただきました。
↓
javascriptで伸縮するメニューができる − webデザイナーのナナメガキ
しかし、このエントリだけでは、mootoolsの必要なコンポーネントとか、どこで「Image Menu」をゲットすればいいのかがわかりにくいです。
そういう場合は、こちらをご覧下さい。
↓
JavaScriptエフェクトで画像スライド式メニューを実装 （ImageMenu） − youmos
＜今回準備した画像＞
＜フォルダの構造＞
適当なフォルダを作って、画像とかをアップロードします。
今回アップロードしたフォルダは、http://afiliate.livedoor.biz/slide-menu/です。
構造を書きます。
slide-menu
├test-menu.html
├imagemenu.js
├mootools.js
├slide-menu1.gif
├slide-menu2.gif
├slide-menu3.gif
└slide-menu4.gif
＜test-menu.htmlの中身＞
めんどいので、CSSと一緒にしました。
文字コードはUTF-8にしていますので、ご自身の文字コードに変えられて、Terapadなどで、文字コードを指定して保存しなおしてください。
iframeで使う事を前提としていたので、リンク先のウインドウは「target="_parent"」にしていますが、適宜削除したり、変更されたりしてください。
もちろん、リンク先と画像も変えないといけません。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>メニュー</title>
<script type="text/javascript" src="mootools.js"></script>
<script type="text/javascript" src="imagemenu.js"></script>
<style type="text/css">
<!--
body{
padding:0;
margin:0;
}
#kwick {
position: relative;
width:362px;
padding:0;
margin:0;
}
#kwick ul.kwicks {
display: block;
height: 60px;
list-style: none;
padding:0;
margin:0;
}
#kwick li{
padding:0;
margin:0;
float: left;
}
#kwick .kwick{
display: block;
overflow: hidden;
margin:0;
width: 85px;
height: 60px;
border-right: 2px solid #fff;
text-align:left;
font-size:85%;
color:#0000ff;
}
#kwick .kwick a{
display:block;
width: 85px;
height: 60px;
}
#kwick a:link{
text-decoration:none;
}
#kwick a:visited{
text-decoration:none;
}
#kwick a:hover{
text-decoration:underline;
}
#kwick .opt1 {
background:url(slide-menu1.gif) repeat-x ;
padding:40px 0 0 3px;
margin:0;
}
#kwick .opt2 {
background:url(slide-menu2.gif) repeat-x ;
padding:40px 0 0 3px;
margin:0;
}
#kwick .opt3 {
background:url(slide-menu3.gif) repeat-x ;
padding:40px 0 0 3px;
margin:0;
}
#kwick .opt4 {
background:url(slide-menu4.gif) repeat-x ;
border-right: 0;
padding:40px 0 0 3px;
margin:0;
}
-->
</style>
</head>
<body>
<div id="kwick">
<ul class="kwicks">
<li><a class="kwick opt1" href="http://afiliate.livedoor.biz/archives/50933265.html" target="_parent"><span>FLASH</span></a></li>
<li><a class="kwick opt2" href="http://afiliate.livedoor.biz/archives/50939941.html" target="_parent"><span>Janet</span></a></li>
<li><a class="kwick opt3" href="http://afiliate.livedoor.biz/archives/24794256.html" target="_parent"><span>orz</span></a></li>
<li><a class="kwick opt4" href="http://afiliate.livedoor.biz/archives/50973019.html" target="_parent"><span>小説</span></a></li>
</ul>
</div>
<script type="text/javascript">
var myMenu = new ImageMenu($$('#kwick .kwick'),{openWidth:196});
</script>
</body>
</html>
そういうわけで、少しずつ、javascriptを学びたいと思います。
この記事へのコメント
M.Fuchie＠ALPHA LABEL
2008年02月10日 19:37 |
今度はJavaScriptに挑戦されるのですね。 素晴らしい成果を期待しております！ 追記： 『カテゴリー：「javascript」内の記事』のリンクをクリックすると、 インラインフレーム内にページが開いてしまうようです。 |
|
afiliate
2008年02月11日 09:33
|
どおも〜M.Fuchie＠ALPHA LABELさま。
以前はてブの事でトラバ頂き、ありがとうございました。大変参考になりました。 そして、今回の件も教えて頂いてありがとうございます。早速修正させて頂きました。なにぶん、手動で作っているパーツなので・・・。以前も同じ過ちをしておりました。我ながらアホです（笑）。 そう言えば、このパーツも一部javascriptなのでした。 http://afiliate.livedoor.biz/archives/50927654.html 早くもやり方を忘れつつありますがｗｗｗ。 本当に色々とありがとうございました♪ |
この記事にコメントする
注：livedoorBlogの仕様により、コメントは400字以内となっております。
コメントが長くなりそうな場合は、
メモ帳にコピペなどされておかれることをお勧めいたします。
