サムネイルをクリックして背景画像を変える方法を教えてください

解決済

質問者：sakuya1836
質問日時：2008/10/27 23:24
回答数：4件

サムネイルをクリックすると背景画像が変化するようにしたいのですが、
以下のソースではうまくいかず、質問に上がらせて頂きました。

まず<head>～</head>に

<style type="text/css">

</style>

と入れて、<body>～</body>に

<a href=JavaScript:; onclick="document.body.style.backgroundImage='画像URL'";>
<img src="画像URL" title="***" width="200" height="60" border=0 class="pictw"/></a>

（class="pictw"はサムネイルに枠線を付ける設定になっています）

としたのですが、サムネイルは表示されるのに
クリックしても何も変化しません。
他のソースも試したのですが、上一列のみに表示などの
背景画像の位置指定やリピート設定ができるものが見つかりませんでした…
（この条件が必須なので…）
どうすればいいのかどうか教えてください。よろしくお願いします。

通報する

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

質問の本文を隠す

回答 (4件)

ベストアンサー優先
最新から表示
回答順に表示

No.2ベストアンサー

回答者： _pipi_
回答日時：2008/10/28 07:27

<a href="#" onClick="document.body.style.backgroundImage='url(./img/1.gif)'" border="0">

<img src="./img/1.gif" title="***" width="200" height="60" class="pictw"></a>

それより１行で<br>
<img src="./img/1.gif" alt="***" width="200" height="60" class="pictw" onClick="document.body.style.backgroundImage='url(./img/1.gif)'">

文法について語れるほど、普段は厳格に書いていないので心が痛みますが
いいかげんに<a href="javascript:～　の記述はやめましょう～！
void()の代わりは
<a href="#" onClick="return false">
でも代用可。

この回答への補足

回答有難う御座います！

＞いいかげんに<a href="javascript:～　の記述はやめましょう～！
す、すみません…もっと勉強します…！；；

こちらの１行で記述する方法をやってみたところ、表示はされるのですが、
できれば上一列のみなど画像の表示位置を指定したいと思っています。
そのような方法はあるのでしょうか？

補足日時：2008/10/28 10:15

通報する

- 0
- 件

通報する

No.4

回答者： _pipi_
回答日時：2008/10/28 21:21

<html>

<head>
<style type="text/css">
body{ background-repeat:repeat-x; background-position:top left;}
</style>
</head>
<body>
<img src="./img/1.gif" alt="***" width="200" height="60" class="pictw" onClick="document.body.style.backgroundImage='url(./img/1.gif)'">
そのままで上横一列に背景として表示されますけど？

- 0
- 件

通報する

この回答へのお礼

ご回答有難う御座います。
こちらの方法で上一列のみの表示ができました。
お手数お掛け致しました、本当に有難う御座います！

通報する

お礼日時：2008/10/28 23:08

No.3

回答者： _pipi_
回答日時：2008/10/28 20:59

>上一列のみなど画像の表示位置を指定したいと

bodyの背景画像のこと？
それともサムネイルの画像を横一列にですか？

この回答への補足

bodyの背景画像のことです。
説明不足で申し訳ありませんでした。

補足日時：2008/10/28 23:03

通報する

- 0
- 件

通報する

No.1

回答者： xindex
回答日時：2008/10/27 23:39

<script Language="JavaScript">

</script>
<a href="javascript:bgChange('hoge.gif')">
<img....

<a href="javascript:bgChange('../img/hoge.gif')">のように一階層上のimgフォルダのって指定もでも使える。

a href="java・・・のところは
<a href="javascript:void(0);" onclick="bgChange('../img/hoge.gif')">のほうがいいかも。