質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

87.58%

html,cssを使ったリンク付の複数画像のフェードイン・アウト表示について

解決済

回答 2

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 4,924

score 15

前提・実現したいこと

CSSを使って複数のリンク付きの画像をフェードイン・アウトで表示したいです。

発生している問題・エラーメッセージ

複数の画像のフェードイン・アウト表示は出来ているが、<a href>で画像にリンクを付けようとすると複数の画像が同時に表示されてしまいます。

該当のソースコード

<head>

<STYLE type="text/css">
<!--
.Class{
color : white;
}
.stylename{
color : white;
}
-->

<!--
a { text-decoration:none; }
a:link, a:visited { color:white; }
-->






<!--

.photo-show { 
    height: 440px;
    margin: 30px auto;
    max-width: 100%;
    position: relative;
    width: 900px; 
}

.photo-show img { 
    animation: show 21s infinite;
    -webkit-animation: show 21s infinite;
    height: auto;
    max-width: 100%;
    opacity: 0;
    position: absolute; 
}

/*アニメーション*/

@keyframes show {
    0% {opacity:0}
    10% {opacity:1}
    20% {opacity:1}
    30% {opacity:0}
 }

}



.photo-show img:nth-of-type(1) {
    animation-delay: 0s;

}

.photo-show img:nth-of-type(2) {
    animation-delay: 7s;

}

.photo-show img:nth-of-type(3) {
    animation-delay: 14s;

}


-->

</STYLE>



</head>

<body>

<div class="photo-show">
    <a href="html1.html"><img src="img/img1.jpg"></a>
    <a href="html2.html"><img src="img/img2.jpg"></a>
    <a href="http://example.jp/"><img src="img/img3.img"></a>


</div>


</body>
</html>

試したこと

フェードイン・アウトの時間を変えたり、画像の表示場所を変えたりしました。

補足情報(言語/FW/ツール等のバージョンなど)

html

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • kei344

    2017/07/03 17:36 編集

    質問文のコードはコードブロックで囲んでいただけませんか? ```(バッククオート3つ)で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。また、例示用ドメインはご自身で所有されていない限り example.com, example.jp, example.co.jp など例示用に予約されたドメイン名を利用してください。 http://www.atmarkit.co.jp/fwin2k/win2ktips/801exampledom/exampledom.html

    キャンセル

  • imuzi.ayustet

    2017/07/03 17:51

    ご指摘の通り、コードを```で囲み、例示用ドメインをexample.jpへ変更いたしました。

    キャンセル

回答 2

checkベストアンサー

+4

.photo-show imgとなってる4箇所を.photo-show aに直してみましょう。

追記

これらの追加でいけるかなと思います。

.photo-show a { 
animation: show 21s infinite;
-webkit-animation: show 21s infinite;
max-width: 100%;
opacity: 0;
position: absolute; 
height: 0;/* 追加 */
overflow:hidden;/* 追加 */
}

@keyframes show {
0% {opacity:0;height: auto;/* 追加 */}
10% {opacity:1;}
20% {opacity:1;}
30% {opacity:0;}
}

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/07/03 17:50

    ginさん

    ご回答ありがとうございます。
    ご指摘の通り直したところ、画像は正常に表示されるようになりました。

    しかし、どの画像をクリックしてもリンク先がexample.jpになってしまいます。

    それぞれ独立したリンク先へ誘導したいのですが、出来るでしょうか。

    キャンセル

  • 2017/07/04 10:10

    ginさん

    追加回答ありがとうございます。
    追記の内容を実践したところ、各画像の先のリンクへ飛ぶことが出来ました。

    回答の早さからベストアンサーとさせていただきました。

    ありがとうございます。

    キャンセル

+2

photo-showは見えないだけでモノ(画像)自体は重ねあわされて存在するわけですから、リンクとしてはz-indexが高いものが一番上になり、常に鎮座するわけですね。
今回はz-indexを特に指定していないので、タグの後列にある3つ目のリンクが一番上になっているんだと思います。

これを回避する方法として私が思いつくものは、例えばJavaScriptでアニメーションのイベントを監視し、アニメーションが始まったモノのz-indexを高く設定し、アニメーションが終わったモノはz-indexを低くすると言うようなものでしょうか。

<HEAD>内に下記のJSを書いてみてください。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
  $(".photo-show a").on('animationstart', function(){
    $(this).css('z-index',100);
  });
  $(".photo-show a").on('animationend', function(){
    $(this).css('z-index',1);
  });
});
</script>

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/07/04 10:14 編集

    kunaiさん

    ご回答ありがとうございます。

    コードをhead内に追記したところ、各画像の独立したリンク先へ飛ぶことが出来ました。

    z-indexの概念もご丁寧に教えて頂いた点も勉強になりました。
    タテヨコだけでなく、高さも設定することが出来るんですね。

    ベストアンサーが複数つけられたら、kunaiさんにも差し上げたい内容でした。

    ご回答ありがとうございます。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 87.58%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る