HTML에 어려움이 있습니다. 태그

나는 Mercedes Benz 및 Porche와 같은 회사의 로고가있는 웹 페이지를 출력하는 PHP/CSS/HTML 코드를 작성하고 있습니다. 이 로고를 클릭하면 텍스트 영역이 나타나며 주석을 쓸 수 있습니다. 내 문제는 내가 시도한 것과 상관없이 로고가 서로 (수직) 서로 매우 멀리 떨어져 있으며 개별 로고를 클릭하면 해당 로고 바로 옆 또는 옆에 텍스트 상자가 나타나지 않는다는 것입니다. 아래쪽에 나타납니다. 페이지의 제가 만들고자하는 것은 일련의 로고입니다.이 로고를 클릭하면 텍스트 상자가 바로 아래 또는 옆에 나타나고 제출을 클릭하면 데이터가 데이터베이스에 공급됩니다. 누군가 제발 도와 줄 수 있니?HTML에 어려움이 있습니다. 태그

<!DOCTYPE html> 

    <?php 

    $number_of_days = 30 ; 
    $date_of_expiry = time() + 60 * 60 * 24 * $number_of_days ; 
    setcookie('name', $name, $date_of_expiry); 

    ?> 

    <html> 
    <head> 
    <style> 
    img { width:100%; } 

    label img { 
    transform: scale(0.05); 
    transition-duration: 0.2s; 
    } 

    label img:hover { 
    cursor: pointer; 
    transform: scale(0.1); 
    } 

    input[type='text'] { 
    opacity: 0; 
    font-size: 30px; 
    transition-duration: 0.2s; 
    } 

    input[type='text']:focus { 
    opacity: 1; 
    } 

    </style> 
    </head> 

    <body> 

     <label for="mercedesbenz"> 
     <img src="Daimler Benz logo.png"> 
     </label> 

     <label for="porche"> 
     <img src="Porche logo.png"> 
     </label> 

     <label for="bmw"> 
     <img src="BMW logo.png"> 
     </label> 
     <br /> 

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

     <input type="text" id="mercedesbenz" alt="HTML5 Icon"  
     style="width:128px;height:128px" placeholder="Merc" />&nbsp &nbsp 

     <input type="text" id="Porche" alt="HTML5 Icon" 
     style="width:128px;height:128px" placeholder="Porc" />&nbsp &nbsp 

     <input type="text" id="bmw" alt="HTML5 Icon" 
     style="width:128px;height:128px" placeholder="Beemer" />&nbsp &nbsp 

     <input type="submit" name="submit" value="Submit"> 
     </form> 

    </body> 
    </html>

출처

2015-01-27 Jason12

는 u는 당신이를 게시 할 필요가 http://jsFiddle.net –

만들 수 jQuery를/자바 스크립트 렌더링 된 HTML. PHP가 아닙니다. HTML의 경우 입력 한 내용이 라벨 근처에 없으므로 각 이미지 아래에 입력되지 않습니다. –

또한 입력에 alt 속성이 없습니다. –

여기에 한 가지 방법이 있습니다. 의견을 추가하려면 자동차를 클릭하십시오.
데모 : http://jsfiddle.net/f18513hw/

HTML

<div id="form"> 
     <form method="post" action="#"> 

    <div class="car"> 
     <label for="mercedesbenz"> 
      <img src="http://tinyurl.com/on964r9"> 
     </label> 
     <div class="comment"> 
      <input type="text" id="mercedesbenz" placeholder="Merc" /> 
     </div> 
    </div> 
    <div class="car"> 
     <label for="porche"> 
      <img src="http://tinyurl.com/on964r9"> 
     </label> 
     <div class="comment"> 
      <input type="text" id="Porche" placeholder="Porc" /> 
     </div> 
    </div> 
    <div class="car"> 
     <label for="bmw"> 
      <img src="http://tinyurl.com/on964r9"> 
     </label> 
     <div class="comment"> 
      <input type="text" id="bmw" placeholder="Beemer" /> 
     </div> 
    </div> 
    <input id="button" type="submit" name="submit" value="Submit"> 
    </form> 
</div>

CSS

#form { 
    position: absolute; 
    overflow: hidden; 
    top: 50%; 
    left: 50%; 
    margin-right: -50%; 
    transform: translate(-50%, -50%) 
} 
.car { 
    float: left; 
    margin: 2% 2% 5% 2%; 
} 

.car label img { 
    transform: scale(0.8); 
    transition-duration: 0.2s; 
} 

.car label img:hover { 
    cursor: pointer; 
    transform: scale(1); 
} 

.comment { 
    position: absolute; 
    visibility: hidden;  
} 

.comment input { 
    width: 128px; 
    font-size: 1em; 
} 

.car label img { 
    width: 128px; 
    display: block; 
} 

#button { 
    position: relative; 
    left: 66%; 
    margin: 2%; 
    visibility: hidden; 
}

$('.car').click(function() { 
    $('.comment').css("visibility", "hidden"); 
    $('#button').css("visibility", "hidden"); 

    var id = $(this).children('label').attr('for'); 
    var buttonOffset; 
    switch(id) { 
     case 'mercedesbenz': 
      buttonOffset = '0'; 
      break; 
     case 'porche': 
      buttonOffset = '33%'; 
      break; 
     case 'bmw': 
      buttonOffset = '66%'; 
      break; 
    } 

    $(this).children('.comment').css("visibility", "visible"); 
    $('#button').css("left", buttonOffset); 
    $('#button').css("visibility", "visible"); 
}); 

$('.comment').mouseleave(function() { 
    setTimeout(function() { 
     $('.comment').css("visibility", "hidden"); 
     $('#button').css("visibility", "hidden"); 
    }, 500); 
});

출처

2015-01-27 05:18:36

크리스티안, 귀하의 기여에 너무 감사드립니다. 고맙습니다. – Jason12

엘리먼트를 배치 컨테이너에 배치해야합니다. 따라서 다음과 같은 내용이 있습니다.

<div> 
    <label></label> 
    <input></input> 
</div> 
<div> 
    <label></label> 
    <input></input> 
</div> 
<div> 
    <label></label> 
    <input></input> 
</div>

출처

2015-01-27 02:56:20

알겠습니다. 고마워, DA. – Jason12

HTML에 어려움이 있습니다. 태그

답변

관련 문제