Измените значение 'src' на css для входного тега с type = "image"

Question

Можно ли изменить значение атрибута src <input type='image' alt="Text will be shown if pics are disabled" src='somepic.png'../> на css?

Проблема заключается в следующем: я хочу указать, какая картинка будет отображаться как кнопка отправки, просто используя css (поэтому команда разработчиковбудет менять только CSS-файлы!).Если я использую альтернативный способ, например <input type="submit" class="cssclass" value=" " alt="Text will be shown if pics are disabled"/>, и указываю фон этого элемента в css - он не будет работать, если картинки отключены.- Никакой альтернативный текст не показан вместо рис.Однако первый способ разрешает эту ситуацию ...

Пожалуйста, сообщите что-нибудь

Спасибо.

Answer 1

Вот оно: http://jsfiddle.net/kizu/66JXn/

Некоторые примечания об этом решении:

1. Используйте <button></button>, потому что оно может включать другие блоки.

2. Вам потребуется немного дополнительного кода, чтобы все это работало в Fx и IE:

   • Для Fx вам нужна дополнительная обертка внутри (есть ошибка позиционирования) и некоторые дополнительные свойства -moz сбрасываются.
   • Для IE вы должны уменьшить исходную кнопку, потому что есть некоторые дополнительные отступы, которые трудно удалить.

3. Вы помещаете текст и другой элемент внутрь, который будет перекрывать текст.Поэтому, когда изображения будут отсутствовать, текст будет доступен.

Вот и все:)

Answer 2

Можете ли вы сделать это с помощью JavaScript?

У меня есть изображение на моей странице, которое при нажатии покажет еще одну кнопку, а также изменит атрибут src первой.

Вот что я использую:

<script type="text/javascript">
 function apps()
 {
 var element = document.getElementById("app_frame");
 if (element.width != "0%")
 {
    parent.document.getElementById("frame").setAttribute("width","100%");
    parent.document.getElementById("app_frame").setAttribute("width","0%");
    parent.document.getElementById("appbutton").setAttribute("src","site/main/images/apps/show.gif");
    parent.document.getElementById("wthrbutton").style.visibility="hidden";
 }
 else
 {
    parent.document.getElementById("frame").setAttribute("width","65%");
    parent.document.getElementById("app_frame").setAttribute("width","35%");
    parent.document.getElementById("appbutton").setAttribute("src","site/main/images/apps/hide.gif");
    parent.document.getElementById("wthrbutton").style.visibility="visible";
 }
 }
 </script>

Что это говорит: установить "app_frame" в качестве переменной "element", затем проверьте переменную "element" на ее ширину. если его ширина не равна 0, то он получает элемент «рамка», с помощью getElementById, а затем устанавливает для атрибута "width" значение 100%

Вы можете видеть чуть ниже, что вы используете тот же метод, но используете атрибут SRC, а не ширину, и установите для него любое значение, в моем случае, site / main / images / apps / show.gif

надеюсь, что это поможет

Answer 3

Хорошо ... Так что я ненавижу, когда задаю конкретный вопрос, и вместо того, чтобы ответить на него, они дают мне дурацкий обходной путь вместо того, чтобы отвечать на первоначальный вопрос, который я задал ... Но по какой-то причине яЯ решил сделать это с вами.

Если я правильно понимаю проблему, вы просто хотите иметь кнопку формы с фоновым изображением, а если фоновое изображение - нет загрузить, вы хотите, чтобы какой-то альтернативный текст отображался пользователю с надписью кнопки?Если это не так, прекратите чтение и «стрелка вниз».

В приложениях, которые я создал, я всегда просто вводил ввод с фоновым изображением, но оставлял его до элемента управления HTML, чтобывставить текст ... Это хорошо по трем причинам ... кнопки могут быть стилизованы, разработчики могут изменять значение текста на кнопке, не мешая мне создавать новое изображение, и если фоновое изображение не загружается,кнопка все еще читаема.

Так что мой HTML был такой:

<input type="submit" id="btnSearch" class="searchButton" value="Search"> 

, тогда мой класс может читать что-то вроде:

