[Помогите] Вставить в картинку

Тема в разделе "OpenCart", создана пользователем ironblare, 4 авг 2014.

  1. ironblare

    ironblare

    Регистрация:
    12 июн 2014
    Сообщения:
    32
    Симпатии:
    0
    Подскажите как эту форму ( как ссылка) вставить в картинку
    чтобы клиент нажимал не на ссылку ., а на картинку --> чтобы появлялась форма обратного звонка

    Код:
     
    <style>
    #mail {visibility: hidden;}
    #mail:checked ~ #popup form {visibility: visible;}
    #mail:checked + label {
    position: fixed;
    top: 0; left: 0; bottom: 0; right: 0;
    z-index: 99;
    color: rgba(0,0,0,0);
    background: rgba(180,180,180,.9);
    cursor: pointer;
    }
    #popup {
    visibility: hidden;
    position: fixed;
    top: 0; left: 0; bottom: 0; right: 0;
    z-index: 100;
    }
    #popup form {
    position: absolute;
    top: 50%; left: 50%;
    -ms-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);
    padding: .5% 1% 1%;
    border: 1px solid rgb(100,100,100);
    font-size: 140%;
    font-weight: 600;
    text-align: right;
    text-shadow: -1px -1px #666;
    color: rgb(240,240,240);
    background: rgb(150,150,150) linear-gradient(rgb(100,100,100), rgb(170,170,170));
    }
    #popup div:nth-of-type(1) {padding-top: 3%;}
    #popup div:nth-last-of-type(1) {padding: 1% 0 4%;}
    #popup div:after {
    content: attr(data-title);
    display: block;
    font-size: 70%;
    font-weight: normal;
    text-shadow: none;
    }
    #popup input {font-size: 90%;}
    #popup [type='submit'] {cursor: pointer;}
    #popup label:hover {
    color: #dbeaf9;
    cursor: pointer;
    }
    </style>
    
    <input type="checkbox" id="mail"/><label for="mail">заказать звонок</label> <!-- Для того, чтобы label шёл не сразу после input, нужно менять немного селекторы: ссылка1, ссылка2 -->
    
    <div id="popup">
    <form method="post" action="mail.php">
    <label for="mail" title="Отменить">✕</label>
    <div data-title="Например, Мария Петровна">Ваше имя: <input type='text' name='name' required /></div>
    <div data-title="Например, 89270000000">Моб. телефон: <input type="tel" name='tel' required maxlength="11" value='8' pattern="8\d{10}"/></div>
    <input type='submit' value='Заказать'/>
    </form>
    </div>
    
     
  2. NinoZombie

    NinoZombie

    Регистрация:
    27 окт 2013
    Сообщения:
    223
    Симпатии:
    59
    У меня сделано так:
    нужно подгрузить .js файл с примерно таким содержанием

    Затем вставить в код страницы это:
     
  3. Bogdan

    Bogdan

    Регистрация:
    25 фев 2013
    Сообщения:
    228
    Симпатии:
    104
    Вставьте такой стиль:
    input#mail + label {
    background-image: url('АДРЕС_ВАШЕЙ_КАРТИНКИ');
    }