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

解決済

質問者：yusamanman
質問日時：2010/09/06 20:00
回答数：4件

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

通報する

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

質問の本文を隠す

回答 (4件)

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

No.4ベストアンサー

回答者： zeff#1
回答日時：2010/09/07 15:06

CSS（とHTML）だけで実現している例は１つだけ知っています。

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

- 0
- 件

通報する

No.3

回答者： fujillin
回答日時：2010/09/07 12:55

◆ 1）iframeを利用して通常のハイパーリンクで処理する

<a href="B.jpg" target="frm1"><img src="C.jpg" alt=""></a>
<hr>
<iframe name="frm1" src="A.jpg"></iframe>

◆ 2）javascriptで画像要素のsrcを変更
　（即時に画像が変わる）
<img src="C.jpg" alt="" onclick="document.getElementById('target').src = 'B.jpg'">
<hr>
<img id="target" src="A.jpg" alt="">

◆ 3）2）の応用で、画像の変更をゆっくりと行なう
（ちゃんと書くと面倒なので簡略版です）
ライブラリ等を使うともっと簡単に記せます。

<script type="text/javascript">

</script>
<img src="C.jpg" alt="" onclick="change()">
<hr>
<img id="target" src="A.jpg" alt="">

- 0
- 件

通報する

No.2

回答者： yyr446
回答日時：2010/09/07 10:23

CSSでjavascriptを動作させるには、IE限定なら、A要素の疑似クラス（:hover,:active）

と behavior:プロパティで出来ますが、CSSでjavascriptを指定する必要性は、
ほとんどないですね（主に古いIEで、非サポートの機能を救うために使われる）

直接Javascriptでやってしまいましょう。
「入れ替わりがゆるやかに変わる」のような視覚効果は、初心者は難しいかも
しれませんが、「jQuery」のようなjavascriptライブラリーを使えば、簡便に
コードが書けます。

http://semooh.jp/jquery/api/effects/
http://api.jquery.com/category/effects/

例えば、ご要望の機能だと、こんな感じです。
<head>

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery", "1.4");</script>
<script type="text/javascript">
$(function(){
$("#img1).click(function(){
$("#img2").fadeOut("slow");
$("#img2").attr("src","hoge.jpg");
$("#img2").fadeIn("slow");
});
});
</script>
</head>
<body>
---
<img id="img1" src="button.jpg" alt="画像切り替えボタン">
---
<img id="img2" src="fuga.jpg" alt"画像">
---
</body>

- 0
- 件

通報する

No.1

回答者： Safe_Mode
回答日時：2010/09/06 20:36

>CSSである画像をクリックするとページ内の

>別の場所にある画像が変わるようにする
そういったソースを作るのはCSS内ではありません。htmlファイル内のソースに記述します。
普通に「ある画像」にハイパーリンクを設定して変えたい画像を呼び出すか、Javascriptを使うなどすればいいかと思います。

>画像の入れ替わりがゆるやかに変わる
これについては「javascript　トランジション」で検索するといいのではないかと。