다른 이미지에서 이미지를 조정하여 html을 사용하여 다른 페이지로 리디렉션하는 방법은 무엇입니까?

Question

4 개의 이미지가 포함 된 페이지를 만들려고합니다. 절대적인 이미지가 있고 다른 이미지의 각 이미지는 상대적이며 다른 페이지로 리디렉션됩니다. 문제는 서로 평행하게 만들기 위해서입니다. 필요한 위치에 img를 조정하기 위해 좌/우 패딩을 사용했는데 첨부 된 스크린 샷과 같이이 패딩의 아무 곳이나 누르면 페이지로 리다이렉트 할 수있는 주된 문제가있었습니다. 정말이 공간 전체가 아닌 다른 페이지로 방향을 바꿀 수있는 img 만 만들고 싶습니다.

.

는이 코드

<div> 
    <img src="./assets/Images/Rectangle 1.png" style="position: absolute;" alt="Main Design" width="100%"> 
    <a href="https://www.w3schools.com"> 
    <img src="./assets/Images/Account.png" style="position: relative; padding-left: 180px; padding-top: 220px;" alt="Accounts Management"> 
    </a> 
    <a href="https://www.w3schools.com"> 
    <img src="./assets/Images/Bus.png" style="position: relative; padding-left: 150px; padding-top: 220px;" alt="Bus Management"> 
    </a> 
    <a href="https://www.w3schools.com"> 
    <img src="./assets/Images/Line.png" style="position: relative; padding-left: 150px; padding-top: 220px;" alt="Line Management"> 
    </a> 

이 문제를 해결하는 방법에 대한 모든 추천을 썼다?

Answer 1

앵커 요소에 여백 속성을 사용해 보셨습니까?

올바른 위치와 아마도 다른 속성에 들어가려면 margin- (위쪽, 왼쪽, 오른쪽, 아래쪽)을 사용할 수 있다고 생각합니다. 이렇게하면 앵커 요소의 유일한 콘텐츠는 패딩 공간이 아닌 이미지가됩니다. .

뭔가 같은 :

이

<div> 
    <img src="./assets/Images/Rectangle 1.png" style="position: absolute;" alt="Main Design" width="100%"> 
    <a href="https://www.w3schools.com" style="position: relative; margin-left: 180px; margin-top: 220px;"> 
    <img src="./assets/Images/Account.png" style="position: relative;" alt="Accounts Management"> 
    </a> 
    <a href="https://www.w3schools.com" style="position: relative; margin-left: 150px; margin-top: 220px;"> 
    <img src="./assets/Images/Bus.png" style="position: relative; " alt="Bus Management"> 
    </a> 
    <a href="https://www.w3schools.com" style="position: relative; margin-left: 150px; margin-top: 220px;"> 
    <img src="./assets/Images/Line.png" style="position: relative;" alt="Line Management"> 
    </a> 
</div>