カーソルを乗せると画像が変わる-ロールオーバー

いつもクリックしてくれてありがとう。 何度か来てくれている人にはお馴染みのこれ↓ですが、初めて見る人はボタンにカーソルを乗せてみてね。 マウスを乗せると画像が変わるでしょう? ロールオーバーと言います。 クリックしてくれる人にお礼が言いたくて、「ありがとう」の言葉が出るようにしました。 ボタンとして機能しますので、クリックすると、人気ブログランキングへ飛びます。クリックしてみてね。 ロールオーバーにするIMGタグは、次のように書きます。 <IMG src="最初に表示される画像のURL" border=0 onMouseOver=this.src='カーソルを乗せたときの画像のURL' onMouseOut=this.src='カーソルを離したときの画像のURL'> リンクするボタンにするには、<a href="リンク先のURL"></a> で囲えばOK。 <a href="リンク先のURL"> <IMG src="最初に表示される画像のURL" border=0 onMouseOver=this.src='カーソルを乗せたときの画像のURL' onMouseOut=this.src='カーソルを離したときの画像のURL'> </a> という具合です。 カーソルを乗せないと、ロールオーバーになっているかどうかはわからないから、ロールオー…

続きを読む

「お気に入りに追加」ボタン(3) デザインのアレンジ

お気に入りのボタンの続きです。 ボタンを設置できたら、自分のサイト・ブログに合わせてアレンジしたくなってくるかもしれませんね。 そこで今日取り上げるのは、ボタンのデザインを変える方法です。 今回は本文が長いです。 覚悟のうえで、続きをどーぞ。

続きを読む

「お気に入りに追加」ボタン(2)

「お気に入りに追加」ボタンに関する補足です。 ボタンの周りにはスペースが開いてしまうんです。 このブログの場合は、下のほうに設置したので、そのスペースが目立たないと思いますけど…。 ブラウザが自動的に<FORM>タグの前後に空白行を挿入するのが原因だそうです。 あなたのせいじゃないの。ブラウザのせいなんです。 (最初、自分が余計なタグやスペースを入れたんじゃないかと悩んだ経験がありますよ、私…^_^;) 前回とは違う、シンプルなHTMLで説明しますね。 お気に入りボタンのHTMLタグは、こんな感じ↓でできています。 【初期状態】 <form> <input type="button" onclick="window.external.AddFavorite ('http://testomomo.seesaa.net/','カスタマイズ実験室')" value="お気に入りに追加"> </form> 【余白なし指定】 formタグに、余白なしの指定をしましょう。 赤字の部分を追加します。 <form style="margin:0px"> <input type="button" onclick="window.external.AddFavorite ('http://testomomo.seesaa.net/','カスタマイズ実験室')" value="お気に入りに追加"&g…

続きを読む

もっと見る