画像からリンクをはる場合にポインターが画像の上にきた時にその画像を変えるようにしたいのですが教えて頂けますか?
現在私はHPを作っているのでHP関係の本を読みながら作っているのですがその事が載っていなくて悩んでいます。

このQ&Aに関連する最新のQ&A

A 回答 (2件)

off.gifは通常の画像、on.gifは画像にマウスが触れた時の画像です。


<p><a href="second.htm"><img src="off.gif" onmouseover="this.src='on.gif'" onmouseout="this.src='off.gif'"></a></p>
    • good
    • 0

下記URLをご参照ください。



参考URL:http://tohoho.wakusei.ne.jp/wwwxx001.htm
    • good
    • 0

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aと関連する良く見られている質問

Q画像リンクの既読制御について教えて頂けませんか?

現在、ホームページビルダー14を使っています。

文字のリンクだと既読リンクの場合は“何色”みたいのは設定できるのですが、
画像リンクに対して通常は“a.jpg”が表示されているけど、
既読リンクの場合は“b.jpg”を表示するということがやりたいです。

すみませんが、誰か教えてもらえませんか?

Aベストアンサー

ホームページビルダーは使ったことがないので,
htmlソースになってしまいますがご了承ください.

なおvisited擬似クラスで背景画像を変更する手法は,
最近のChrome,safariでは使用できなくなっています.
これらのブラウザも対象にするにはjavascriptを使えば実現できるかもしれません.

<head>
<style>
a{
width:50px;
height:50px;
display:block;
}
a:link, a:hover, a:active{
background-image:url(a.jpg);
}
a:visited{
background-image:url(b.jpg);
}
</style>
</head>
<body>
<a href="index.html"></a><hr>
<a href="page2.html"></a><hr>
</body>

ポイントは画像リンクですが,imgタグをaタグで囲まず,
aタグの背景として画像を指定しています.

Q全盲の方にも来て頂けるHPの作り方とは…

どなたかホームページ作成に詳しいお方、知恵をお貸し下さい。

以前、友人の依頼によりフレーム式(左メニュー右メイン)のホームページ作成をしたのですが、その友人より『全盲のお友達がHPに来るので、全盲の方でも利用できるHPにして欲しい』との修正依頼が来ました。
どうやら、その全盲の方は“音声ブラウザ”でページを閲覧されているようなのですが、私が作成したHPでは、その音声ブラウザが上手く機能せず…読み上げはするのですが、どこが何のコンテンツなのかが全然解らない状態のようです。

私自身“音声ブラウザ”という物に馴染みがなく、実際どのようにHPのコンテンツを表現しているのかが解りませんので、これから全盲の方向けにページ修正するにあたって、何に注意して修正をかければ良いのかが、まったく解らない状況です。

どうか詳しい方、どの点に留意してページの修正をしたら良いかをご指導下さいませ。どうぞ宜しくご回答の程お待ちしております。

Aベストアンサー

全盲の人でも利用できるように、
ということは全盲の人だけが対象ではないということですよね。

一番おすすめなのは、デザインをCSSに任せ、HTMLだけを見れば「テキストオンリーサイト」になっているのがよいかと思います。
No.1やNo.2の方が参考URLを示してくださっていますが、具体的にどうというのを探すのは少し困難かもしれませんので、書きますね。

まず、HTMLを見直してください。

1、タイトルは正確についていますか? そのページを表す内容になっていますか?
 →ここが不十分だと、全盲の人にはそのページがどんなページなのか全体を読むまで分かりません。
  ですから、サイトの全てのページが「○○株式会社」という同じタイトルをもっているなどは望ましくありません。

2、タグの意味を知りましょう。
 たとえば、<font>タグでサイズや色を変えて見た目に訴えていたりするのは、全盲の方には分かりづらいです。音声ブラウザはタグの意味を識別して読み上げるので、fontタグでどれだけ見た目を強調しても伝わりません。そういうものは、<em>や<strong>タグを使うと分かりやすいでしょう。
 見出しにするものに関しては<h1>や<h2>タグを使い分けます。
 参考URLを記しておきます。

