none
Поменять URL asp:Image в клиентском сценарии. RRS feed

  • Вопрос

  • Здравствуйте.

    Требуется менять картинку клиентском сценарии.

    Размеры и другие параметры меняю с помощью JavaScript  изменяя CSS.

    А как поменять саму картинку, её URL?

    Спасибо.

    $('.ImageClass').css({ "width": "100px" });


    Фоновое изображение

    27 февраля 2018 г. 9:09

Ответы

Все ответы

  • Здравствуйте,

    Может Вам подойдет вариант предложенный здесь: Replace the Image in an with CSS


    Если Вам помог чей-либо ответ, пожалуйста, не забывайте жать на кнопку "Предложить как ответ" или "Проголосовать за полезное сообщение" Мнения, высказанные здесь, являются отражение моих личных взглядов, а не позиции корпорации Microsoft. Вся информация предоставляется "как есть" без каких-либо гарантий.

    27 февраля 2018 г. 11:21
    Модератор
  •  Благодарю.

    В данном варианте url прописывается в свойстве background . Сама картинка заменяется фоном с url.

    Иными словами сама картинка отсутствует а изменяется бэкграунд элемента.

    Такой вариант подойдет, если размер изображения строго фиксирован.

    В моем случае размер изображения нужно изменять. 

    Например если имеется картинка 640*640 рх а для неё отводится меньше места , то средствами JS 

        $('.ImageClass').css({ "width": function () { return widthImage; } });
        $('.ImageClass').css({ "height": function () { return heightImage; } });

    я могу преобразовать её в нужный размер без потери целостности.

    А вот для бекграунда такой возможности нет.

    Если прописать в него url нужной картинки 640*640 и размер отведенного места под картинку меньше, то изображение будет обрезаться. 


    Фоновое изображение

    27 февраля 2018 г. 20:26
  • var el = document.getElementById('<%=Image1.ClientID %>');        
    el['src'] = 'image.png';

    • Помечено в качестве ответа Yuri Evseenkov 28 февраля 2018 г. 10:48
    28 февраля 2018 г. 4:34
  •  Большое Вам спасибо!

    Приведу получившийся код. При нажатии на кнопку меняется картинка без перезагрузки страницы.

    <%@ Page Language="C#"
        AutoEventWireup="true" %>
    
    <!DOCTYPE html>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    
     <script type="text/javascript">
    
         function  changeImage(){
                 var el = document.getElementById('<%=Image1.ClientID %>');
                 el['width'] = 240;
                 el['height'] = 240;
                 el['src'] = '/Image/baby640640.png';
             }
     </script>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head id="Head1" runat="server">
           <meta  charset="utf-8" name="keywords" />
      <title></title>
        </head>
        <body>
            <form runat="server">
            <div>
                <asp:Image ID="Image1" ImageUrl="~/Image/bear24.png"   runat="server" />
                <asp:Button ID="Button1" OnClientClick="changeImage(); return false"
                     runat="server" Text="Button" />
                 </div>
       </form> </body>
    
        </html>


    Фоновое изображение

    28 февраля 2018 г. 10:48