Блог

Можно ли изменить значение атрибута 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 — это не будет хорошо работать, если изображения отключены. — Вместо рисунка не отображается какой-либо альтернативный текст. Однако первый способ решает эту ситуацию…

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

Спасибо.

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

Некоторые заметки об этом решении:

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

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

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

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

Вот и все 🙂

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

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

template.js

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

затем ваш файл загрузится

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

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

 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 удалит этот класс, в результате чего он не будет отображаться.

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

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

Установите для контейнера значение to position:relative .

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

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

При отключенных изображениях или CSS пользователь видит только кнопку отправки открытого текста.

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

Это некрасиво, но единственное чистое CSS-решение, которое сразу приходит на ум, — это своего рода замена изображения с относительно плохой поддержкой. Это использование :after. Это своего рода плохая практика из-за неправильного использования :after , и поддержка довольно сомнительная, и я думаю, что для элемента ввода было бы сложнее, основываясь на последнем разе, когда я пытался использовать :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 для установки нужной кнопки в качестве фонового изображения. О чем, я только что заметил, вы уже подумали. Я полагаю, что это должно сработать просто отлично.

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

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

В приложениях, которые я создал, я всегда просто оформлял ввод фоновым изображением, но оставлял вставку текста за элементом управления 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 пикселей.

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

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

Вы можете сделать это с помощью 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, то он получает элемент «frame»,
с помощью getElementById, а затем установите для атрибута «width» значение 100%

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

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