3、背景画像や単なる挿絵はCSSで。見せたい画像は<img>タグを使い、ただし、title やalt といった属性を忘れないこと。ここはちょっと私も分からないのですが、altとtitleの属性を両方記しておく方がよいと思われます。

4、<head>タグ内に何をかかれていますか?
<link rev="made" href="mailto:xxx@xxx.com" />
<link rel="contents" href="index.html" />
<link rel="index" href="index.html" />
<link rel="next" href="nextpage.html" />
<link rel="copyright" href="about_site.html" />
<link rel="search" href="websearch.html" />
<link rel="help" href="navi.html" />
 こういうのも有益な情報になります。

5、<address>タグを使っていますか?
 サイトの所有者情報を示すタグです。こんな情報も欲しいですよね。

6、リンクの文字列は?
お店の情報は<a href="koko.html">こちら</a>です
 なんてハイパーリンクを使っていると、何のことか分からないです。
 <a href="koko.html">お店の情報はこちら</a>
 とかしたほうが読み上げやすいんです。

7、英語の表記は?
 基本的に日本語のサイトの場合、
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
 などと書いて、日本語であることを明記しています。
 このページの中でたとえば「WEB」という文字列を書いたとします。音声ブラウザはこれを「W、E、B」と一文字ずつ読み上げます。
 これを英語で読ませたい場合は、
 <p lang="en" xml:lang="en">This site is written in Japanese only.</p>
 や
 お店の名前は<span lang="en" xml:lang="en">CAFE MILK</span>です。
 などと、langとxml:lang属性をつけてあげることです。
 これで英語読み上げしてくれます。他の言語(フランス語とかギリシア語とか)の指定方法もありますので、お調べになってください。

8、リンクのショートカット
 <a href="a.html" accesskey="a">AAA</a>
 アクセスキーをつけているとリンクも飛びやすいですね。


一番簡単なのは作成したとき、CSSを外して白黒状態のページを眺めてみることです。<h1>タグや<h2>タグで記された文字は自動的に大きく、<em>や<strong>で示された文字はブラウザに応じて強調されます。
それを眺めたときに読みやすければ大体大丈夫ですよ。

ざっとこんなところでしょうか。
あとは皆さんの参考URLなどをごらんになってくださいね。
そしてCSSを覚えてください。
がんばってください。

参考URL:http://kanzaki.com/docs/htminfo.html

全盲の人でも利用できるように、
ということは全盲の人だけが対象ではないということですよね。

一番おすすめなのは、デザインをCSSに任せ、HTMLだけを見れば「テキストオンリーサイト」になっているのがよいかと思います。
No.1やNo.2の方が参考URLを示してくださっていますが、具体的にどうというのを探すのは少し困難かもしれませんので、書きますね。

まず、HTMLを見直してください。

1、タイトルは正確についていますか? そのページを表す内容になっていますか?
 →ここが不十分だと、全盲の...続きを読む

Q画像がHPに載らない!

HOOPSと、gooに一応HPを持っているのですが、HOOPSで画面表示されている画像はgooのHPまで引っ張れたのですけども、HOOPSのFTPに送っているファイルの中にある画像(gooのHPで表示できた画像とともに送られているHOOPSのHP上では使用していない画像)は、gooの画像のURLにいくら設定しても、HP上で表示されません。まだまだ無知な私ですが、誰か改善方法をご存知でしたら回答を頂きたいです。よろしくお願い致します。

Aベストアンサー

意味がわかりにくいんですが、要するに、HOOPSに登録した画像をgooで表示しようとしても表示されないってことですか?

よく知りませんが、HOOPSは画像の直リン(imgタグで直接表示させること)を禁止していませんか?
その画像をgooにFTPして表示できるのなら、そのように変更すれば済むと思うのですが。

