人気ブログランキング | 話題のタグを見る
- 北の空からみなみへ -
exblog staff

<< 淡い夏 暮れゆく (へっぽこ気... 評判と評価と実力と >>
きりんさん変化(へっぽこ実験)
2006年 08月 10日
※ 画像容量を無駄使いしている記事 ※

マウス位置で画像の色合いを変えて見る実験


[#IMAGE|c0062295_20323887.jpg|200608/09/95/|mid|512|829#]



このアイデア自体は、以前にこの辺で使ったマウス選択もののアレンジです。

この記事に使ったマウスオーバー(マウスを重ねる)でリンク表示が変わるテクニックは、結構古くからあるようですが、私は今年の4月に 魔猫さんのブログで知りました。 その少し後にエキブロ新聞特集でもこれを利用した特集記事がありました。
その元ネタを探して、辿り着いたのがこのブログhttp://chocob.exblog.jp/2884283/でした。(2006.08/13現在 更新停止中)

オリジナルにさらに手を入れてしまったので、あまり参考にして欲しくはない代物ですが、私の設定を書いておきます。 上記のところから編集転記した例文コードも書いておきます。


CSS 追加分
.mon { display: none; }
a.lnk { text-decoration: none; }
a.lnk:hover { background-color: transparent; }
a.lnk:hover .pre { display: none; }
a.lnk:hover .mon { display: inline;}

code表示の例文
<a href="#4301974_2" class="lnk" style="text-decoration:none;"><span class="pre">(´・ω・`)ショボーン</span><span class="mon">キタ━━━━(゚∀゚)━━━━ッ!!</span></a>

例文をbrowser表示 ※ 上記codeに色指定を追加しています
(´・ω・`)ショボーンキタ━━━━(゚∀゚)━━━━ッ!!

class="***" ごとの基本動作は、(後ろからという端折った説明ですが)こうなります。
mon : マウスオフ(通常時)で→表示なし / マウスオオン(hover時)→表示
pre : マウス乗せない(通常時)での表示 / マウスオーバー(hover時)→非表示
lnk : Aタグでこのクラスを指定した場合に、その子要素で上記(pre と mon)のクラス指定が生きます。 (つまり マウスオーバーした時と、マウスが離れた時とで表示が切り替わるようになる)
これをブロック要素(画像やDIVタグ)に適用したものが、この記事冒頭のようなものです。
単純な モノクロ絵とカラー絵との切り替えは、次のようなコードで実現できます。
きりんさん変化(へっぽこ実験)_c0062295_20323887.jpgきりんさん変化(へっぽこ実験)_c0062295_2037638.jpg左記のcodeはこうなっています。

<a name="4301974_3" href="#4301974_3" class="lnk" style="text-decoration: none;"><span class="pre"> [#IMAGE|c0062295_20323887.jpg|200608/09/95/|left|128|207#] </span><span class="mon"> [#IMAGE|c0062295_2037638.jpg|200608/09/95/|left|128|207#] </span></a>

飛び先 href="" を指定する関係で、名前付け(name指定)を同時設定
これは、次期IE(ver7)次第では指定の必要がなくなるかも…
(現行IEでは href要素なしだと、hover連動に失敗するらしい)

残念なことに、一部ブラウザでは 表示が乱れたりすることがわかり、このところは使用を控え気味にしていました。(特にIEは、Mac用は旧バージョンで開発終了、またwinもユーザー設定によっては表示残り現象があるらしいと知った)

しかし、ほとぼりが冷めてみると、表示が残ってもいいケース(今回のように重ねての上書き表示)や、マウス乗せる場所でメニュー風に選択する場合などは、大過なく使えそうに思うので今後はまた使って行こうかと思っているところです。

ということで、練習演題 花のモノトーンミュージアム作成にトライ。

きりんさん変化(へっぽこ実験)_c0062295_23433913.jpg
きりんさん変化(へっぽこ実験)_c0062295_23441123.jpg



きりんさん変化(へっぽこ実験)_c0062295_23443599.jpg
きりんさん変化(へっぽこ実験)_c0062295_23444973.jpg



フォト絵としては失敗作ですけれど 秋桜(コスモス)と紫陽花の対比が捨てがたい
きりんさん変化(へっぽこ実験)_c0062295_234526.jpg
きりんさん変化(へっぽこ実験)_c0062295_23451741.jpg



きりんさん変化(へっぽこ実験)_c0062295_23454347.jpg
きりんさん変化(へっぽこ実験)_c0062295_23453030.jpg



これがミニトマト(プチトマト)の花とは・・・
きりんさん変化(へっぽこ実験)_c0062295_23471618.jpg
きりんさん変化(へっぽこ実験)_c0062295_23472851.jpg

これ
きりんさん変化(へっぽこ実験)_c0062295_21133385.jpg
をみててっきりプチトマトと思っていたのですが、農家のヒトいわく 『トマトの花は黄色』だとか ^^;
何なのでしょうね・・・プチなすかしら?(笑)

きりんさん変化(へっぽこ実験)_c0062295_23474039.jpg
きりんさん変化(へっぽこ実験)_c0062295_23475287.jpg



きりんさん変化(へっぽこ実験)_c0062295_23482368.jpg
きりんさん変化(へっぽこ実験)_c0062295_23483515.jpg



こちらはナナカマド(Mountain Ash / Rowan)。 まだまだ青(緑?)いのでした。
きりんさん変化(へっぽこ実験)_c0062295_23484625.jpg
きりんさん変化(へっぽこ実験)_c0062295_23485772.jpg



きりんさん変化(へっぽこ実験)_c0062295_2349963.jpg
きりんさん変化(へっぽこ実験)_c0062295_23491934.jpg



お, なんか色香を感じるぞ ♪
きりんさん変化(へっぽこ実験)_c0062295_23492843.jpg
きりんさん変化(へっぽこ実験)_c0062295_23493815.jpg



ひとこと余計に &Tips;&code;
今回の画像枠線は、CSS設定ではなく、全て記事中で書いているものです。
(ただし、CSS中で IMG.IMAGE_MID を ここに書いたようにマージンゼロにし実現しています)
もともと6月半ばにはじめた頃は、CSS設定で画像マクロ表示文字「top」の存在を知らなかったのです。 その時に応じて色を変えたいということも、CSSに頼らないでインラインスタイルシートの記述で済ませたかった理由です。

こんなコードです。
<div style="float:left;padding:2px;border:1px gray solid;"> [#IMAGE|c0062295_23493815.jpg|200608/09/95/|mid|512|384#]</div><br clear="left">


write and post at 2006.08/09
last edit at 2006.08/13

by bucmacoto | 2006-08-10 00:56 | &Tips;&code; | Comments(8)
Commented by GALANT's Cafe at 2006-08-11 01:17 x
い、いろなんて、邪道だっ!(ぇ?)

でも、色がたくさん見えた瞬間、雑多な感じがして、ガッカリする映像ってありますよね。
モノクロームの出す緊張感のような。
Commented by bucmacoto at 2006-08-11 08:13
# GALANT's Cafe さま

> モノクロームの出す緊張感のような。

銀幕(モノクロ映画)スターのあの美しさって、色がないからこそ深く感じられたのでしょうか。
カサブランカのイングリッド・バーグマンだとか、すげー綺麗 だと感じました。

ホモサピエンスは遺伝的に、夜行性だった頃に一度 視細胞色感オプシンを失活して一色型(色盲)時代を経ているといいますね。 そのためか(個人差もあるようですが)夢の多くはモノクロだと言いますし。。 視野中心の印象的な所だけ色つきの写真も面白い。

単純に モノクロームだと あらが目立たないだけかも > 銀幕スター映像(笑)
Commented by absinth at 2006-08-11 21:01
すごい・・・・・。
こんな魔法のうらに、あんな記号がならんでいるのねん。
Commented by bucmacoto at 2006-08-11 23:14
# absinth さま

すごい凝ったスキンを使いこなしているお方にほめられた~(・▽・~)(~・▽・)~ (舞上がり

本当は、記号を並べなくて済むように、CSSで管理するべきなんでしょうけどね。
どうも私は性格的に、きっちりスキン管理とか、体裁整えて一貫表示するとかいう能力に欠けるのです。> 結局スパゲティなコードになっちゃうのですぅ。。。
Commented by hannah5 at 2006-08-13 00:53
あら、これ不思議@@
まことさん、天才的ですね!
Commented by bucmacoto at 2006-08-13 19:51
# はんな さん

私ではなく、このhover技CSS考案者が天才的なのです。
この元となったCSS設定を見た直後は、動作内容を理解できませんでした。
元ネタから削って最低要素だけ残して見て、やっとこ少しだけわかった気がしたものです。
Commented by hannah5 at 2006-08-14 01:25
私はこういうのってまるでダメなんですが、見てるだけでも面白いです。
で、コンピューター音痴、HP音痴の私にもできそうですか?
スキン一つ変えるだけで大汗かいて何時間もかかるのに、こんなのもう私にはお手上げでしょうか?
Commented by bucmacoto at 2006-08-14 08:07
# はんな さん

それって,難しい質問です。。。
以下は無理しての答えです。
 ・できるようになる。 とは、言いきれません。 多忙などで放棄の可能性あり。(悲観的回答)
 ・時間はかかっても、投げ出さなければ 必ずできるようになります。(楽観的回答)
私に答えられるのは、そういう一般論だけですね。。

私のこの&Tips;って記事は、教えるというより、学習のヒントという感じの文章です。
ま、これに限らず ちゃんと誰にでもわかる説明をするだけの文章力がないのです(笑)。
名前
URL
削除用パスワード
<< 淡い夏 暮れゆく (へっぽこ気... 評判と評価と実力と >>
<< 淡い夏 暮れゆく (へっぽこ気... 評判と評価と実力と >>