Yukiyanagiな日々

趣味で創作活動しています。野生動物、北方狩猟民大好き。創作活動の報告や、日々思うことを綴ります。

web備忘録:Fancyboxのキャプション表示にご注意!

ちょっとWEBデザインのことについて。調べても出てこなかったことなので備忘録として書いておきます。

私が運営しているサイトでは、イラストを紹介するページでFancyboxを使っています。Lightboxと違って、画像が大きくてもブラウザのサイズに合わせて大きさを自動で調節してくれるしカスタマイズがしやすいので、職業訓練で知ってから愛用しています。

私はほぼすべての作品にキャプションをつけています。(単なる言い訳したがり屋かもしれませんがね)fancyboxではaタグ内のtitle属性(下の画像の赤い矢印で指してる部分)に文章をつけて、必要なjQueryやcssのデータを読み込ませ、html内に軽くjavascriptで設定をすれば実装できるという非常に楽なものです。



(赤い矢印の部分、つまりaタグ内のtitle属性が、fancyboxを使うとこう表示される)



ですが問題は実装した後なんです。下の画像を見てください。

マウスオーバーした状態です。マウスポインターは写っていませんが、マウスを重ねると、aタグ内のtitle属性の中身がツールチップでもろ出てきてしまいます。<br>なんて改行タグも見苦しく出てます…。fancyboxを開発した人たちは、キャプションの内容がタイトル同然の短いものだと想定してたんでしょう。

この問題を解決するべくググってみたら、「imgタグ内にもtitle属性に何か文字を入れる(一番上の画像の、緑の矢印で指してある部分)と、imgのtitle属性がツールチップで表示される」とありました。しかし、私がその通りやってみてもうまくいきません。「教えてgoo」で質問してみても無しのつぶてでした…。

ところがある日原因がわかったんです。imgタグにtitle属性が表示されるのは、マウスオーバーしたときに画像に何の変化も起こらない場合のみなのです。つまり、リンクが貼られている画像が裸の状態でマウスオーバーされているときです。私の場合、マウスオーバーすると、薄暗くなって作品のタイトルが表示されるようにしていました。(上の画像)このため、マウスポインターが直接画像に触れている状態ではなくなったのです。だから、imgタグにいくらtitle属性を設定しても、aタグ内のtitle属性が表示されてしまったのです。

これに気づき、全く逆のやり方をとってみたら、こうなりました↓
img_good.jpg
マウスオーバーしていないときにタイトルを表示し、マウスオーバーするとタイトルが下に引っ込むようcssを設定しました。するとどうでしょう。imgタグのtitle属性だけが表示され、aタグ内の長ったらしいtitle属性は見えなくなりました。マウスポインターが、直接画像を指している状態だからです。



0 Comments

Add your comment