none
imagen button que cambien al pasar el maus RRS feed

  • Pregunta

  • Muy buenas tardes 

    tengo un problema, tengo unos botones que son imágenes pero tienen 3 estados prendidos apagados y hover. El problema es que no me sale con ccs no se por que este el ccs que tengo esta mezclado con la hoja de estilos de boostrap no se si eso importa (Trabajo en vb.net ) 

    .imagen-ultimos {
        background: url('../botones texto - copia/fondo claro/guardar.jpg') no-repeat;
        height: 70px;
        width: 70px;
    }
        .imagen-ultimos:hover {
            background: url('boton reposo/ultimos.png') no-repeat;
            height: 70px;
            width: 70px;
            
        }

    y se lo agrego con el ccs en el bottum hay pensé como hacer el hover. no me resulta, no se porque y no se como agregar la imagen cuando este deshabilitado 

    de antemano muchas gracias si no queda claro algo solo digan 

    martes, 24 de mayo de 2016 16:04

Respuestas

  • Si no te funciona con un botón como:

    <asp:Button runat="server" ID="Button1" Width="70" Height="70" CssClass="imagen-ultimos"/>


    será que las rutas de las imágenes no son correctas.

    Prueba a utilizar rutas absolutas:

    .imagen-ultimos {
        background: url('/Images/botones texto - copia/fondo claro/guardar.jpg') no-repeat;
    }
        .imagen-ultimos:hover {
            background: url('/Images/boton reposo/ultimos.png') no-repeat;
        }

    con la ruta que tengan las imágenes a partir de la raíz del sitio web.


    Píldoras .NET
    Artículos, tutoriales y ejemplos de código .NET

    Píldoras JS
    Artículos, tutoriales y ejemplos de código JavaScript, HTML5, CSS3, ...

    martes, 24 de mayo de 2016 21:23

Todas las respuestas

  • ¿Cómo defines los botones?


    Píldoras .NET
    Artículos, tutoriales y ejemplos de código .NET

    Píldoras JS
    Artículos, tutoriales y ejemplos de código JavaScript, HTML5, CSS3, ...

    martes, 24 de mayo de 2016 18:46
  •       <div class="img-rounded imagen-nuevo  col-lg-2 col-md-2 col-sm-2 col-xs-2 " ">
               <asp:ImageButton ID="BtnNuevo1" runat="server" CssClass=""  /> </div>

    así es como los llamo ya que al ponerle en mismo botón no me funciona asi q tube q ingresarlos al div 

    martes, 24 de mayo de 2016 19:02
  • Las reglas css que tienes definidas se aplican a elementos que tengan una propiedad class con valor "imagen-ultimos".

    Deberías aplicar esta clase al div o al ImageButton en el que quieras que se aplique el estilo.

    Puedes probar con:

    <div class="img-rounded imagen-nuevo imagen-ultimos col-lg-2 col-md-2 col-sm-2 col-xs-2 " ">
               <asp:ImageButton ID="BtnNuevo1" runat="server" CssClass=""  /> </div>

    o con:

    <div class="img-rounded imagen-nuevo  col-lg-2 col-md-2 col-sm-2 col-xs-2 " ">
               <asp:ImageButton ID="BtnNuevo1" runat="server" CssClass="imagen-ultimos"  /> </div>


    Píldoras .NET
    Artículos, tutoriales y ejemplos de código .NET

    Píldoras JS
    Artículos, tutoriales y ejemplos de código JavaScript, HTML5, CSS3, ...

    martes, 24 de mayo de 2016 19:08
  • ya lo probe pero no me muestra ninguna imagen el el imagebutton 

    por eso los agrege los div 

     
    martes, 24 de mayo de 2016 19:17
  • El ImageButton crea un elemento image al que le asigna la imagen a la propiedad src.

    Tienes dos opciones:

    - utilizar la propiedad src y cambiarla con javascript

    - cambiar el ImageButton por un Button normal y utilizar un css como el que tratabas de aplicar al ImageButton


    Píldoras .NET
    Artículos, tutoriales y ejemplos de código .NET

    Píldoras JS
    Artículos, tutoriales y ejemplos de código JavaScript, HTML5, CSS3, ...

    martes, 24 de mayo de 2016 19:39
  • no men, no me salio con el button  y no puedo utilizar un button normal ya que tiene código 

    martes, 24 de mayo de 2016 21:17
  • Si no te funciona con un botón como:

    <asp:Button runat="server" ID="Button1" Width="70" Height="70" CssClass="imagen-ultimos"/>


    será que las rutas de las imágenes no son correctas.

    Prueba a utilizar rutas absolutas:

    .imagen-ultimos {
        background: url('/Images/botones texto - copia/fondo claro/guardar.jpg') no-repeat;
    }
        .imagen-ultimos:hover {
            background: url('/Images/boton reposo/ultimos.png') no-repeat;
        }

    con la ruta que tengan las imágenes a partir de la raíz del sitio web.


    Píldoras .NET
    Artículos, tutoriales y ejemplos de código .NET

    Píldoras JS
    Artículos, tutoriales y ejemplos de código JavaScript, HTML5, CSS3, ...

    martes, 24 de mayo de 2016 21:23