javascriptの最近のブログ記事

cssナビを使っているところは非常に多い!
自分もまだ使っている。
でも、色々なところで議論されているように気になってはいる。

  • SEO的に良いのか悪いのか
  • javascriptがOFFの画像OFF環境での問題
  • デフォルト印刷の背景OFFの問題
  • 音声ブラウザでdisplay:noneが飛ばされる問題
  • 他・・・

いつからこんなに面倒な事になったんだろう?

初め、ナビを作るときはjavascriptが主流だった。
Dreamweaverで吐き出されるコードを使いまわしたり、ネットで、ロールオーバーだとかビヘイビアだとかで検索して拾って作っていたが、どれもソースが多くてHTMLがゴチャゴチャするのがいやだった。

しばらくは、シンプルな下のコードを使っていた。

<img src="画像" onmouseover="this.src='マウスオーバー画像'"onmouseout="this.src='元画像'" />

しかし、見ての通りwidthやheightやaltを入れると、ソースが非常に長くなる。

そこでCSSナビが出てきたわけだけど、最近やっぱり気になってきた。
テキスト飛ばして背景画像だけになっているわけだけど、良く考えると邪道に思えてきた。
上に書いた問題点もそうだけど、技術の姿勢だけでもどんどん良くない方向に行っている気がしてならない。

たしかに、デザインに関する記述はCSSで行うのが基本だが、それに徹するためにアホみたいに時間を使っているのがバカらしくも思える。

最近、半透明のIE6対応なんかも使い始めて、CSSがゴチャゴチャしてきた。

なんか打開策もないのに長々と書いてしまったが、結論としてjavascriptメニューに戻そうと思う。
そして、できる限りHTMLのソースを簡潔に!
めんどーなライブラリも読み込まないで、誰でも編集できる簡単なjavascript!

探してみたけどなかなか無いもんだ!

addEventListenerを使って作るところまでは理解できたが、やり方がわからん!
くそっ!
勉強がたりんな!

結果、こんなものができました。
ナビゲーションSAMPLE

HTML

<ul id="menus1">
    <li><a href=""><img src="img/menu1.png" id="menu1" width="200" height="30" alt="menu1" /></a></li>
    <li><a href=""><img src="img/menu2.png" id="menu2" width="200" height="30" alt="menu2" /></a></li>
    <li><a href=""><img src="img/menu3.png" id="menu3" width="200" height="30" alt="menu3" /></a></li>
    <li><a href=""><img src="img/menu4.png" id="menu4" width="200" height="30" alt="menu4" /></a></li>
</ul>

javascript

function observe(target, type, listener) {
    if (target.addEventListener) target.addEventListener(type, listener, false);
    else if (target.attachEvent) target.attachEvent('on' + type, function() { listener.call(target, window.event); });
    else target['on' + type] = function(e) { listener.call(target, e || window.event); };
}

function overSet(){
    this.src = this.src.replace('\.png','_o\.png');
    this.src = this.src.replace('\.jpg','_o\.jpg');
    this.src = this.src.replace('\.jpeg','_o\.jpeg');
    this.src = this.src.replace('\.gif','_o\.gif');
}

function outSet(){
    this.src = this.src.replace('_o','');
}

function naviSet(navi){
    observe(document.getElementById(navi), 'mouseover', overSet);
    observe(document.getElementById(navi), 'mouseout', outSet);
}

window.onload = function(){
    naviSet("menu1");
    naviSet("menu2");
    naviSet("menu3");
    naviSet("menu4");
    naviSet("menu5");
    naviSet("menu6");
    naviSet("menu7");
    naviSet("menu8");
}

マウスオーバー画像は、『_o』をつけるだけ!
シンプルになったと思うんだけどな~
印刷も問題ないし、SEOも問題ないんじゃない?

 

参考にしたサイト:

 

XHTML1.0 TransitionalでPNGの半透明を使って、 Another HTML-lint で100点を取る。

簡単そうに見えて、意外と時間を費やしたのでメモ。

まずPNG半透明にはiepngfix.js を使う。

するとCSSの記述が

* html .iepngfix { behavior: expression(IEPNGFIX.fix(this)); }

となるので、CSS validator でエラーとなってしまう。

そこでCSSを外に追いやってしまうのだが、下記のようにIEの分岐を使うと減点は0点だがエラーとなる。
それはそれで気持ち悪いので、javascriptで解決しようと思う。

<!--[if lte IE 6 ]>
<script src="opt/iepngfix.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="opt/ie.css" media="screen" />
<![endif]-->

ブラウザの判定には、browserinfo.js を使ってみた。
<head>~</head>内に以下のように記述。

<script src="opt/browserinfo.js" type="text/javascript"></script>
<script src="opt/switchinfo.js" type="text/javascript"></script>

switchinfo.js内には以下を記述した。

var bi = new BrowserInfo();

if( bi.ieVersion == 6 || bi.ieVersion == 5.5 ) {

    document.write('<script src="opt/iepngfix.js" type="text/javascript"></script>');
    document.write('<link rel="stylesheet" type="text/css" href="opt/ie.css" media="screen" />');

}

これで、Another HTML-lint も CSS validatorもエラーが無くなった。

もう少し、省略できそうだがとりあえず問題は回避したからいいかな・・・

ドラクエ2の動きをjavascriptで再現してみた

http://www.funkazista.com/samples/dq2/

キャラクターはずっと中央にいるのに、後ろに着いてくるような動きは、意外と難しいぞ!

マップは XB-LIM さんのところから借りました。

ああ、山も海も渡れるのは何か気が引けるな・・
JavaScript++かも日記CSVファイルをテーブル表示というエントリーがあった。
jqueryのプラグイン。
タブ、カンマ、セミコロン区切りと色々ある。
これは便利だ!

最近のエントリーで「jquery」の利用が多いのはいつもチェックいたので、これは利用してみようと思う。

csvview.jpg

DEMOページ

考えればなんとなしに動きが悪そうに思えるが、めくってみると意外にありかも!
ちゃんとめくれてるような気がするし、実装も簡単そう!
コアはjquery
page_turner.jpg

prototype.js ばかり使っていて jquery を使った事が無いので、このへんでたしなんでみようかどうしようか。
でもきっと、やらないだろうな・・・

DEMOページ

ネタ元:Flashを使わないで本をめくる効果

サイトで WYSIWYG 機能を実装できるスクリプト一覧


色々と探したけど、どうしても納得するものが見つからない。
軽くて、多機能で、安全で、XHTML対応で・・・
絶対必要な機能と、正直いらない機能を整理して、自分で作るしかないのかな?


今のところ「Whizzywig」が軽くて良いと思う。