Heart Attack

Google+
最新映画情報・予告編・映画ポスター・スチール写真・画像・ネタバレ注意 まったり更新中


遅々として進んでなぃブログのデザインリニューアルですが。。。(すみませんw)
デザイン候補の中で どーしてもツールチップ(リンクの説明とか出るヤツね)が使いたくて
朝からずっと探しまくっているのですが。。 なかなか思ったよぅなのがみつかりません(泣
つーか 素直にそのまま組み込むだけなら簡単そーだし それこそ星の数ほどあるんです
でもねでもね。。。 そーぢゃなくて。。。 う~ん 上手く書けなぃなー 从つД`*从
とにかくデザインを変更したいんだけど なかなか思ったよーにできなぃんですよぅ
検索しまくり > サンプルをみる > ダウンロード > 改造を試みる > 玉砕w
朝からもぅ何十個ダウンロードしただろぅ。。 熱が出てきたょ 从*´Д`*从 ぁふん
もーいっそのことさ このままでいーや 。。。みたぃなw ヤケクソ気味だす orz
とりまえず今日ゎここまでにしよぅ 明日また続きをしるってことで。。。(気が向けばw)

【Heart Attack】 とりまぇず 『登録』 してみたょ♪

【Heart Attack】 『テンプレート』 を変更してみたです

【Heart Attack】 カウンターが 『10000』 超えたょ♪

【Heart Attack】 『翻訳機能』 を付けてみたぃなぅ

【Heart Attack】 今回ゎ全部 『バックアップ』 したょ♪

【Heart Attack】 最大級の 『ビッグウェーブ』 がキタァー♪

【Heart Attack】 ブログ開設から 『1年』 が経ちましたょ♪

【Heart Attack】 意外と頑張ったなぅ私w 『1000』 エントリー目だぉ♪

【Heart Attack】 『カウンター』 ひゃくま~ん♪

【Heart Attack】 ブログ開設から 『2年』 が経ちましたょ♪

【Heart Attack】 カウンターが 『500万』 超えますた♪

【Heart Attack】 カウンターが 『2000万』 超えますた♪

コメント一覧

どういうのを作りたいがわかれば手伝えるかもしれません。

すごい簡単な例は

http://psacake.com/web/jl.asp

2007.05.22 19:28 URL | ttancm #- [ 編集 ]


ちなみに、英語での例などを探すきであれば

CSS tooltips
とか
nice tooltips
pretty tooltips

2007.05.22 19:38 URL | ttancm #- [ 編集 ]


http://www.dynamicdrive.com/dynamicindex5/
http://www.dhtmlgoodies.com/index.html?page=tooltip

ここらあたり(まだ他にも沢山のサイト)とかで物色してますけどね。。。
機能が良くてもデザインの変更が難しかったり その逆だったり 从つД`*从
ただ背景色や文字の色を変更するのでゎなく透過pngを使いたくて。。。
なのでCSSがいぢれて なおかつ構造的に合致する(させる)ことが出来るモノをw
。。。なーんて考えてたら どれもイマイチなんですよぅ 从*´ω`*从
Javascriptの意味が理解できて書き換えできるならいいのですけどねぇ。。。
まったく何の呪文だか。。 みたぃな 从つД`*从 むずかしすぎるー
でも まだ諦めませんw 何個か候補を探してきたので いぢり倒してみますょ♪
つーか こんなコトばっかしててサイトリニューアルがちっとも進んでねーゎなww

2007.05.22 23:17 URL | にゃも #8VheXTak [ 編集 ]


こんなのはどうでしょう?

http://interface.eyecon.ro/demos/tooltip.html

これはCSSでスタイル掛けられるので透明PNGとかを使いたい場合使えるし(ただリピートでバックグラウンドとして使われるPNGはブラウザによってページがすごく遅くなる)。

後はJSで、付けたいエレメント(A,input, divなど)をJSで指示するだけ、自動的のようにページ中のその指示されたエレメントに付けられる。

実僕も今自分の管理しているウェブサイトのいくつかに取り付けようとしています。

これがJqueryのInterfaceプラグイン機能一つで、そのほかにいろいろなイフェクトとかできる。

今作成中のページの左側にあるMenuもこのJSを使ってクリクするとメニュが開く・閉じるなどになっている。
www.amusedme.com (宣伝・Spamしているつもりじゃないので、こちらのコメントを表示するようにする時こちらのリンクを削除していも良い)。

他のイフェクトとかを見るのはこちらhttp://interface.eyecon.ro/demos

2007.05.24 15:59 URL | ttancm #- [ 編集 ]


ふむふむ。。。 面白ぃ効果がありますねぇ 从*^ω^*从
わざわざありがとうございます <( にゃ.)>
このツールチップだとね 右側が隠れるよーな場合 左に寄ってくれなぃなぁ
細かぃコトなんですけどね。。。 こーゆーのが気になって選択幅が狭いんですw
自分でコードが書ければ(改造できれば)いいのでしょうが 从*´ω`;A
いちぉ何種類か候補をみつけたので DLしていぢっている最中でつ♪

2007.05.25 14:08 URL | にゃも #8VheXTak [ 編集 ]


なるほど (^.^)

そうしてくれるのは結構複雑なコードになりそうですね。ラップ(右端折り返し)するJSとツールチップ事態の大きさと位置が調べる、それによって判断するJSも必要ですね。

僕にとってはツールチップを変えるのがほとんど見た目で、軽く変えたいという気だけど、逆にあまりサイトに最低限以上のJSや負担を掛けたくないですね(も既に他の自分にとってもっと大事なところで多く使っているからページ全体が遅くなるですね)。

いつもこういうのを見ていますから(僕も上のDynamicDriveのメンバーw)もうしいいのを見つけたら教えますね。

2007.05.26 03:44 URL | ttancm #- [ 編集 ]


ついににゃもさんがリンクしたDynamicDriveでメニュー表示のためにいろいろを探したところでこちらのツールチップっぽいのを見つけた。

http://www.dynamicdrive.com/dynamicindex5/popinfo3.htm

こちらは画面が出ない、そしてCSSでスタイル付けれるので色や画像(透明でも)の使用は自由ですね。

2007.05.26 04:22 URL | ttancm #- [ 編集 ]


さっきね すんごぃのみっけたんですよぅ♪

http://mootools.net/

http://rosea.jpn.org/mootools/

ここのツールチップいい感じなんです
デザイン変更できるのならいいんだけどなぁ。。 (これから挑戦しまつ)
あとね 写真を拡大しる(上手く説明できなぃ)のでカッコイイのもできるみたぃ
なんだか初心者にゎ難しそぅだけど がんがって使ってみたぃなー

2007.05.27 09:14 URL | にゃも #8VheXTak [ 編集 ]


あれ、コメントに文字数限りがある(゜o゜)
こちらはPT1

MooToolsですね。それも僕がこの前リンクしたJqueryと同じようなJavascript FrameworkというJSパッケージですね。それのどれかを使うといろいろなイフェクトとか楽に出来ますね。

基本的に大きなのは3三つある:

1
Prototype-scriptaculous
http://script.aculo.us/

2
Mootools/MooFX
http://swik.net/mootools+moofx

3
Jquery+Interfaceプラグイン
http://jquery.com/
http://interface.eyecon.ro/demos

基本的に上と書いた順番で軽くなる。Prototype-scriptaculousはすごく重い(毎ページで200KBか何か増える!)けどすごいパワーフル。

Mootoolsはそれより軽いでJqueryは一番軽い。基本的に出来ることはどれでもで出来るけど、コードが違う。

僕が今まで管理しているウェブサイトでMootoolsとPrototypeを使っていたけどやっぱり機能をたくさん使うと重く(遅く)感じるので最近軽いJqueryに移している。



2007.05.27 20:17 URL | ttancm #- [ 編集 ]


PT2です。リベンジオブザツールチップ!(^.^)

上にリンクしたAmusedmeというサイトで僕もJqueryでもっといいツールチップを見つけて使っている。

こちらがソーズのページ:
http://bassistance.de/jquery-plugins/jquery-plugin-tooltip/

で僕のAmusedmeサイト(www.amusedme.com)で全く同じコードけどスタイルだけが違うバージョンを使っている。

にゃもさんも上にリンクしたMootoolsのツールチップはこれとほぼ同じようなもので、CSSでスタイルを掛けられる。

但しにゃもさんが乗せたものは画像を使って丸い角にしているですね。多分Jqueryのほうが同じように出来ると思う(ツールチップが2分に分かれて各分に上としたの丸いバックグラウンドをつける)けど、問題がそうするとWidth幅が限られる(画像と同じにしないとでってしまう)でツールチップに例えば長いURIとかが入っているとはみ出るか(CSSの設定による)途中に切られる。そしても一つの問題が二つの画像を合わせるよりの高さ(Height)だと同じ問題(但し画像結構大きい(http://rosea.jpn.org/mootools/rtip.png)のでこれはヨッポド長いツールチップを書かない限り高さは問題ないでしょうね。

そちらの説明だと丸くする方法は書いていないけど、CSSが分かるであれば
http://rosea.jpn.org/mootools/site.css
での「round-tip」を観れば分かると思う(というか、全く同じようにするのはそのコードをそのままコピーペで出来るですね)。

2007.05.27 20:18 URL | ttancm #- [ 編集 ]


コメントの投稿












管理者にだけ表示

トラックバック

トラックバックURL↓
http://heartattack507.blog84.fc2.com/tb.php/447-d08d9c8f