Qフレーム使用のHPから他のHPへのリンクの際の不都合

トップページをフレーム構成にして、左15%は常にメニュー表示、右は本文表示としています。

他の人のHPへリンクするためのリンク用のページを設けたのですが、他の人のHPへリンク後も、自分のHPのメニュー表示がずっとついてまわるので、見た目もよくありませんし、リンク先HPの方にも失礼に感じます。

もしも解決方法がありましたら、ご教示願います。

Aベストアンサー

yam_3さん、こんにちは。
さて、他の人のHPへリンクしているソースを書き換えるといいですよ。
具体的にはしたのように、target="_blank"を追加するとできます。
<a href="http://www.xxxx.xx.xx/" target="_blank">他の人のHP</a>

QHTMLでHPを作っていますが画像が貼れません

初心者がHTMLでHP作成していてつまづいています。助けて下さい。

alphaEDITでHPを作成しており、PF-X.NETサーバーを利用しています。

PF-X.NETサーバーの規則上、public_htmlというフォルダを作って、その中にindexファイルとimgフォルダを作ってその中に画像を入れてます。

indexファイルに貼り付けた画像をimgフォルダに入れてます。

アップロードしたら、作成したレイアウトは自分のURLに表示されるのですが、画像は枠だけ表示され左上に破れた様なマークがついています。

何がおかしいのでしょうか?
HTMLチェッカーというのも英語で分かりませんでした。

よろしかったらどなたかお助け下さい。よろしくお願いします。

以下がindexファイルのHTMLです。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<title>MAINページ</title>
<style>td{vertical-align:top;}</style>
</head>
<body>
<p>
<table border="1" cellspacing="0" cellpadding="0" width="800" align="center">
<tr>
<td>
<p align="center"><font color="#ff0000" size="6">THRASH
METAL JUNCKY</font> </p></td>
</tr>
<tr>
<td>
<table border="1" cellspacing="0" cellpadding="0" width="100%">
<tr>
<td width="600">
<p align="center"><br>
ヘヴィメタルが好き!それもスラッシュメタルが大好きという方達のサイトです!<br>
<br>
私は特にジャーマンスラッシュ三羽烏が大好きです。<br>
<br>
<img border="0" alt="" align="middle" src="articlekreatorinterview.jpg" width="400" height="397"><br>
<br>
KREATOR,SODOM,DESTRUCTION最高!!<br>
<br><a href="home.html">ENTER<br>
</a>
</p></td>
<td>
<ul>
<li><a href="index.html">サンプルページ1</a>
<li>サンプルページ2
<li>サンプルページ3</li></ul></td></tr></table>Copyright THRASH METAL
JUNCKY</td>
</tr>
</table>
</p>
</body>
</html>

初心者がHTMLでHP作成していてつまづいています。助けて下さい。

alphaEDITでHPを作成しており、PF-X.NETサーバーを利用しています。

PF-X.NETサーバーの規則上、public_htmlというフォルダを作って、その中にindexファイルとimgフォルダを作ってその中に画像を入れてます。

indexファイルに貼り付けた画像をimgフォルダに入れてます。

アップロードしたら、作成したレイアウトは自分のURLに表示されるのですが、画像は枠だけ表示され左上に破れた様なマークがついています。

何がおかしいのでしょうか?
HTM...続きを読む

Aベストアンサー

#2です。
>すみませんalphaEDITで画像を貼り付けただけでは駄目だということになるのでしょうか?
私は「alphaEDIT」なるソフトを使ったことがないので詳しくはわかりませんが、メインフォルダの中にサブフォルダなどが存在する場合に、あるHTMLファイルから別フォルダにあるファイルをリンクさせるには、下記サイトにあるようなフォルダ位置指定をしなければならないのです。参考にどうぞ。
http://nojhon.s71.xrea.com/lecfolderb.html


このカテゴリの人気Q&Aランキング

おすすめ情報