Soporte » Diseño – Temas y plantillas » Colocar un enlace en imagen de fondo

  • Resuelto Cristobal

    (@cristobal-paez)


    Buenas noches a todos. Mi problema es el siguiente: Quiero que al clickear sobre la imagen de fondo nos lleve a otra web distinta y en otra pestaña. Hasta el momento el logrado la mitad del trabajo. No se como hacer que se abra en otra pestaña. Coloque este codigo en el header:

    <div id="header" onclick="location.href='http://www.budweiser.es/public/age-gate13.aspx?ReturnUrl=/default.aspx//'">

    Dejo también la web en cuestión. http://www.salablocbarcelona.com

    ¡Muchas gracias!

Viendo 6 respuestas - de la 1 a la 6 (de un total de 6)
  • Saludos Cristobal,

    Prueba esto y nos cuentas:

    <div id="header" onClick="window.open('http://www.budweiser.es/public/age-gate13.aspx?', '_blank')"></div>

    Saludos

    Cristobal

    (@cristobal-paez)

    Buenos días Ricardo! Primero que nada muchas gracias por tomarte la molestia y analizar mi caso. Ahora mismo me pongo a ellos y te cuento como fue. Saludos

    Cristobal

    (@cristobal-paez)

    Que tal RIcardo, desafortunadamente no funciona. Ni siquiera se abre la publicidad.
    Lo que me di cuenta también es que si hago click usando mi codigo en el cuerpo del post también me redirige a Bud. Con CSS podría definir que espacios del fondo son activos y cuales no? Saludos!

    Saludos cristobal.

    Con Css puede jugar con los z-index si tuvieses varias imagenes, pero no es el caso…

    la cuestión es tratar de incluir por algún lado «_blank», que es la que abre una página nueva. A ver si viene un especialista en js y nos comenta el código anterior. Saludos!

    En realidad no se puede jugar con Javascript ya que una imagen de fondo no hace parte del DOM de html, así que la mejor solución es crear un vinculo común y corriente y con algo de css hacer la magia:
    Justo despues de la etiqueta <body> ponemos el link:

    <a class="fondo-pagina" href="http://www.budweiser.es/public/age-gate13.aspx?ReturnUrl=/default.aspx" target="_blank">Este texto del vinculo no se va a ver...</a>

    Luego en el css:

    .fondo-pagina{
     background-image: url('http://www.salablocbarcelona.com/wp- content/uploads/2013/11/fondo-bloc-sin-sidebar.png');
     background-repeat: no-repeat;
     background-position: top center;
     background-attachment: scroll;
     position: absolute;
     width: 100%; /*ancho de la ventana*/
     height: 1000px; /* Alto que tendra la imagen */
     text-indent: -9999px; /* ocultamos texto del vinculo */
     /* top: 100px; usarlo solo si deseamos bajar la imagen*/
     /* z-index: -1000 usarlo si cubre otros elementos */
     display: block
    }

    y Magia!, el fondo ahora se puede clickear!

    Cristobal

    (@cristobal-paez)

    Buenos días J3ick WpCol, muchas gracias por tu tiempo!! A lo largo del día lo pruebo y te cuento como fue.

    SALUDOS!!!!!

Viendo 6 respuestas - de la 1 a la 6 (de un total de 6)
  • El debate ‘Colocar un enlace en imagen de fondo’ está cerrado a nuevas respuestas.