ある画像をクリックすると別の画像に変わって、もう一度クリックすると最初の画像に戻る、みたいな事って出来ますか?スタイルシートやJavaScript使ってでも良いですので、あれば、ぜひ教えてください。

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

A 回答 (4件)

Netscape4.x では、IMG の onClick がサポートされていないので、No.1や2の方法では動きません。


通常、画像に対する処理を書く場合は、画像をAタグで囲んで、その onClick に処理を書きます。
また、初めは表示されない画像は、Imageオブジェクトを作って、予め読み込んでおきます。

<HTML>
<HEAD>
<SCRIPT language="JavaScript"><!--
var count = 3;       // 画像数
var files = new Array("a_1.gif", "b_1.gif", "c_1.gif");  // 画像ファイル名
var objs = new Array(count);

function init() {    // 初期化(イメージのプリロードなど)
  for (i = 0; i < objs.length; i++) {
    objs[i] = new Image(32,32);   // 画像サイズ
    objs[i].src = files[i];
    objs[i].bak = document.images["image"+i].src;
    objs[i].flg = 0;
  }
}

function change_img(n) {  // 画像変更
  if (objs[n].flg == 0) {
    document.images["image"+n].src = objs[n].src;
  } else {
    document.images["image"+n].src = objs[n].bak;
  }
  objs[n].flg = 1 - objs[n].flg;
}
//--></SCRIPT>
</HEAD>

<BODY onLoad="init()">
<A href="javascript:void(0)" onClick="change_img(0)"><IMG name="image0" border="0" src="a_0.gif"></A>
<A href="javascript:void(0)" onClick="change_img(1)"><IMG name="image1" border="0" src="b_0.gif"></A>
<A href="javascript:void(0)" onClick="change_img(2)"><IMG name="image2" border="0" src="c_0.gif"></A>
</BODY>
</HTML>

必要に応じて、画像数や画像ファイル名、画像サイズは変更して下さい。
    • good
    • 0
この回答へのお礼

ありがとうございます!希望通りのものが出来ました。
IMGのonClickがサポートされてないっていうのも聞いたことがあったので、良かったです。

お礼日時:2001/12/22 13:45

少し面倒かもしれませんが,画像をページに貼り付け,画像そのものにリンクを貼る方法ではまずいですか?



1枚目
<BODY>
<P><A href="2枚目のページ.html" target="_self"><IMG src="最初の画像.jpg"></A></P>
</BODY>
2枚目
<BODY>
<P><A href="3枚目のページ.html" target="_self"><IMG src="2枚目の画像.jpg"></A></P>
</BODY>
3枚目
<BODY>
<P><A href="1枚目のページ.html" target="_self"><IMG src="3枚目の画像.jpg"></A></P>
</BODY>

いかがなものでしょう?
これなら,何枚画像があっても大丈夫だと思いますが・・・。

蛇足ですが,こんなことも可能です。
<BODY>
<P><IMG src="2枚目の画像.jpg" usemap="#2枚目の画像(拡張子無しのファイル名)"></A></P>
<MAP name="2枚目の画像(拡張子無しのファイル名)">
<AREA href="最初のページ.html" target="_self" shape="rect" coords="sx1,sy1,ex1,ey1" alt="前の画像">
<AREA href="Indexなどのページ.html" target="_self" shape="rect" coords="sx2,sy2,ex2,ey2" alt="元に戻す">
<AREA href="3枚目のページ.html" target="_self" shape="rect" coords="sx3,sy3,ex3,ey3" alt="次の画像">
<AREA shape="default" nohref>
</MAP></BODY>
このようにすると,画像のクリックする部分によって,前の画像や次の画像,または,一覧ページなどに戻すことも出来るようになります。
(sxは最初のX座標,syは最初のY座標,exは終わりのX座標,eyは終わりのY座標です・・・「範囲指定の」ですよ)
    • good
    • 0
この回答へのお礼

画像はメインに使うものでは無いし、読み込み時間を出来るだけ少なくしたいので、リンクよりはスタイルシートかJavaScriptなどが良いのです。私の説明不足ですみません。でも、ご回答ありがとうございました。

お礼日時:2001/12/21 08:45

前のやつにちょっと手を加えてみました。



