当サイトには広告が含まれております

スグにできる。リンクをボタン風にして、マウスを乗っけたらちょっと押してる風にする

この記事は最終更新日から11年経過しています。内容が古い可能性があります。

Image

毎日朝会をしているのですが、今朝の朝会の時に昨日作った 新blogへのリンクがわかりにくい、という意見が出ました。

「ブログを移行したということが分かってる人しか押さない」という、なるほど~ということでちょっと変更してみました。

記事をざっと見る

リンク画像をボタン風にして貼ってみる

わかりにくい、といわれた画像はこんな感じでした。

Image

これをこんな感じのボタン風画像に変更してみました。

Image

貼ってみます。

Image

今はやりの(?)フラットデザインのため、なんか押したらリンクするよという雰囲気がないかな~と思いました。そこでオンマウスになったときにちょっと色が薄くなる(押してるような気がする)感じにしてみたいと思います。

オンマウスで表示されるボタンを作る。

今のボタンをコピーして bloglink_over.png という名前にします。Fireworksでひらき、画像の上に同じ大きさの四角を白塗りで描きます。四角のプロパティを開いて透明度を46ぐらいにします。

Image

するとなんかやや薄いボタンができました。

Image

テーマに書くだけでオンマウスの画像を変更する方法

そして、ボタンの切り替えについてはいつものようにググりました。で、すぐにこのページを発見。

CSSは必要なし! onmouse属性を使った簡単なロールオーバーの作り方

読むと、javascriptだけで記述できるのでテーマのtheme.htmlを変更するだけ!お手軽そうです。
このように変更しました。

<a href="https://usortblog.com/" target="_blank">
<img src="<{$xoops_imageurl}>images/bloglink.png" style="margin-bottom:5px;" onmouseover="this.src='<{$xoops_imageurl}>images/bloglink_over.png'" onmouseout="this.src='<{$xoops_imageurl}>images/bloglink.png'" >
</a>

onmouseover=とonmouseout=のところを追加しました。

onmouseover=”this.src=’ の後にオンマウスで表示されるボタンの名前(bloglink_over.png)を記述します。
onmouseout=”this.src=’ の後に、img src=で指定しているボタンの名前(bloglink.png)を記述します。

これだけで、切り替えの指定が出来ました。こんな感じです。

ちょっとした変更ならjavascriptで直接書くのは手軽ですぐにできますね!

この記事が気に入ったら
いいね または フォローしてね!

あなたのシェアが励みになります!
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメントを残す

記事をざっと見る