Как переключить два изображения, когда я нажимаю один из них?

У меня есть ситуация, когда на моей странице есть одно текстовое поле и небольшой значок (edit.png). Первоначально текстовое поле находится в readonly режиме &, когда я нажимаю этот edit.png, он удаляет атрибут readonly из текстового поля. Он работает нормально, но теперь я хочу это сделать:
При нажатии на edit.png он должен удалить атрибут readonly из текстового поля, а сам значок изменится на значок save.png. Это мой код. Пожалуйста, предложите, где я должен измениться, чтобы достичь этого.Как переключить два изображения, когда я нажимаю один из них?

<html> 
<head> 
    <script language="JavaScript"> 
     function removeAlignment(x){ 
     var read=document.getElementById(x).removeAttribute("readonly",0); 
     if(document.getElementById("toogle").value==="OK") 
     { 
      document.getElementById("toogle").value="SAVE"; 
     } 
     } 
    </script> 

    <style type="text/css"> 
     a.table-actions-button { 
      width: 1.25em; 
      height: 1.25em; 
      display: inline-block; 
      background-position: center center; 
     } 
     .ic-table-edit { background-image: url("actions-edit.png"); } 
    </style> 
</head> 
<body> 
    <p> 
    <label for="email">Email</label> 
    <input type="text" name="email" id="email" value="[email protected]" readonly="readonly"/> 
    <a href="#" class="table-actions-button ic-table-edit" title="Edit" onclick="removeAlignment('email');"></a> 
    </p> 
    <input type="submit" id="toogle" value="OK" /> 
</body>

Где я могу изменить? Пожалуйста, ответьте на мою страницу.

источник

2013-04-27 Somnath Kayal

Редактирование.

if(document.getElementById("toogle").value==="OK") 
{ 
    document.getElementById("toogle").value="SAVE"; 
    $('.ic-table-edit').css('background-image', 'url("actions-save.png")'); 
}

источник

2013-04-27 06:05:15

r u проверил его? это не работает. Я добавляю его для 'function removeAlignment (x) {' line. где я должен написать это ??? –

еще не работает. что ты думаешь?? Я думаю, что это для jquery. –

Вы правы, ваше сообщение помечено jQuery. –

Убедитесь, что вы включили j-запрос плагина в свой код. В ярлыке привязки введите <img> тег. В функции переключателя, просто измените атрибут вашего изображения на новое изображение src. Найти пример кода ниже

<html> 
<head> 

    <script> 
     function removeAlignment(x){ 
     var read=document.getElementById(x).removeAttribute("readonly",0); 
     if(document.getElementById("toogle").value==="OK") 
     { 
      document.getElementById("toogle").value="SAVE"; 
      $("#image").attr("src","actions-save.png"); 
     } 
     } 
    </script> 

    <style type="text/css"> 
     a.table-actions-button { 
      width: 1.25em; 
      height: 1.25em; 
      display: inline-block; 
      background-position: center center; 
     } 
    </style> 
</head> 
<body> 
    <p> 
    <label for="email">Email</label> 
    <input type="text" name="email" id="email" value="[email protected]" readonly="readonly"/> 
    <a href="#" class="table-actions-button ic-table-edit" title="Edit" onclick="removeAlignment('email');"><img src="actions-edit.png" id="image"></a> 
    </p> 
    <input type="submit" id="toogle" value="OK" /> 
</body> 
</html>

источник

2013-04-27 07:24:10

ваш код показывает кнопку сохранения с начала. Я хочу переключить эти два. Сначала только кнопка редактирования должна показывать, если я нажму на нее, кнопка редактирования исчезнет, и кнопка «Сохранить» будет показана. Уверен, что он работает так? –

Просто измените имена изображений и сохраните нужные имена. Я изменил имена изображений в соответствии с вашими требованиями. –

Как переключить два изображения, когда я нажимаю один из них?

ответ

Смежные вопросы