<script language=javascript>
var clicked = new Array();
function mouseclick(n) {
if (clicked[n]) {
window.event.srcElement.src = "最初の画像.gif";
clicked[n] = false;
} else {
window.event.srcElement.src = "2枚目の画像.gif";
clicked[n] = true;
}
}
</script>
<img id="image1" src="最初の画像.gif" onclick="mouseclick(1)">
<img id="image2" src="最初の画像.gif" onclick="mouseclick(2)">
<img id="image3" src="最初の画像.gif" onclick="mouseclick(3)">
    • good
    • 0
この回答へのお礼

ありがとうございます!助かります。
ところで、もし使う2枚の画像がそれぞれ違う、3組のボタン(ボタンに使ってます)を置きたい時も、どうすれば良いのか教えてもらえますか?これ↑を試してみて、それぞれ色だけ変えても良いなぁ、なんて思ったんです。
1個目のボタンは赤系の色、2個目は青系、3個目は黄色系で、押すと色が鮮やかになり、もう一度押すと元の色に戻る、みたいな感じで出来ますか?何度も質問することになってしまい、申し訳ありませんm(_ _)m

お礼日時:2001/12/21 08:43

JavaScriptで出来そうです。



↓こんな感じ。

<script language=javascript>
var clicked = false;
function mouseclick() {
if (clicked) {
image1.src = "最初の画像.gif";
clicked = false;
} else {
image1.src = "2枚目の画像.gif";
clicked = true;
}
}
</script>
<img id="image1" src="最初の画像.gif" onclick="mouseclick()">

