Все технические форумы на одном сайте Удобный поиск информации с популярных форумов в одном месте
Вопрос: Как грамотно заменить гиперссылку на кнопку-картинку

Гиперссылку "Добавить в корзину" нужно заменить на картинку, попробовал поменять но не работает. Сама картинка появилась, но не реагирует на нажатие.
Рабочий вариант с гиперссылкой:
<table align="center" cellpadding="0" cellspacing="0" class="product" border="0">
<tr>
<td valign="top">
<div><a href="#"><img src="userfiles/<?=$product['image']?>" alt="" /></a></div>
<div class="description">
<div class="product-name"><a href="#"><?=$product['title']?></a></div>
<div class="product-price">Цена: <?=$product['price']?> $</div>
</div>
</td>
<td valign="top" width="100">
<div><?=$product['description']?></div>
<div><a href="index.php?view=add_to_cart&id=<?=$product['id']?>">Добавить в корзину</a></div>
</td>
</tr>
</table>

Замена на картинку(не рабочее):
<table align="center" cellpadding="0" cellspacing="0" class="product" border="0">
<tr>
<td valign="top">
<div><a href="#"><img src="userfiles/<?=$product['image']?>" alt="" /></a></div>
<div class="description">
<div class="product-name"><a href="#"><?=$product['title']?></a></div>
<div class="product-price">Цена:<?=$product['price']?></div>
</div>
</td>
<td valign="top" width="100">
<div class="container">
<div>
<p><?=$product['description']?></p>
<a href="index.php?view=add_to_cart&id=<?=$product['id']?></a>
</div>
</div>
<a href="index.php&view=add_to_cart&id=<?=$product['id']?>"><input type="image" src="/1/views/pages/01.png"></a>
</td>
</tr>
</table>
Ответ:

Вопрос: Заменить текст кнопки картинкой

Подскажите пожалуйста. Как вместо слова в
HTML5
1
<input id="open" type="button" value="Открыть таблицу"/>
вставить картинку?

 Комментарий модератора 
