画像ボタンのリンクと画像の変更について

質問

画像ボタンのリンクと画像の変更について

ただいまHPを勉強中の者です。
サイトの「企業情報」や、「問い合わせ」などのボタンを作成した場合、
その画像をどのようにプログラムで組めばリンク移動できますか？

また、マウスポインタをその画像の上に持ってきた時に、
文字の色を変えたり、画像全体の色などを変えるにはどうすればいいですか？？
（ボタンを押したら凹ますとか・・・）
色を変えたりなどは、Javascriptでしょうか？？

ただいま勉強中で、まだよく理解できていないので、
詳しく説明を入れてもらえれば助かります。
よろしくお願いします。

回答No.3

yyr446 · ベストアンサー

詳しく説明すると長～くなりそうな質問。テーマをしぼって質問しよう！
＜「企業情報」や、「問い合わせ」などのボタンを作成した場合、
その画像をどのようにプログラムで組めばリンク移動できますか？＞

ボタンが画像だけでいいのなら、基本は

<a href="hogehoge"><img src="ボタンの画像ファイル"></a>

です。ボタンの画像ファイルは別ソフト（GIMPとかPainShopとかPhotoShop）とかで作ります。
ボタン画像の体裁はCSSで調整しましょう。
<style type="text/css">
A IMG {border:0px none;width=60;height:30px;}
</style>

<また、マウスポインタをその画像の上に持ってきた時に、
文字の色を変えたり？？>
<A>要素ならCSSでできます。（JAVASCRIPTでも、もちろんできます）
<style type="text/css">
A:hover {color:red;} //<=マウスが乗った時文字を赤くします。
</style>

<また、マウスポインタをその画像の上に持ってきた時に、
画像全体の色などを変える？？>
これは不可能です。ただし画像の透明度なら変えられます
<style type="text/css">
A:hover {filter:alpha(opacity=70);-moz-opacity:0.7;opacity:0.7;}
</style>

<また、マウスポインタをその画像の上に持ってきた時に、
ボタンを押したら凹ますとか？？>
これは、へこんだ状態の画像を別途作っておいて、クリックや
マウスオーバーで、その画像を切り替えるというjavascriptが
必用です。（CSS3.0ならできそうですが）
これは、初めての人にはちょっとだけ難しいです。
自分で組めなければjavascriptライブラリー（jQuery等）を使うと
簡単にできます。下↓参考に．．．
http://semooh.jp/jquery/

お礼

回答ありがとうございます。
リンクは出来ました！
あと、ボタンを凹ます件ですが、
画像を細かく作成しないといけないんですね。
わかりました。
ありがとうございます。

回答No.4

yyr446

ついでに．．．
へこんだ状態のボタン・浮き出た状態のボタンは
そんなに見た目を気にしなければ、
<img>の上下左右の枠線の種類・太さ・色をCSSで、それらしく設定して
視覚的な効果が出るように工夫できます。
http://www.tohoho-web.com/css/reference.htm#border

回答No.2

ORUKA1951

質問内容から、まだ早すぎる質問だと思われます。
本当に学びたいなら、まず
【参考サイト】
はじめてのWebドキュメントづくり
　 http://www.asahi-net.or.jp/%7Esd5a-ucd/www/
を最後まで、学んでください。
　そのあと、
【参考サイト】
eラーニングトップ：selfup・・・無料ですがユーザー登録必要
　 http://itpro.nikkeibp.co.jp/selfup/elearning/index.html
　の
Webデザインの基礎
HTML入門
などで、きちんと正しい情報で学んでください。・・・この世界、簡単に迷い込んでしまう脇道が、ほんとうにたくさんあります。
　それがとにかく一番早いです。

＞サイトの「企業情報」や、「問い合わせ」などのボタンを作成した場合、
＞その画像をどのようにプログラムで組めばリンク移動できますか？
　リンク自体は全く難しくないですが、画像を使う場合は、なぜ代替テキストが必要かとか、なぜ<font>要素を使ってはならないのかとか、それなりの基礎知識がひつようです。デザイン自体は最近はCSSで組まれることが多いです。

お礼

回答ありがとうございます。
参考サイトありがとうございます。
勉強します。

回答No.1

noname#108165

リンクは普通にリンクタグで出来る筈です。
画像表示も同じ表示タグで。
ただＨＰがどうのようなシステムを行っているのかわかりませんから
絶対ではありません。
ＵＲＬ挿入で自動的にリンクされるのもありますので。

まずはネットでＨＴＭＬを調べた方がいいですよ。
回答を待つよりも断然早く、問題解決出来たりもしますので。

一応ご質問のタグ

リンクタグ→<a href="URL">文字>/a>

文字色変更タグ→<font color=英数字色指定>文字</font>

英数字色指定は英単語で色を指定の場合と数字＆英単語で指定する場合もある。例えば英語ならBlack　英数字なら#FFFFFF（白）や#969696（濃い赤）など。
フォントカラーでネット検索すれば出てきます。

画像をただ表示するタグ→<img src="画像URL">文字

あと画像全体というのが、いまいち判りません。
凹むタグは私使った事がありませんのでお答えできません。
申し訳ありません。

お礼

回答ありがとうございます。
リンクできました。
ありがあとうございました。