Problema con sprites

Inicio Foros WordPress Themes y Diseño Problema con sprites

Etiquetado: , , ,

Este debate contiene 10 respuestas, tiene 3 mensajes y lo actualizó  Pedro Raul hace 7 años, 8 meses.

  • Autor
    Publicaciones
  • #20934

    pfd
    Participante

    <p>Hola,<br />
    Estoy intentando subir unas imagenes con sprites, pero no logro mapear la imagen. En lugar de mostrar el trozo de imagen que le indico me muestra la imagen entera.</p>
    <p>Dejo el código por si alguien puede ayudarme:<br />

    </p>
    <p> </p>
    <p>Parece que no reconoce la linea background:url del css, puesto que todo lo demás sale bien.
    </p>

  • #51368

    pfd
    Participante

    La última línea de código también incorpora esto:

    width=”1″ height=”1″

    pero por algún motivo se borra cuando lo intento añadir al mensaje.

  • #51375

    Pedro Raul
    Participante

    usas el selector:

    img.greenarrow

    o lo veo aquí

    prueba usando:

    .greenarrow img

    suponiendo que tu imagen esta dentro de este contenedor

  • #51384

    pfd
    Participante

    gracias Pedro, pero no ha funcionado. Me desaparecen las imágenes.

  • #51392

    LGrusin
    Miembro

    Te lo explico con un ejemplo.

    Suponiendo que la imagen contenga 3 sprites en vertical de 45 pixeles de alto por 112 de ancho, la imagen resultante será de 135 (3×45) de alto por 112 de ancho.

    Es decir,

    width: 112px;
    height: 45px;

    Para seleccionar la primera imagen (de arriba a abajo)
    background: url(“images/imagen.gif”) no-repeat scroll 0px 0px transparent;

    Para la segunda:
    background: url(“images/imagen.gif”) no-repeat scroll 0px -45px transparent;

    para la tercera:
    background: url(“images/imagen.gif”) no-repeat scroll 0px -90px transparent;

    Lo de transparent por si la imagen es transparente. Adaptalo a las medidas de tu imagen.

    Por supuesto, la imagen debe estar bien hecha.

    Un saludo

  • #51421

    pfd
    Participante

    Si si, esto es lo que estoy haciendo desde el principio, sinembargo algo se me escapa, puesto que continúa apareciendo la imagen entera aunque defina solo un fragmento. He ensayado diversas combinaciones pero nada.

    He vuelto a poner el código añadiendo el norepeat y demás por si acaso, pero el resultado continúa mostrando la imagen entera a la medida del ancho y alto que le doy:

    img.greenarrow{
    width:45px;
    height:34px;
    background:url(imgsprites.png)no-repeat scroll 0 -363px transparent;
    position:absolute;margin-left:-47px;margin-top:-2px;opacity:.8;
    }

    y

    < img class=”greenarrow” src=”/wp-content/themes/publibiz-legacy/images/imgsprites.png” width=”1″ height=”1″ / >

    estoy seguro que me estoy equivocando en alguna tontería, pero no lo veo.

  • #51426

    pfd
    Participante

    mi impresión es que sencillamente no lee esta linea:

    background:url(“/images/imgsprites.png”)no-repeat scroll 0 363px transparent;

    puesto que obtengo exactamente el mismo resultado si no la añado.

  • #51434

    Pedro Raul
    Participante

    ¿lo tienes on line?, para checarlo.

    el sprite tiene que hacerlo sobre una capa.

    .greenarrow{
    width:45px;
    height:34px;
    background:url(imgsprites.png);
    position:absolute;margin-left:-47px;margin-top:-2px;opacity:.8;
    }

    <div class=”greenarrow”> </div>

  • #51435

    pfd
    Participante

    Podéis verlo en

    http://test.ejerciciodeingles.com/cursos-de-ingles-para-empresas-y-colectivos-lan01/

    identificaréis inmediatamente las dos imágenes afectadas. El resto, de momento, no están subidas con sprites.

  • #51437

    LGrusin
    Miembro

    Pero vamos a ver. ¿Qué quieres mostrar?

    ¿Por qué pones dos veces la imagen? Una en background y otra dentro de <div class=”greenarrow”> </div>

    La imagen es enorme, ¿Cómo calculas la posición de los sprites?. Prueba con una imagen más pequeña.

    El código es el que ha puesto Pedro Raul con ligeros retoques:

    Suponiendo que en esa posición 363 pixeles esté lo que quieres mostrar.

    Viendo la imagen corresponde a la flecha azul pero sale cortada. Esa flecha mide 62 x 62. No sé como has hecho los cálculos.

    Un saludo

  • #51461

    Pedro Raul
    Participante

    revisando tu hoja de estilo, encontré el error. la url de la img no esta bien definida la cambie por esto y listo. muestra un cartel en fondo negro

    div.landcl1 {
    background: url(“images/result.png”) repeat scroll 0 -526px transparent;
    height: 210px;
    margin-top: 10px;
    width: 1022px;
    }

El foro ‘Themes y Diseño’ está cerrado y no se permiten nuevos debates ni respuestas.

Pin It on Pinterest

Ir al contenido