Arka Plan Resmi alanları tıklanabilir ve </p> <p>

-1

Arka Plan Resmi alanları tıklanabilir ve </p> <p>

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<meta name="viewport" content="width=device-width" /> 
 
<title>LED Control</title> 
 
<style> 
 
    \t html { 
 
    background: url(Screen_Shot_20160101_at_181141.png) no-repeat fixed; 
 
    -webkit-background-size: contain; 
 
    -moz-background-size: contain; 
 
    -o-background-size: contain; 
 
    background-size: contain; 
 
    background-size:100% 100%; 
 
} 
 
</style> 
 

 
</head> 
 
     <body> 
 
     Home Control: 
 
     <form method="get" action="gpio.php"> 
 

 
<br> 
 

 
<input type="submit" name="alloff" value="All Off"> 
 
<br> 
 
     </form> 
 

 

 
<form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post"> 
 

 

 
<br> 
 

 
ROOM NOA: 
 
<br> 
 

 

 
     <button type="submit" name="remote" value="5365060" />Lights On</button> 
 
     <button type="submit" name="remote" value="5365057" />Lights Off</button> 
 

 
<br> 
 
<br> 
 
ROOM AMIT: 
 
<br> 
 
<br> 
 

 
<button type="submit" name="remote" value="10054728" />Lights On</button> 
 
     <button type="submit" name="remote" value="10054724" />Lights Off</button> 
 

 

 
<br> 
 
Electric Shutters: 
 
<br> 
 
<br> 
 
Living Room: 
 

 
\t <button type="submit" name="remote_o" value="-g 21195 -n 8 -v" />Open</button> 
 
     <button type="submit" name="remote_c" value="-g 21195 -n 16 -v" />Close</button> 
 

 
    </form> 
 

 
     <?php 
 
     $setmode17 = shell_exec("/usr/local/bin/gpio -g mode 17 out"); 
 
     
 

 
if (isset($_POST['remote'])) { 
 
    shell_exec('sudo /home/pi/433Utils/RPi_utils/codesend '.$_POST["remote"].'> /var/tmp/remote.log'); 
 
    
 
} 
 

 

 
    
 
else if (isset($_POST['remote_o'])) { 
 
    shell_exec('sudo /home/pi/livolo/transmitters/livolo/livolo '.$_POST["remote_o"].'> /var/tmp/remote_c.log'); 
 
    
 
} 
 

 
else if (isset($_POST['remote_c'])) { 
 
    shell_exec('sudo /home/pi/livolo/transmitters/livolo/livolo '.$_POST["remote_c"].'> /var/tmp/remote_c.log'); 
 
    
 
} 
 

 

 
    else if(isset($_GET['alloff'])){ 
 
     shell_exec('sudo /home/pi/433Utils/RPi_utils/codesend 10054724');    
 
     shell_exec('sudo /home/pi/433Utils/RPi_utils/codesend 5365057'); 
 
       echo "All is off"; 
 
     } 
 

 

 
     ?> 
 
     </body> 
 
</html>

duyarlı Duyarlı bir arka plan resmi olan bir HTML sayfası var. Arka plan resmim üzerinde tıklanabilir alanlar (2 alan) yapmak istiyorum. 2 mavi kutuyla aynı noktada olmalı. Duyarlı olmasını istiyorum, bölgelerin mavi kutulara yapışması gerektiği anlamına geliyor. enter image description here

kaynak

2016-04-04 Yousaf Iqbal

Ben burada yeniyim. Bağlantıyı kullanarak ekli görüntüyü görebilirsiniz (buraya resim açıklaması girin) –

Resmi nasıl oluşturdunuz * responsive *? Çalışmamız için lütfen bize temel bir demo verin. – Aziz

Bu kodu \t html kullanarak { arka plan: url (Screen_Shot_20160101_at_181141.png) yinelenen sabit; -webkit-background-size: içerir; -moz-background-size: içerir; -o-arka plan-boyutu: içerir; background-size: içerir; background-size: 100% 100%; } –

Arka planınız yanıt verdiğinden, yüzdelik boyutları ve konumlandırması olan öğeleri kullanabilirsiniz.

html { 
 
    background: url(http://i.stack.imgur.com/lC4x1.jpg) no-repeat fixed; 
 
    -webkit-background-size: contain; 
 
    -moz-background-size: contain; 
 
    -o-background-size: contain; 
 
    background-size: contain; 
 
    background-size: 100% 100%; 
 
} 
 

 
.bluebox { 
 
    position: absolute; 
 
    top: 65%; 
 
    border: 3px solid red; 
 
    height: 12%; 
 
    width: 8%; 
 
    left: 40%; 
 
} 
 

 
#bluebox2 { 
 
    left: 50.5%; 
 
}

<div id="bluebox1" class="bluebox"></div> 
 
<div id="bluebox2" class="bluebox"></div>

jsFiddle: https://jsfiddle.net/azizn/5gsj9owv/

Sen bir piksel mükemmel maç isterseniz de CSS özelliğini dönüşümü kullanabilir, tam nokta eşleştirmek için değerleri değiştirebilir.

kaynak

2016-04-04 17:29:25 Aziz

Evet :-) Çalıştı. Çok teşekkür ederim beyefendi. –

Arka Plan Resmi alanları tıklanabilir ve </p> <p>

cevap

İlgili konular