No.4ベストアンサー
- 回答日時:
No.3
- 回答日時:
◆ 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">
<!--
var change = function() {
if (change.flag) return;
change.flag = 1;
fade(100, -3);
};
function fade(o, d) {
var e = document.getElementById("target");
f();
function f() {
o += d;
var op = o>100?100:o<0?0:o;
if (o == op) {
setOpacity(e, op);
setTimeout(arguments.callee, 30);
} else {
if (change.flag != 1) return;
change.flag = 2;
e.src = "B.jpg";
fade(0, 2);
}
}
}
function setOpacity(e, o) {
/*@cc_on @if(1)
e.style.filter = "alpha(opacity=" + o + ")";
@else*/ e.style.opacity = o/100; /*@end@*/
}
//-->
</script>
<img src="C.jpg" alt="" onclick="change()">
<hr>
<img id="target" src="A.jpg" alt="">
No.2
- 回答日時:
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>
No.1
- 回答日時:
>CSSである画像をクリックするとページ内の
>別の場所にある画像が変わるようにする
そういったソースを作るのはCSS内ではありません。htmlファイル内のソースに記述します。
普通に「ある画像」にハイパーリンクを設定して変えたい画像を呼び出すか、Javascriptを使うなどすればいいかと思います。
>画像の入れ替わりがゆるやかに変わる
これについては「javascript トランジション」で検索するといいのではないかと。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・ゆるやかでぃべーと タイムマシンを破壊すべきか。
- ・「I love you」 をかっこよく翻訳してみてください
- ・歩いた自慢大会
- ・許せない心理テスト
- ・字面がカッコいい英単語
- ・昔のあなたへのアドバイス
- ・かっこよく答えてください!!
- ・あなたが好きな本屋さんを教えてください
- ・スタッフと宿泊客が全員斜め上を行くホテルのレビュー
- ・【大喜利】【投稿~8/27】 こんなガソリンスタンド二度と来るか!なぜそう思った?
- ・これ何て呼びますか Part2
- ・人生で一番思い出に残ってる靴
- ・【お題】動物のキャッチフレーズ
- ・【お題】甲子園での思い出の残し方
- ・ゆるやかでぃべーと すべての高校生はアルバイトをするべきだ。
- ・「それ、メッセージ花火でわざわざ伝えること?」
- ・自分用のお土産
- ・人生で一番お金がなかったとき
- ・一番好きなみそ汁の具材は?
- ・泣きながら食べたご飯の思い出
- ・ちょっと先の未来クイズ第1問
- ・ゴリラ向け動画サイト「ウホウホ動画」にありがちなこと
- ・初めて自分の家と他人の家が違う、と意識した時
- ・単二電池
- ・チョコミントアイス
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
CSSを使わずにマウスオーバーで...
-
スマホで、画像をクリックする...
-
拡張子無しで画像を表示したいです
-
画像クリックで別の画像
-
ボタンを押したままにする。
-
背景が透明なリンクボタンで、...
-
スライドショーの上にロゴマー...
-
HTMLでHP制作、画像の横にアン...
-
クリックしても、リンクに飛ば...
-
WEB作成の際、CSSである画像を...
-
複数のボタンで1つのエリアに...
-
「DecareステートメントにPtrSa...
-
写真を最小化させない方法??
-
【SEO】1ページ内のリンク数の...
-
カウンターのHTMLソースを教え...
-
バナ―広告
-
クリッカブルマップがうまく使...
-
アドレスがあっているのにバナ...
-
HTMLのレイヤーとは?
-
CGI Perl 画像の出し方
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
ボタンを押したままにする。
-
IMGタグでTIFF画像を表示
-
期間ごとに画像表示を切り替え...
-
バナーの貼り方とバナーにリン...
-
拡張子無しで画像を表示したいです
-
クリックしても、リンクに飛ば...
-
タイトルバーに画像を入れるHTM...
-
クリッカブルMAP領域が分かる様...
-
スライドショーの上にロゴマー...
-
pngやjsの後ろの英数字の意味は...
-
画像クリックでクリップボード...
-
HTMLにQRコードを挿入する方法
-
<A href= と<IMG srcの使い分け
-
カーソルを合わせると文字が出...
-
背景が透明なリンクボタンで、...
-
form以外でのpostってできますか?
-
HTML上の画像を結合する方法が...
-
複数のボタンで1つのエリアに...
-
リンクバナーのHTMLタグ。画像...
-
CSSなどでHTML全体の表示を拡大...
おすすめ情報