Один вопрос - одна отдельная тема!
Ответ: SeRegk, примерно так:
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        input{vertical-align: middle}
        input[type="submit"]{background:url(http://mirgif.com/6/45.gif) no-repeat 0/cover; width:50px; height:50px; border:0; outline:0}
    </style>
</head>
<body>
<form action="">
  <input type="text">
  <input type="submit" value="">
</form>
</body>
</html>
Вопрос: При нажатии на кнопку картинка прячется, и надпись на кнопке меняется на «покажи меня»

2.Сначала на странице две картинки в рамках и две кнопки с надписью «спрячь меня». При нажатии на кнопку картинка прячется, и надпись на кнопке меняется на «покажи меня». Если еще раз нажать на кнопку, картинка появляется и меняется надпись на кнопке. Картинки (свеча1.gif и свеча2.jpg) скопировать из сетевой папки. Параметры форматирования страницы:
Цвет фона темно-синий.
Картинки размером 200 на 200.
Рамка вокруг первой картинки: цвет #ffA089, тип outset, толщина 50, отступы по 5.
Рамка вокруг второй картинки: цвет # 89ffA0, тип outset, толщина 50, отступы по 5.
Рекомендуется: картинки и кнопки поместить в таблицу, функцию сделать с параметром. Параметр – номер картинки.
Ответ: javascript
Вопрос: Hover-эффект для картинки

Png картинка служит кнопкой на моем сайте.Нужно чтобы при наведении ее цвет менялся.Можно ее заменить такой же картинкой другого цвета?
Заранее спасибо

Добавлено через 15 минут
HTML5
1
<center><a href="parser.php" target="_blank"><img src="go2.png" alt="Получить прогноз"/>
CSS кода для нее нет
Ответ: Rva4, чтобы сделать hover - эффект для картинки необходимо использовать css-свойство: background, а дальше читайте тему:
Вопрос: Как создать гиперссылку в html для несколько страниц сразу

Здравствуйте, скажите, пожалуйста, как создать гиперссылку на картинку в html для несколько страниц сразу (картинка находится в шапке сайта)?
Т.е. можно ли как-то сделать так, чтоб гиперссылку можно было добавить только на странице Index.html, а на станице к примеру contacts.html картинка автоматически стала с гиперссылкой...
Ответ: Хостинг поддерживает работу и на php. просто думаю как лучше сделать теперь имея html. Вроде понятно - попробую отпишу...
Вопрос: Выравнивание фона и кнопок

Всем привет!
Вручайте пож
веб программирование не особо знаю (точнее не знаю )

Вообщем написал страницу авторизации, будет использоваться для запуска на тел и ПК при подключении к WIfi
Фоновая картинка + 4 кнопки (картинки) для перехода в соц сети

black-face.jpg - должно быть на заднем плане по центру страницы
4 кнопки - должны равняться по левой стороне black-face.jpg с отступом от верха 30%

(и если не сложно еще текст по центру сверху равняясь по black-face.jpg)


Вот что я написал, экспериментировал по разному но ничего не выходит ((( т.к знаний не хватает (( То кнопки съезжают то фон вниз бежит, а если на ПК все норм то на тел 2 кнопки проподают и левой части фона не видно (((


Код HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<!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=iso-8859-1" />
<title>NET Access &gt; Login...</title>
<style type="text/css">
 
  body { background: url(img/black-face.jpg) no-repeat;
    background-color: #808082;  background-position: center;
    margin-top: 55%}
 
.style1 {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 10px;
    color: #000333;}
 
</style></head>
 
<body>
<td width="7" height="0" rowspan="2" valign="top" background="img/black-face.jpg">&nbsp;</td>
<table width="10%" height="50" border="0" align="left bottom"=10% cellpadding="0" cellspacing="0">
 
  <a href="$(link-login-only)?dst=https://www.google.ru/=T-$(mac-esc)"><img src="img/VK.png"></a>
  <a href="$(link-login-only)?dst=https://www.google.ru=T-$(mac-esc)"><img src="img/ok.png"></a>
  <a href="$(link-login-only)?dst=https://www.google.ru=T-$(mac-esc)"><img src="img/VK.png"></a>
  <a href="$(link-login-only)?dst=https://www.google.ru=T-$(mac-esc)"><img src="img/sit.png"></a>
 
  <tr>
    <td height="20" colspan="2"><span class="style11">Copyright &copy; 2015 Cipta Media Informatika. All right reserved. </span></td>
  </tr>
</table>
</body>
</html>
Выручите пож как сделать????
очень нужно.
Ответ: По аналогии можете изменить что-то по себя на базе этого проекта. Думаю разберетесь, на том сайте вся инфа по идее есть.
Вопрос: Вывод картинки за пределы родительского блока

Здравствуйте! Нужно вывести изображение за пределы некоторой области, как на прикрепленном изображении.
Как это можно реализовать? Прост в CSS не очень силен.
Фон контейнера заполняется при помощи маленьких изображений размером 10 на 3 пикселя(синий фон), на нем присутствует кнопка, тоже сделана на css и справа надпись. Так вот, нужно как-то либо наложить рисунок с калькулятором или же сделать это вместе объединенно с CSS-кнопкой.
Пожалуйста, помогите это реализовать?) Или как по вашему лучше сделать, любые варианты приму) Главное чтобы рабочие были)
На данный момент контейнер выглядит как на втором изображении.
Ответ: А ежели просто кнопку картинкой общей вставить?)
Вопрос: Вёрстка блока с кнопкой

Здравствуйте!
Нужно сверстать блок с каким-то текстовым содержанием и кнопкой-ссылкой. Вопрос возник в позиционировании кнопки. Указал position, но блок накладывается на текст.
Как правильно решить вопрос с позиционированием блоков и структурой? Кнопку правильно делать как <span> с вложенным <a> или только <a> с указанным свойством display: inline-block?
Ответ: В продолжение к теме, появилось ещё пара вопросов:
1. Как всё-таки правильно решить вопрос с позиционированием кнопки по центру по вертикали? В примерах на jsfiddle фиксированные размеры родителя по ширине и высоте. А если изменится текстовый контент в блоке или у пользователя свои настройки размера шрифта, как в этом случае заставить кнопку оставаться по центру?
2. Как правильно реализовать кроссбраузерный градиент? Подправил пример () задал градиент через linear-gradient(). Посмотрел на caniuse поддержку этого свойства браузерами и не могу сделать правильный вывод. Поддержка только новыми браузерами. С border-radius по сути такой же вопрос. Не делать же мне кнопку картинкой?
Вопрос: Не добавляются ссылки к картинкам через админку

Есть кнопки-картинки. При попытке добавить им ссылки, чтобы они хоть куда-то вели, WP сбрасывает или не принимает мои изменения.
Куда копать?
Спасибо.
Ответ: Pepeka, это плагин WPBakery Visual Composer. Он почему-то не реагирует, когда ссылки через него добавляешь.
Сделал вручную. Вот код:

Код HTML5
1
[vc_row][vc_column width="1/3"][laborator_banner2 image="1916" size="400x280" title="Las Vegas Vacation Rentals" type="banner-type-2" overlay_bg="rgba(0,0,0,0.2)" animation="fadeInDown" href="url:vacationelite.loc/?p=1826" description="Check the outfits" animation_delay="450ms" is_category_link="no" font_color="#ffffff"][/vc_column][vc_column width="1/3"][laborator_banner2 image="1742" size="400x280" title="Tours" type="banner-type-2" overlay_bg="rgba(0,0,0,0.2)" animation="fadeInDown" href="url:vacationelite.loc/?p=1836" animation_delay="450ms" is_category_link="no" font_color="#ffffff"][/vc_column][vc_column width="1/3"][laborator_banner2 image="1740" size="400x280" title="Las Vegas Helicopter Rentals" type="banner-type-2" overlay_bg="rgba(0,0,0,0.3)" animation="fadeInDown" href="url:vacationelite.loc/?p=1831" animation_delay="150ms" is_category_link="no" font_color="#ffffff"][/vc_column][/vc_row][vc_row][vc_column width="1/3"][laborator_banner2 image="1741" size="400x280" title="Las Vegas Catering" type="banner-type-2" overlay_bg="rgba(0,0,0,0.39)" animation="fadeInDown" href="url:http%3A%2F%2Fonlinerestaurants.com" target="_blank" animation_delay="300ms" is_category_link="no" font_color="#ffffff"][/vc_column][vc_column width="1/3"][laborator_banner2 image="1736" size="400x280" title="Las Vegas Nightlife" type="banner-type-2" overlay_bg="rgba(0,0,0,0.39)" animation="fadeInDown" href="url:vacationelite.loc/?p=1822" animation_delay="300ms" is_category_link="no" font_color="#ffffff"][/vc_column][vc_column width="1/3"][laborator_banner2 image="1733" size="400x280" title="Las Vegas Shows" type="banner-type-2" overlay_bg="rgba(0,0,0,0.3)" animation="fadeInDown" href="url:vacationelite.loc/?p=1833" animation_delay="150ms" is_category_link="no" font_color="#ffffff"][/vc_column][/vc_row][vc_row css=".vc_custom_1401220488150{padding-top: 20px !important;padding-bottom: 20px !important;}"][vc_column width="1/1"][vc_text_separator title="From the blog" subtitle="Blogging is fun" separator_style="double-bordered-thick" title_align="separator_align_center" accent_color="#222222"][/vc_column][/vc_row][vc_row][vc_column width="1/1"][laborator_blog_posts blog_query="size:3|order_by:date|post_type:post|categories:51" row_clear="2" equal_heights="1" auto_rotate="5"][/vc_column][/vc_row][vc_row][vc_column width="1/2"][vc_widget_sidebar sidebar_id="blog_sidebar"][/vc_column][vc_column width="1/2"][vc_widget_sidebar sidebar_id="blog_sidebar"][/vc_column][/vc_row]
Но почему-то в этом коде не срабатывает target="_blank.
Есть какие мысли на этот счет?
Спасибо.

Почему-то тут код целиком не вставить.
Попробую напрямую.

[vc_row][vc_column width="1/3"][laborator_banner2 image="1916" size="400x280" title="Las Vegas Vacation Rentals" type="banner-type-2" overlay_bg="rgba(0,0,0,0.2)" animation="fadeInDown" href="url:vacationelite.loc/?p=1826" description="Check the outfits" animation_delay="450ms" is_category_link="no" font_color="#ffffff"][/vc_column][vc_column width="1/3"][laborator_banner2 image="1742" size="400x280" title="Tours" type="banner-type-2" overlay_bg="rgba(0,0,0,0.2)" animation="fadeInDown" href="url:vacationelite.loc/?p=1836" animation_delay="450ms" is_category_link="no" font_color="#ffffff"][/vc_column][vc_column width="1/3"][laborator_banner2 image="1740" size="400x280" title="Las Vegas Helicopter Rentals" type="banner-type-2" overlay_bg="rgba(0,0,0,0.3)" animation="fadeInDown" href="url:vacationelite.loc/?p=1831" animation_delay="150ms" is_category_link="no" font_color="#ffffff"][/vc_column][/vc_row][vc_row][vc_column width="1/3"][laborator_banner2 image="1741" size="400x280" title="Las Vegas Catering" type="banner-type-2" overlay_bg="rgba(0,0,0,0.39)" animation="fadeInDown" href="url:http%3A%2F%2Fonlinerestaurants.com" target="_blank" animation_delay="300ms" is_category_link="no" font_color="#ffffff"][/vc_column][vc_column width="1/3"][laborator_banner2 image="1736" size="400x280" title="Las Vegas Nightlife" type="banner-type-2" overlay_bg="rgba(0,0,0,0.39)" animation="fadeInDown" href="url:vacationelite.loc/?p=1822" animation_delay="300ms" is_category_link="no" font_color="#ffffff"][/vc_column][vc_column width="1/3"][laborator_banner2 image="1733" size="400x280" title="Las Vegas Shows" type="banner-type-2" overlay_bg="rgba(0,0,0,0.3)" animation="fadeInDown" href="url:vacationelite.loc/?p=1833" animation_delay="150ms" is_category_link="no" font_color="#ffffff"][/vc_column][/vc_row][vc_row css=".vc_custom_1401220488150{padding-top: 20px !important;padding-bottom: 20px !important;}"][vc_column width="1/1"][vc_text_separator title="From the blog" subtitle="Blogging is fun" separator_style="double-bordered-thick" title_align="separator_align_center" accent_color="#222222"][/vc_column][/vc_row][vc_row][vc_column width="1/1"][laborator_blog_posts blog_query="size:3|order_by:date|post_typeost|categories:51" row_clear="2" equal_heights="1" auto_rotate="5"][/vc_column][/vc_row][vc_row][vc_column width="1/2"][vc_widget_sidebar sidebar_id="blog_sidebar"][/vc_column][vc_column width="1/2"][vc_widget_sidebar sidebar_id="blog_sidebar"][/vc_column][/vc_row]
Вопрос: Выбор картинок и добавление для каждой input type=hidden

Добрый день!!
Имеется огромная форма для редактирования личных данных...В этой форме есть список имеющихся картинок (массив, может и не быть вовсе). Задача такая, чтобы можно было выбрать одну или несколько картинок для удаления...
Само удаление мне не нужно, но нужно, чтобы при выборе картинки создавалось input type=hidden. Сколько картинок готово к удалению, столько должно быть и хидденов. Ещё нужна возможность отменить выбор, кликнув ещё раз по картинке.
Рабочий код зесь: , но он срабатывает 1 раз, т.е. кликнув по картинке див с хидденом создаётся и удаляется один раз... Так и не смог разобраться как это грамотно сделать...
Ответ:
Сообщение от Icons
нужно, чтобы при выборе картинки создавалось input type=hidden

Может проще флажки, которые как раз и служат для этого?