※ ネットスケープだとうまくいかないかもしれません。(^^;
    • good
    • 0
この回答へのお礼

ありがとうございます(^-^)試してみたら、1つだと出来ました!でも同じページに3つそういうものを置きたいのですが(3つとも、使う2枚の画像は同じものです)、3つ書いてみると出来ませんでした。3つでも出来る方法はありますか?

HTMLのカテゴリで書いたけど、JavaScriptの方に移した方が良いでしょうか。。。

お礼日時:2001/12/20 08:28

このQ&Aに関連する人気のQ&A

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

このQ&Aを見た人はこんなQ&Aも見ています

このQ&Aを見た人が検索しているワード

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

Q画像クリックで別の場所の画像を変更

まずは、こちらのサイトを見ていただけるでしょうか?

http://www.rocomotion.jp/cgi/sample/ralbum/ralbum.cgi?mode=main&action=view&no=427&photono=1&tailno=.jpg&wno=181&hno=163
このサイトのように「クリックすることで、拡大写真を表示」させたいです。
ただ、このサイトの場合、CGIを利用していますが、JavaScript 等を利用してhtmlファイル上で実現できないか?と考えています。

このようなことがJavaScriptで実現可能でしょうか?
ちなみに画像は最大10枚です。絶対10枚と言うものではないです。
方法を教えてください。お願いします。

Aベストアンサー

<html>
<head>
<title>サンプル</title>
</head>
<body>
<table>
<tr>
<td><img src="a.jpg" onclick="document.a1.src='a.jpg'"></td>
<td><img src="b.jpg" onclick="document.a1.src='b.jpg'"></td>
</tr>
</table>
<img src="a.jpg" name="a1">
</body>
</html>

Qオンマウスで、画像切り替え+別箇所の画像も同時に切り替えられのでしょうか?

お世話になっております。
もしJavascriptのカテゴリーと違うものでしたらすみません。

オンマウスにて画像を切り替えるJavascriptがあるのは存じておりますが、
オンマウス時にそのような画像切り替えをすると同時に
別部分にある画像エリアの画像、(もしくはHTML)も切り替える事は可能なのでしょうか。
別々に切り替え設定をすることは出来そうですが、同時に切り替えが出来るものなのかと思いまして、今回質問させて頂きました。

何ぶんよくわかっていないもので説明不足な点も多いかと思いますが、何卒宜しくお願い致します。

Aベストアンサー

やり方はいろいろ考えられます。
手っ取り早いのはidを振ってsrcを変えてしまうことでしょう。
その他グルーピングしたり、スタイルシートを併用したり
いろいろありそうですが、まぁフロー的にはそんなに変わりません

<img src="1.jpg" onmouseover="this.src='3.jpg';document.getElementById('another').src='4.jpg'" onmouseout="this.src='1.jpg';document.getElementById('another').src='2.jpg'" ><img src="2.jpg" id="another">

QHTMLタグ⇒リンクした画像を別ウインドウで開く

いつもお世話になります。
HTMLタグで、リンクした画像を別ウインドウで開く方法を教えて欲しいのですが、
1、メイン画像を表示。
2、そのメイン画像に別の画像をリンク付け。
※3、上記2、の”別の画像を新しいウインドで開く”方法が判りません。
過去歴を閲覧させていただきましたが、わたくしの知る限りではサムネイル画像=同じ画像を別ウインドで開く方法しか検索出来ません。
どなたか※印の方法をご存知の方是非アドバイスをお願いいたします。

Aベストアンサー

<a href="main.jpg" target="_blank"><img src="sub.jpg"></a>

target="_blank"
↑この部分が別ウィンドウで開く部分です。

QWEB作成の際、CSSである画像をクリックするとページ内の別の場所にあ

WEB作成の際、CSSである画像をクリックするとページ内の別の場所にある画像が変わるようにするにはどのようにプログラミングすればよいのでしょうか?またjavascriptを使って画像の入れ替わりがゆるやかに変わるにはどうすればいいのでしょうか?

Aベストアンサー

CSS(とHTML)だけで実現している例は1つだけ知っています。

http://c-brains.jp/blog/wsg/08/06/27-210059.php

QCSSでborderの長さを指定、または可変にしたい。

下記のように指定していますが、これだと横幅いっぱいに下の線が表示されてしまいます。

文字なりの長さ、または指定のピクセル数にしたいのですが、どのようにしたらよいでしょうか。

h3{
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

Aベストアンサー

borderの長さはそのボックスの大きさですから、ボックスの大きさを指定する事になります。
h3{
width:???px;
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

また、文字数(ボックスの内容)に合わせたい場合は、ボックスを浮動化(float)する等の方法もありますが・・・そのボックスの周りへ影響が出たり、ブラウザ毎にバグや実装の違いなどが比較的多く、扱いが面倒になるのであまりおすすめできません。

HTMLの方も修正する方法でもよければ

<h3><span>××○○</span></h3>
のようにspanで囲い、スタイルをspanに対して指定する方法もあります。

h3 span{
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

borderの長さはそのボックスの大きさですから、ボックスの大きさを指定する事になります。
h3{
width:???px;
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

また、文字数(ボックスの内容)に合わせたい場合は、ボックスを浮動化(float)する等の方法もありますが・・・そのボックスの周りへ影響が出たり、ブラウザ毎にバグや実装の違いなどが比較的多く、扱いが面倒になるのであまりおすすめできません。

HTMLの方も修正する方法でもよけ...続きを読む

Qクリックして変更した画像を他の画像をクリックしたとき戻すには?

複数の同じ画像があるとします。
そのひとつをクリックすると画像が変わるようにします。
その後別の画像をクリックすると先ほどクリックした画像が初期の状態に戻るようにしたいのですが、どのような記述にすればよいのでしょうか?
どなたかご教授おねがいします。
できるだけリンクタグは使わないようにしたいです。

Aベストアンサー

いろいろやりかたありそうですが
たとえば、グルーピングにclassをつかってこんな感じで

<script>
function change(obj){
var orgimg="a.gif";
var newimg="b.gif";
var imgs=document.getElementsByTagName('img')
for(var i=0;i<imgs.length;i++){
if(imgs[i].className==obj.className){
if(imgs[i]==obj) imgs[i].src=newimg;
else imgs[i].src=orgimg;
}
}
}
</script>

<img src="a.gif" class="hoge" onClick="change(this)">
<img src="a.gif" class="hoge" onClick="change(this)">
<img src="a.gif" class="hoge" onClick="change(this)">

いろいろやりかたありそうですが
たとえば、グルーピングにclassをつかってこんな感じで

<script>
function change(obj){
var orgimg="a.gif";
var newimg="b.gif";
var imgs=document.getElementsByTagName('img')
for(var i=0;i<imgs.length;i++){
if(imgs[i].className==obj.className){
if(imgs[i]==obj) imgs[i].src=newimg;
else imgs[i].src=orgimg;
}
}
}
</script>

<img src="a.gif" class="hoge" onClick="change(this)">
<img src="a.gif" class="hoge" onClick="change(this)">...続きを読む

Qクリックして変更した画像を他の画像をクリックしたとき戻すには?

以前、別で下記のような質問がありました。

●質問-------------------
複数の同じ画像があるとします。
そのひとつをクリックすると画像が変わるようにします。
その後別の画像をクリックすると先ほどクリックした画像が初期の状態に戻るようにしたいのですが、どのような記述にすればよいのでしょうか?
どなたかご教授おねがいします。
----------------------

上記の質問を受けての回答が下記のような感じで
●回答-------------------
<script>
function change(obj){
var orgimg="a.gif";
var newimg="b.gif";
var imgs=document.getElementsByTagName('img')
for(var i=0;i<imgs.length;i++){
if(imgs[i].className==obj.className){
if(imgs[i]==obj) imgs[i].src=newimg;
else imgs[i].src=orgimg;
}
}
}
</script>

<img src="a.gif" class="hoge" onClick="change(this)">
<img src="a.gif" class="hoge" onClick="change(this)">
<img src="a.gif" class="hoge" onClick="change(this)">
----------------------

これで終わってしまっていたのですが、画像が複数のパターンある場合はどのようにすればよいでしょうか。

例えば
「a1.gif」をクリックすると「a2.gif」に変更するようにして、さらに「b1.gif」というものがあって、クリックすると「b2.gif」に変更するように設定してあるとします。

「a1.gif」をクリックして「a2.gif」になっている状態で「b1.gif」をクリックすると「a2.gif」が「a1.gif」に戻るようにするにはどのようにすればよいでしょうか。
このb1が、c1,d1,e1・・・・とたくさんある感じです。
質問の内容がわかりづりかもしれませんが、どなたかご教示いただけると幸甚です。

宜しくお願い申し上げます。

以前、別で下記のような質問がありました。

●質問-------------------
複数の同じ画像があるとします。
そのひとつをクリックすると画像が変わるようにします。
その後別の画像をクリックすると先ほどクリックした画像が初期の状態に戻るようにしたいのですが、どのような記述にすればよいのでしょうか?
どなたかご教授おねがいします。
----------------------

上記の質問を受けての回答が下記のような感じで
●回答------------------...続きを読む

Aベストアンサー

クリックで変更したい画像("a1.gif","a2.gif","a3.gif","b1.gif","b2.gif","b3.gif"... )は、一箇所にまとまっているとします。
(つまりこの間には、他の画像が含まれない)。
その場合、画像を <div id="hoge_range">...</div> で囲います。
-----------------------------------------------------------------------
<div id="hoge_range">
<img src="a1.gif" class="hoge" onClick="change(this)">
<img src="a2.gif" class="hoge" onClick="change(this)">
<img src="a3.gif" class="hoge" onClick="change(this)">
</div>
-----------------------------------------------------------------------
また、JavaScriptを下記のように変更します。
-----------------------------------------------------------------------
<script language="JavaScript">
<!--
var class_na = "hoge";
var img1 = new Array("a1.gif","a2.gif","a3.gif");
var img2 = new Array("b1.gif","b2.gif","b3.gif");
var flag= new Array(0,0,0);

var targets= new Array();
function change(obj){
var hoge_range = document.getElementById('hoge_range');
var targets = hoge_range.getElementsByTagName('img');
for(var i=0;i<targets.length;i++){
if(targets[i]==obj && flag[i]==0){
targets[i].src=img2[i];
flag[i]=1;
} else {
if (flag[i]==1) {
targets[i].src=img1[i];
flag[i]=0;
}
}
}
}
// -->
</script>
-----------------------------------------------------------------------
これでやってみてください。

クリックで変更したい画像("a1.gif","a2.gif","a3.gif","b1.gif","b2.gif","b3.gif"... )は、一箇所にまとまっているとします。
(つまりこの間には、他の画像が含まれない)。
その場合、画像を <div id="hoge_range">...</div> で囲います。
-----------------------------------------------------------------------
<div id="hoge_range">
<img src="a1.gif" class="hoge" onClick="change(this)">
<img src="a2.gif" class="hoge" onClick="change(this)">
<img src="a3.gif" class="hoge" onClic...続きを読む

Qcssで「下よせ」ってどうやっていますか?

フロートのレフト、ライトはいいとして、

あるボックス要素内(A)に異なるボックス要素(B)をいれます。
この(B)を(A)の一番そこにはりつかせたい時にどうすれば
最もよいのでしょうか?

いいアイデアをご教授ください。

Aベストアンサー

こんなのはどうかな?

position: absolute;
bottom: 0px;

Q画像をクリックして元に戻すには

ホームページでよく見かけますが、写真等をクリックして別ページの大きな画像を表示させたあと、その画像をクリックすると前のページに戻るのをみかけます。
アンカーで元のファイル名を記述すればできますが、
特定のファイル名を指定することなく、
<INPUT TYPE="BUTTON" VALUE="前のページへ戻る" onClick="history.back();">
のようなものを、ボタンではなく画像をクリックしたときに機能するようにするには(img src=)で、どのように記述すればいいのでしょうか。
検索してみたのですが、なかなか見つけられませんのでよろしくお願いします。

次のような例を見つけましたが
このTABLEを使わないで直接画像のみで指定したいのですが。
<script language="javascript">
function onPh(img){
myImg.src = img
myTable1.style.display = "block"
myTable2.style.display = "none"
}
function offPh(){
myTable1.style.display = "none"
myTable2.style.display = "block"
}
</script>
-------
<TABLE border="3" table id="myTable1" width="50%" height="50%" onclick="offPh()" style="display:none;">
<tr>
<td><img id="myImg" width="100%"></td>
</tr>
</TABLE>
<table border="0" id="myTable2" style="display:block;">
<tr>
<td><FONT color="#660066"><img src="hit3.jpg" width="80" height="60" onclick="onPh(this.src)"><br>

ホームページでよく見かけますが、写真等をクリックして別ページの大きな画像を表示させたあと、その画像をクリックすると前のページに戻るのをみかけます。
アンカーで元のファイル名を記述すればできますが、
特定のファイル名を指定することなく、
<INPUT TYPE="BUTTON" VALUE="前のページへ戻る" onClick="history.back();">
のようなものを、ボタンではなく画像をクリックしたときに機能するようにするには(img src=)で、どのように記述すればいいのでしょうか。
検索してみたのですが、なかなか見つけ...続きを読む

Aベストアンサー

#1です。

状況が上手く再現できないので予想なのですが…

<span>で"position: absolute;"を使っていますが、
このタグのレイヤーがクリックで戻したい<IMG>よりも
上位に来ていて、かつ被さっているということはないでしょうか。

もしそうならonClickイベント自体が発生していない可能性があります。
試しに、spanタグにonClick()を乗せるとどうでしょう。
もし、動作してしまうようスタイルに<span>と<IMG>のスタイルに"z-index"を追加して
明示的に<IMG>を上位に宣言してみると良いと思います。

参考URL:http://www.htmq.com/style/z-index.shtml

QIMGタグで画像の繰り返し使用は…

IMGについて質問させてください。

ページの背景として画像を使う場合、画像は縦・横方向に繰り返し使われてページ全面に貼り付けられると思います。
IMGタグで指定する画像を縦方向に繰り返し使うことはできますでしょうか?
テーブルの中で使用する画像なのですが、テーブルの高さが可変なために高さ指定ができないのです。

よろしくお願いします。

Aベストアンサー

IMGタグで繰り返し表示の背景を指定することが出来ないか、と言う趣旨にとって宜しいでしょうか?
答えは「出来ません」。もう少し詳しく言うとIMGタグは画像をそのまま埋め込む機能しか持たないため背景表示には不向きです。
入らないところを自動で切ったりなんだりするためには背景画像としての指定が必要で、
背景画像として折り返し設定などを行う場合はCSSが無ければ無理です。
ま、やり方は既に出ている通りなのですけど、勝手に解説しときます。
覚えておくといいことがあると思いますよ…多分。
…ってかCSSリファレンスのあるサイトである程度予備知識をつけておくと今後の質問の手間が省けたり、或いは質問が相手に伝わりやすくなったりすると思います。
http://www.tagindex.com/
http://www.htmq.com/
http://masaboo.cside.com/
http://heo.jp/tag/
http://www2.plala.or.jp/Cool/okite/


このQ&Aを見た人がよく見るQ&A

人気Q&Aランキング

おすすめ情報