画像サイズが異なるクリック可能な画像領域

-2

スライドショーサイトでは、300 * 250〜1200 * 1800のさまざまなサイズの画像を表示する必要があります。私はイメージマップを認識していますが、固定ディメンションの要件、つまりcoords = "0,0,82,126"のような座標を使って特定の領域を定義する必要があります。私は2つの質問があります： 1）左側の画像領域の10％が前の画像にリンクし、右側の画像領域の10％が次の画像にリンクするように、可変にする方法がありますか？たとえば、画像が300×300ピクセルのサイズの場合、左側から30px（水平バー領域）、右側から30pxはクリック可能な領域になります 2）CSSの左矢印と右矢印を表示する方法はありますか上記の分野では、私たちが通常Facebookのアルバムをナビゲートしているのと同じように見えます。唯一の違いは、これらの左右の矢印が、実際には、画像上の左右のクリック可能な領域の上に透明な形で表示され、矢印の画像の幅の画像と重なっていることです。画像サイズが異なるクリック可能な画像領域

ありがとうございました。

出典

2016-05-15 user6337701

これはあなたを始めたかもしれません。

html { 
 
    font-size: 10px; 
 
} 
 
.wrapper { 
 
    width: 1%; 
 
    display: table; 
 
} 
 
#images { 
 
    position: relative; 
 
} 
 
#left, #right { 
 
    position: absolute; 
 
    top: 0; 
 
    width: 10%; 
 
    height: 100%; 
 
    opacity: 0.8; 
 
    background-color: lightgray; 
 
} 
 
#left { 
 
    left:0; 
 
} 
 
#right { 
 
    right:0; 
 
} 
 
.arrow { 
 
position: absolute; 
 
top: 50%; 
 
width: 2rem; 
 
height: 2rem; 
 
background: transparent; 
 
border-top: .4rem solid white; 
 
border-right: .4rem solid white; 
 
box-shadow: 0 0 0 lightgray; 
 
transition: all 200ms ease; 
 
} 
 
.arrow.left { 
 
    left: 40%; 
 
    transform: translate3d(0, -50%, 0) rotate(-135deg); 
 
} 
 
.arrow.right { 
 
    right: 40%; 
 
    transform: translate3d(0, -50%, 0) rotate(45deg); 
 
} 
 
.arrow:hover { 
 
    border-top: .4rem solid white; 
 
    border-right: .4rem solid white; 
 
    box-shadow: .2rem -.2rem 0 white; 
 
} 
 
.arrow:hover.left { 
 
    left: 10px; 
 
} 
 
.arrow:hover.right { 
 
    right: 10px; 
 
}

<html> 
 
</body> 
 
</html> 
 
<body> 
 
    <div class="wrapper"> 
 
    <div id="images"> 
 
     <img src="http://i.istockimg.com/file_thumbview_approve/39758696/6/stock-photo-39758696-man-on-top-of-skyscraper.jpg"> 
 
    
 
     <div id="left"><a href="#" class="arrow left"></a></div> 
 
     <div id="right"><a href="#" class="arrow right"></a></div> 
 
    </div> 
 
    </div> 
 
</body> 
 
</html>

出典

2016-05-15 18:10:30 mhatch

完璧に動作します！まさに私が探していたもの！ありがとう、トン！ – user6337701

素晴らしい！あなたは答えを受け入れたものとしてマークできますか？（チェックマークをクリックしてください） – mhatch

完了！再度、感謝します – user6337701

画像サイズが異なるクリック可能な画像領域

答えて

関連する問題