2

私は、写真のさまざまな部分（テキストではない）を別のページやWebサイトにリンクするというアイデアを持っています。実際に別の写真を作成したり、それらを互いに近づけたりせずに、1つの完全な写真のように見せたいと考えています。 。jQueryや純粋なJavaScriptなど、JavaScriptのバリエーションを使用してこれを実現する方法について、ここにいる人はいますか？ありがとう！:-)

4

4 に答える 4

5

画像のさまざまな部分をインタラクティブにしたいのではないでしょうか。つまり、ユーザーは画像のさまざまなセクションをクリックしてさまざまな場所に移動するか、アニメーションを実行する必要があります。

それについて行くには複数の方法があります。

  1. 画像マップ。

以下のように、画像上にさまざまなクリック可能なセクションを作成できます。

<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">

<map name="planetmap">
  <area shape="rect" coords="0,0,82,126" href="sun.htm" alt="Sun">
  <area shape="circle" coords="90,58,3" href="mercur.htm" alt="Mercury">
  <area shape="circle" coords="124,58,8" href="venus.htm" alt="Venus">
</map>

2。近くに配置されたさまざまなdiv（または他の適切なコンテナ、さらにはimgタグ自体）を作成し、CSS：Background-positionプロパティを使用します。何かのようなもの

    <div style="background-image:url('myImage.png'); background-position:0 0; width:50px height:50px" >
    </div>
  <div style="background-image:url('myImage.png'); background-position:50 0; width:50px height:50px" >
    </div>
  <div style="background-image:url('myImage.png'); background-position:0 50; width:50px height:50px" ></div>
  <div style="background-image:url('myImage.png'); background-position:50 50; width:50px height:50px" >
</div>

背景位置についてもっと知る

イメージスプライトもご覧ください

于 2013-03-10T15:35:50.390 に答える
1

HTMLイメージマップを試しましたか...？

イメージマップは、画像内の領域がリンクされている画像です。イメージの作成には、、、およびタグの使用が含ま<IMG ...>れ<MAP ...>ます<AREA ...>。

于 2013-03-10T15:34:03.643 に答える
0

確かにCSSで十分です。HTML：

<div id="linkPictureThing">
    <img src="yourimgage.png" title="" alt=""/>
    <a href="" class="imageSection"></a>
    <a href="" class="imageSection"></a>
    <a href="" class="imageSection"></a>
    <a href="" class="imageSection"></a>
</div>

CSS：

a,img{border:none;}
#linkPictureThing>img{
    width:100%;
    height:100%;/*or auto */
    z-index:-1;
}

リンク：

#linkPictureThing>a.imageSection{
    display:inline-block;/*Sorry [lt IE 8] lover*/
    width:50%;
    height:50%;
    z-index:1;
    content:'';
}
a.imageSection:hover{
    background:#FF0000;
    opacity:0.8;
}

または、リンクを使用して相対/絶対ポジショニングを試して、よりユニークな場所を取得することもできます。

#linkPictureThing>a.imageSection:first-child{
    position:absolute;
    top:20;
    left:0;
}
于 2013-03-10T15:43:45.547 に答える
0

最も正しい意味的な方法は、画像マップを使用することです。

最も簡単な方法は、画像の上にdivを配置することです。このdivで、異なる領域に2つのクリック可能なブロックを作成します。

次のコードを使用してhttp://jsfiddle.net/3mQV2/にある例。この例の利点は、検索エンジンが両方のリンクにインデックスを付けることができることです。

HTML

<img src="http://lorempixel.com/400/200/" />
<div>
    <a href="test1"></a><!--
 --><a href="test2"></a>    
</div>

CSS

img {
    width:400px;
    height:200px;
    position:absolute;
}
div {
    width:400px;
    height:200px;
    position:relative;
}
div a {
    display:inline-block;
    width:200px;
    height:200px;   
}
div a:nth-child(1):hover {
    background-color:blue;
}
div a:nth-child(2):hover {
    background-color:red;
}
于 2013-03-10T15:43:59.137 に答える