Schaltfläche auf einem Bild In HTML

-1

Ich arbeitete an diesem Code und konnte die Schaltfläche mit einem komplexen Code an den gewünschten Ort platzieren, aber ich möchte es einfacher machen. Ich kann jetzt die Schaltfläche auf dem Bild platzieren und seine obere Randposition ändern, aber ich kann seine linke Randposition nicht ändern. Ich will jeden Knopf für den Planeten, aber wie gesagt, ich kann ihn nicht mit einem einfachen Code dorthin platzieren, wo die Planeten auf dem Bild sind.
Irgendwelche Ideen, wo das Problem liegt?Schaltfläche auf einem Bild In HTML

.upfront { 
 
    margin-top: 0px; 
 
    margin-left: 0px; 
 
    margin-right: 0px; 
 
    margin-left: 155px; 
 
    margin-right: 23px; 
 
} 
 

 
.menu {} 
 

 
.spaceBoard { 
 
    position: relative; 
 
} 
 

 
.previews { 
 
    left: 173px; 
 
    position: releative; 
 
} 
 

 
.button { 
 
    position: absolute; 
 
    margin-left: 215; 
 
    margin-top: 315px; 
 
    z-index: 2; 
 
    border-radius: 50%; 
 
    border: none; 
 
}

<!DOCTYPE> 
 
<html xmlns="http://www.w3.org/1999/xhtml"> 
 

 
<head> 
 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
 
    <title>Başlıksız Belge</title> 
 
    <link rel="stylesheet" type="text/css" href="css/style.css" /> 
 
</head> 
 

 
<body background="https://i.hizliresim.com/DyZ49m.png"> 
 
    <script> 
 
    function bgClicked() { 
 
     var id = document.getElementById("bgClicked"); 
 
     id.style.visibility = "visible"; 
 
     document.getElementById("bgMAIN").style.display = "none"; 
 
    } 
 
    </script> 
 
    <center> 
 
    <div class="upper"><img src="https://i.hizliresim.com/vJ9n5m.png" width="75%" height="75%" /></div> 
 
    <!--//<div><img src="Pics/2_.png" style="right:9px; top:12 position:relative;" /></div>--> 
 
    <div class="spaceBoard"> 
 
     <input type="button" class="button" /> 
 
     <img src="https://i.hizliresim.com/Eyo5pB.png" id="bgMAIN" onclick="bgClicked()"> 
 
     <img src="https://i.hizliresim.com/mJB15Z.png" style="visibility:hidden;" class="previews;" id="bgClicked;"> 
 
    </div> 
 
    </center> 
 
</body> 
 

 
</html>

Quelle

2017-12-19 Umutcan Bahadır

warum zweimal margin-left und margin wollen rechts –

Nur ein Trash-Code, der da hart ist versucht für eine Lösung –

verpasst px in margin-left unten, jetzt ist es bewegen, wie Sie

.upfront{ 
 
\t margin-top: 0px; 
 
\t margin-left: 0px; 
 
\t margin-right: 0px; 
 
\t margin-left: 155px; 
 
\t margin-right: 23px; 
 
} 
 
.menu{ 
 
\t 
 
} 
 
.spaceBoard{ 
 
\t position:relative; 
 
\t 
 
\t 
 
} 
 
.previews{ 
 
\t left:173px; 
 
\t position:releative; 
 

 
} 
 
.button{ 
 
\t position:absolute; 
 
\t margin-left:215px; 
 
\t margin-top:315px; 
 
\t z-index:2; 
 
\t border-radius:50%; 
 
\t border:none; \t 
 
} 
 

 

 

 

 

 

 

 

 

 

 

 
s

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
 
<html xmlns="http://www.w3.org/1999/xhtml"> 
 
<head> 
 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
 
<title>Başlıksız Belge</title> 
 
<link rel="stylesheet" type="text/css" href="css/style.css" /> 
 
</head> 
 

 
<body background="https://i.hizliresim.com/DyZ49m.png"> 
 
<script> 
 
\t function bgClicked(){ 
 
\t \t var id = document.getElementById("bgClicked"); 
 
\t \t id.style.visibility="visible"; 
 
\t \t document.getElementById("bgMAIN").style.display="none"; 
 
\t } 
 
\t 
 
</script> 
 
\t <center> 
 
\t \t <div class="upper"><img src="https://i.hizliresim.com/vJ9n5m.png" width="75%" height="75%"/></div> 
 
     <!--//<div><img src="Pics/2_.png" style="right:9px; top:12 position:relative;" /></div>--> 
 
     <div class="spaceBoard"> 
 
     <input type="button" class="button" /> 
 
    \t <img src="https://i.hizliresim.com/Eyo5pB.png" id="bgMAIN" onclick="bgClicked()"> 
 
     
 
\t \t <img src="https://i.hizliresim.com/mJB15Z.png" style="visibility:hidden;"class="previews;" id="bgClicked;"> 
 
     
 
     </div> 
 
     
 
</body> 
 
</html>

Quelle

2017-12-19 08:43:30 Gattbha

Hahah, ich habe das seit Tagen versucht lmao Ich war mir sicher, dass es funktionierte, ohne px hinzuzufügen. Diese kleinen Details. Danke mann –

@ UmutcanBahadır Willkommen Kumpel – Gattbha

Schaltfläche auf einem Bild In HTML

Antwort

Verwandte Themen