ラウンジ(兼FAQ掲示板)

ツリー式メニュー オンマウスで展開させたい
過去ログ NO.1148129912
□ ふたば [2006年05月19日17時55分]
いつもお世話になっております。

ツリー式メニューを利用させて頂いております。
現在のツリー式メニューでは、クリックで中身が展開されるようになっておりますが、サイトユーザーの方から「リンクが分かり難い」ので改善して欲しいとの要望を頂き、改造できたら・・・と考えております。

1.展開を「クリック」ではなく、「オンマウス」にすることができるか?
2.親タイトルにマウスを持っていった時に、リンクされていることが分かるようにマウスの形状を変更させることができるか?

改造が可能であれば、その方法をご指南頂きたく、質問致します。
□ NXer [2006年05月19日22時59分]

>1.展開を「クリック」ではなく、「オンマウス」にする

には onClick を onMouseover にします。NXerです。

141行目付近
--------------------------------------------------------
元 val = "<span onClick='menu_open(" + p + ")'><img name=pos" + p + " src='" + ico_close + "'" + img_parm + "> " + val+ "</span>";

新 val = "<span onMouseover='menu_open(" + p + ")'><img name=pos" + p + " src='" + ico_close + "'" + img_parm + "> " + val+ "</span>";
------------------------------------------------------
貴サイトが不明のために、当方のローカルサーバで試した例です。

当方は光学マウスで試しています。onmouseに乗り換えたその「乗り
心地」は、クラッチで切り替えていたギア車からオートマチック車に
換えてハンドルを握っている感じです。クリックする、押すという
ことから、動かすという変化を、どうか、ご自身でお楽しみください。
アカデミー賞受賞映画の宣伝と同じで、中身は見ての、触ってのおた
のしみ、というところです。

>2.親タイトルにマウスを持っていった時に

1の改造で、メニューの展開は夢のような軽やかさです。
マウスの形態を変えるなどの必要性を感じませんでした。
あまりにも軽快で、どぎまぎ。それでオープンしたりクローズしたり
してしまいました。javascriptは動的である、というのを実感しま
した。落ち着いて、文字列の上にそっとマウスを移すと綺麗に次々と展開。

もちろん、個別のウェウページは、マウスをクリックして展開されます。

ふたばさんのサイトユーザさんたちの年齢層や性格にもよりますが
マウスが上手く使えない人への対策が必要になったら

1 文字列を少し長くしてマウスの滞在画面域を長くする
 (例 バラ → 我が家のバラ  犬 → 室内犬の躾)
2 すえぽんさんから提供されるツリーの縦横の線の画像を
  少し長い目のアイコンに換える

などの対策が考えられます。こんなページをフルブラウザ対応
のケイタイで使えると、pcとケイタイの差がなくなります。
□ ふたば [2006年05月19日23時51分]
NXer様

いつも丁寧なご対応をありがとうございます。
試してみた所、無事にオンマウス効果が得られました。


・・・が、思っていた程の「使い勝手」は良くない印象を受けました。

ご指摘のように、マウスをそっともっていかないと、凄い勢いでツリーが展開してしまって(泣)


やはり、2.でお伺いした、マウスのポインタを「リンクを選択」と同じポインタ表示になるような改造が出来れば・・・どうだろう?と思うのですが、それは出来ないのでしょうか?

お手数をおかけ致しますが、再度、ご教授願えれば嬉しく思います。
□ NXer [2006年05月20日16時11分]

ふたばさん、試験台になっていただき、ごめんなさい。NXerです。
以下は、当方の不勉強でご迷惑をかけたことのお詫びの意味をこめて、
「はずかしくてきくことができない」数数です。

その1)元に戻しマウスポインタで処理する案
□<span onClick='menu_open・・・・・元に戻します。
 
マウスポインタの形状設定については、下に件名を新たに起こして
書きます。(googleの検索対象(例、マウスポインターの設定、など)
になるラウンジのため硬い表現が混じりますが、そこは笑ってお読みく
ださい。)

その2)onMouseoverについての改善案

□<span onMouseover='menu_open・・・元のご要望案、
欠点「光」学マウスがリンク文字域上を微妙に移動、open/closeに
人間がついていけない(ほんとうに泣く)点。

以下で詳説しますが、マウスのホイール目盛りを3から1に変更
したところ、そーっと から すいすい という感触です。
マウスポインタの形状変更を追加すると効果的に思いました。

よい点: 画面上で3種類使え、初期設定のままで使う人には
     共通すること。

多分IEのデフォルト値の矢印です。一応区別があります。
カーソル形状 親フォルダ域外  白抜きの矢印(default)
       親フォルダ域上  I 型 (text)
       リンクファイル名上 指型矢印 (hand)

(英語名称は、Windows、マイクロソフト社の呼称
OSが不明なのでそちらのOSにあわせてください。)

以上。
***************************************************

件名:マウスポインタの形状を設定するには

スクリプトで変更する案
---------------------------------
<BODY bgcolor="ivory"><SCRIPT>
document.body.style.cursor="move";
menu_print();
</SCRIPT></BODY>
---------------------------------------

以下のものを試してください。

名称  形状 (ただしWindows系)
------------------------------------------------
move  十字の先に矢印がついています。
hand 人差し指で指差しをしています。(ふたばさんの希望形状)
text I 型、利用者、背景色/画像によっては認識しずらいかも。
crosshair 十字型
default 白抜き矢印 マック系は黒
-----------------------------------------------------
よい点は、スクリプト著作者が指定できる点。

その2)利用者が指定する案

個個の利用者の認知特性、好みで設定します。

Windowsでは、次の手順。
-------------------------------------
1 スタート 2 コントロール・パネル
3 マウス  4 ポインタ
5 カスタマイズ テキスト選択
6 参照 ここで面白い選択が可能です。
---------------------------------------

ツリーメニュのために、fillitup.ani矢印を
選んだところ、白抜き矢印(it)にブルーの色を
満たす(fill .. up)します。
これは、色が矢の先まで届く時間が、親フォルダや
リンクファイルの選択はこれでいいのかという
短いが、考え直す時間、操作で緊張していた気分が
解(ほぐ)される時間に、なりました。

ふたばさんのおかげで、いまさら聞くのがはずかしい
諸設定を見直すことが出来ました。また、利用者の皆
さんが、感じられたままをふたばさんに伝えることが
出来ていて、真の意味のインタラクティブ(interactive)
なcgi作りを目指しておられます様子を、スパムメールなど
がはびこっているネットライフでは、とても新鮮に感じ
ます。
□ ふたば [2006年05月20日21時58分]
NXer様

再度、ご丁寧な説明をありがとうございました。
無事にポインタの形状を変更することが出来ました。

サイトユーザーの皆様にとって、使いやすいサイト作りを心がけておりますが、なかなか勉強不足で思い通りにはいきません。

こちらでは、質問した事に対して、いつも丁寧なご返信を頂けるので、とても助かっております。


ありがとうございました。
一定時間書込が無かったので過去ログに移りました

suepon.com | CGI作成/CGI制作 | JavaScript | ドメイン検索 | バナー自動作成 | Google ダンスツール | 松浦亜弥 | H.P.memo | パソコン | ネイル

Copyright (C) 2002 - 2008 suepon , All rights reserved. Powered by CGI Script Market.