画像を変えてリンクの仕方

締切済

質問者：hkdykk
質問日時：2010/04/10 13:00
回答数：3件

只今、HPを初めて作り始めております。
トップページなのですが
画像を変えてリンクさせたいのですが、何度やっても最初の画像から変わりません。。。ご指摘宜しくお願い致します。
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=Shift_JIS">
<title>ホームページのタイトル</title>
</head>
<body>
<a href="リンク先アドレス"><img src="最初の画像名" border="0" onmouseover="this .src='マウスを乗せたときの画像名'"onmouseout="this .src='最初の画像名'"></a>

</body>
</html>

これで合っているでしょうか？
ちなみに、ホームページの作り方というサイトからコピペして貼り付けて作っております。FC2無料HPを利用しようと思っています。
専門用語はあまりわかりません☆
宜しくお願い致します。。。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (3件)

最新から表示
回答順に表示

No.3

回答者： zeff#1
回答日時：2010/04/10 14:21

「画像名」と書いてらっしゃいますが、

ここには「画像のアドレス」を入れます。
○○○.gifとか○○○.jpgとか○○○.pngといったもの。
先にまず画像をアップロードしないとなりません。
パソコンの中に保存してある画像をインターネット上に載せるということ。

「画像のアドレス」＝「画像名」という意味ならいいのですが、
そこで失敗しているのでは？と思ったもので。
「ホームページの作り方」の方でも紛らわしく書いてありますし、
そのまんま自分で付けた画像名を入れちゃったのでは＾＾；

「画像名」はalt=""の中に入れます。
画像を表示させない環境の人のために替わりに表示される文字です。
（代替テキストといいます）

<a href="リンク先アドレス"><img src="最初の画像のアドレス" alt="画像名" border="0" onmouseover="this.src='マウスを乗せたときの画像のアドレス'" onmouseout="this.src='最初の画像のアドレス'" width="画像の横幅" height="画像の高さ"></a>

まずそれを解決してから次のステップに進みましょう。

「ホームページの作り方」はあまり参考になさらないほうが良いかと。
やり方が古いです。fontタグとか使ってるし。

この回答への補足

...やはり、一枚目の画像、リンクもばっちりなのですが
マウスを載せても何も変わりませんorz...
2枚目の画像は一枚目に少し加工を加えたものなのですが・・
ブログのフォトアルバムにもきちんとUPされてるのですが・・
何がいけないのか、さっぱりわからず(涙

補足日時：2010/04/10 14:58

通報する

- 0
- 件

通報する

この回答へのお礼

ありがとうございます。。
あ！そうなんです、おっしゃる通りで最初はアップロードしておらず。。
ブログの中のフォトアルバムに入れて、そのアドレス？を使ってみました。。。が、画像が最初ののみで、変わらなくて；；
貼り付けありがとうございます。
早速今から挑戦してみます！

通報する

お礼日時：2010/04/10 14:42

No.2

回答者： noname#111181
回答日時：2010/04/10 13:41

JavaScriptを使って以下のように記述します。

----------------------------
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=Shift_JIS">
<title>ホームページのタイトル</title>
<script language="JavaScript" type="text/javascript">

</script>
</head>
<body>
<a href="" onMouseover="criani('image','image_on')" onMouseout="criani('image','image_off')">
<img class="image" name="image" src="最初の画像名" alt="画像" width="サイズX" height="サイズY" border="0" />
</a>
</body>
</html>