画像にリンクを張る方法は？

私はHTML、CSS、Javascriptを学び、ウェブサイトを作ろうとしています。今、私がやりたいことは、画像上のリンクを置くことである、それは次のようになります。今画像にリンクを張る方法は？

を、私は、私は私のリンクのスタイリングを絶対的および相対的な位置を配置しようと、何も作品でした。すべてが画像の前にそれらのリンクを置きます。ここに私のHTMLとCSSのコードがあります。たぶん私は何か間違ったことをしています。

body { 
 
    background-image: url("img/bg.png"); 
 
    margin: 0px 0px 0px 0px; 
 
} 
 
img { 
 
    width: 100%; 
 
    background: no-repeat; 
 
    position: relative; 
 
} 
 
#header #nav { 
 
    float: right; 
 
} 
 
a { 
 
    font-family: 'Open Sans Condensed', sans-serif; 
 
    border: none; 
 
    background-color: transparent; 
 
    font-size: 20px; 
 
    color: black; 
 
    text-decoration: none; 
 
    margin-left: 30px; 
 
    margin-right: 20px; 
 
    font-weight: 700; 
 
    text-transform: uppercase; 
 
} 
 
a:focus, 
 
a:hover { 
 
    color: #bebcc1; 
 
}

<!DOCTYPE html> 
 

 
<html> 
 

 
<head> 
 
    <meta charset="UTF-8"> 
 
    <link type="text/css" rel="stylesheet" href="style.css"> 
 
    <link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:700" rel="stylesheet"> 
 
</head> 
 

 
<body> 
 
    <div id="header"> 
 
    <div id="nav"> 
 
     <a href="google.lt">Meniu</a> 
 
     <a href="google.lt">Istorija</a> 
 
     <a href="google.lt">Atsiliepimai</a> 
 
     <a href="google.lt">Kontaktai</a> 
 
    </div> 
 
    <img src="img/sumustinis.jpg"> 
 
    </div> 
 
</body> 
 

 
</html>

出典

2017-02-15 Arminas Šaltenis

「画像にリンクを貼る」とはどういう意味ですか？ – DamiToma

私はウェブサイトの異なる部分に4つのリンクを持っています。ナビゲーションバーに似ています。 –

イメージをクリックしてページにリダイレクトしますか？ – DamiToma

を、 divの内部にリンクと画像の両方を配置しようとするかもしれません。

.container { 
 
    position: relative; 
 
    } 
 

 
.container img { 
 
    width: 100%; 
 
    } 
 

 
.links { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    }

<div class="container"> 
 
    <img src="http://placehold.it/300x300"> 
 
    <div class="links"> 
 
    <ul> 
 
     <li> test </li> 
 
     <li> test </li> 
 

 
    </ul> 
 
    </div> 
 
</div>

出典

2017-02-15 15:28:39 Plenarto

これは私のために働いた。ありがとうございました！ –

それは素晴らしいです。 :)この答えをあなたの問題のための適切な解決策としてマークしていただければ幸いです。 – Plenarto

簡単な方法はanchorタグで画像を周りにラップすることです。

body { 
 
    background-image: url("img/bg.png"); 
 
    margin: 0px 0px 0px 0px; 
 
} 
 
img { 
 
    width: 100%; 
 
    background: no-repeat; 
 
    position: relative; 
 
} 
 
#header #nav { 
 
    float: right; 
 
} 
 
a { 
 
    font-family: 'Open Sans Condensed', sans-serif; 
 
    border: none; 
 
    background-color: transparent; 
 
    font-size: 20px; 
 
    color: black; 
 
    text-decoration: none; 
 
    margin-left: 30px; 
 
    margin-right: 20px; 
 
    font-weight: 700; 
 
    text-transform: uppercase; 
 
} 
 
a:focus, 
 
a:hover { 
 
    color: #bebcc1; 
 
}

<!DOCTYPE html> 
 

 
<html> 
 

 
<head> 
 
    <meta charset="UTF-8"> 
 
    <link type="text/css" rel="stylesheet" href="style.css"> 
 
    <link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:700" rel="stylesheet"> 
 
</head> 
 

 
<body> 
 
    <div id="header"> 
 
    <div id="nav"> 
 
     <a href="google.lt">Meniu</a> 
 
     <a href="google.lt">Istorija</a> 
 
     <a href="google.lt">Atsiliepimai</a> 
 
     <a href="google.lt">Kontaktai</a> 
 
    </div> 
 
    <a href="#"><img src="img/sumustinis.jpg"></a> 
 
    </div> 
 
</body> 
 

 
</html>

出典

2017-02-15 15:22:42 TheDarkKnight

@OP、これはあなたのために働くかどうか確認できますか？ – TheDarkKnight

画像にリンクを置くために、この試してください：あなたは、画像の領域内のリンクをリストに入れたい場合は

<a href="http://stackoverflow.com"><img src="#" alt="img"></a>

出典

2017-02-15 15:23:19

これを行うのは非常に簡単です。イメージをタグに含めるだけです。たとえば、画像をクリックしてhttp://www.google.comにリダイレクトする場合は、このコードを使用するだけです。

<!DOCTYPE html> 
<html> 
<body> 
<a href="http://www.google.com"><img src="IMAGE_URL" alt="Image"></a> 
</body> 
</html>

出典

2017-02-15 15:29:15 DamiToma

画像にリンクを張る方法は？

答えて

関連する問題