.searchButton {
 backgorund-image: url('searchButtonImage.png');
 font-family: sans serif;
 font-size: 10px;
 color: #808080;
 padding-left: 50px 0px 0px 0px; // Assuming a magnifying glass icon or whatevs is on the left and is 20-ish pixels
 width: 100px; // you can put this as in-line style if you make a more generic class
}

Если вы хотите сделатьBG более общий, переместите ширину кнопки, чтобы сделать ее встроенной в кнопку, чтобы разработчики могли изменять ширину с помощью текстового значения и сделать ваше общее изображение BG размером примерно 200 пикселей.

В зависимости отв браузере, текст может быть не таким приятным и анимированным, как в других, но IMO, это небольшая цена.

(Отказ от ответственности: простите меня, если вы скопировали и вставили это, и это не так 'т работы. Я просто написал это от рукибез проверки.)

Answer 4

Это ужасно, но единственное чистое решение CSS, которое сразу приходит на ум, - это своего рода замена изображений с относительно плохой поддержкой. Вот с помощью: после. Это плохая практика из-за неправильного использования: after, и поддержка довольно сомнительна, и я думаю, что было бы лучше для элемента input, основываясь на последнем времени, когда я пытался использовать: after на входе .. .

.cssclass,
.cssclass:after{
display:block;
    width:100px;
    height:100px;
}
.cssclass{ position:relative; }
.cssclass:after{
    position:absolute;
    top:0;left:0;
    content:url("button.jpg");
}

Подробнее см. http://www.rachaelmoore.name/best-practices/css-image-replacement-ii/.

Или установив src по умолчанию на прокладку и всегда используя CSS, чтобы установить нужную кнопку в качестве фонового изображения. Что я только что заметил, вы уже подумали. Я думаю, что это должно работать просто отлично.

Answer 5

(Это проблема, для которой JS является решением, но игнорируя это:)

Один из вариантов - обернуть кнопку и дополнительный div (давайте назовем его div.overlay) в родительском элементе.контейнер.

Установите контейнер на position:relative.

Установите кнопку для отображения только текста, как обычно.Установите div.overlay на position:absolute, width и height на 100%, а left и top на 0 и на z-index выше, чем кнопка.Установите изображение, которое вы хотите отобразить, как background-image из div.overlay.

Когда изображения включены, пользователь видит изображение, и изображение можно изменить только с помощью CSS.

СИзображения или CSS отключены, пользователь видит только кнопку отправки в незашифрованном виде.

Возможно, вам придется проделать некоторую хитрость, чтобы нажать div.overlay для отправки формы, возможно, просто сделайте div.overlay дублирующую кнопку отправки.Кроме того, кто знает, что делает Googlebot из таких методов наложения.

Answer 6

Нет, и это плохая практика.CSS предназначен только для статического содержимого.

Что вы должны сделать, это определить файл шаблона с переменными в нем, например:

template.js

my_backgroundImage = "url('somepic.png')";

тогда ваш файл загрузится

x = document.createElement('image');
x.src = my_backgroundImage

Answer 7

Селекторы атрибутов могут работать, но они не очень гибки.Попробуйте это:

img[src=""] {
  background-image: url('none.png');
  height: 100px; /* Height of BG image */
  width: 100px; /* Width of BG image */
}

Это не меняет атрибут src= изображения, но выполняет ту же функцию.

---

Вот моя идея.

Вы можете использовать JavaScript для чтения таблиц стилей тегов <img> и изменения их соответствующим образом.

Я говорю о белом списке классов, таком как big, small, center и всех других применяемых классахчтобы изображения интерпретировались через JavaScript.Команда разработчиков может использовать CSS, но она не будет отображаться в ожидаемой усадьбе, например так (Python + JavaScript):

for every <img> tag:
  if tag.classes contains class not in whitelist:
    for every class not in whitelist:
      this.src = newClass.backgroundImage;
      this.removeClass(newClass)

Она читает CSS для свойства background-image, но просто крадетURL изображения и устанавливает атрибут src=, используя этот URL.Затем JavaScript удалит этот класс, и он не будет отображаться.