Como vincular um link a uma imagem de fundo CSS

  • Autor Autor DenisS
  • Data de início Data de início
Tradução em andamento: em alguns minutos este tópico estará em português. Por enquanto, o conteúdo está no original em espanhol. Ver original
D

DenisS

Beta
Redactor
Usuário com poucas negociações! Use sempre o saldo do ForoBeta!
Bueno como veréis en mi sitio warez tengo una imagen en CSS arriba en el header, y esa imagen hace el papel del nombre del sitio o como un logo personalizado como nombre, que así queda mas elegante que un simple nombre centrado o la izquierda de un color y textura extrangulable.

Bueno la única diferencia del nombre que te dan en las plantillas por defecto de Blogger que es en donde tengo hosteado el sitio, que este logo no tiene enlace que dirige a la página de inicio.

Ahora viene mi pregunta, como podría yo vincular un link a la imagen que es tomada como imagen de fondo ya que está en el código CSS, como podría yo enlazarle un vínculo hacia la página de inicio.

Sabiendo que yo la imagen la tengo de esta forma:

Inserir CODE, HTML ou PHP:
.pbt-header
{
   margin:0 auto;
   height: 127px;
   background-image: url('http://i.imgur.com/QRefBfg.png');
   background-position: 0px -5px,420px 2px, 0 0;
   background-repeat: no-repeat;
   position: relative;
   z-index: auto !important;
}

He estado buscando en Google unas 3 horas y he probado casi todas las formas posibles antes de acudir aquí y preguntar por mi cuenta, por supuesto que ninguna forma me funcionó, hay algunas que me creaban las imágenes en el footer, otras me creaban una palabra con link arriba e la imagen, otras incluso me llegaban a crear un logo idéntico abajo del otro.

Soy principiante y eso una Plantilla gratuita en Creative Commons que estoy modificando como mi primer Plantilla, es Creative Commons no piensen que estoy robando derechos o algo 😕

Al parecer me he dado cuenta de que el logo esta señalado con Jquery no se si tiene algo que ver pero aqui no se si podríais modificarme una cosa o ponerme un enlace por Jquery o no se, creo que tiene algo que ver con el Logo:

Inserir CODE, HTML ou PHP:
jQuery(function ($) {
    "use strict";
    if (!$.browser.msie || parseInt($.browser.version, 10) > 8)
        return;
    var path = "";
    var scripts = $("script[src*='script.js']");
    if (scripts.length > 0) {
        var src = scripts.last().attr('src');
        path = src.substr(0, src.indexOf("script.js"));
    }
    var header = $(".pbt-header");
    var bgimages = "url('http://i.imgur.com/QRefBfg.png'), ".split(",");
    var bgpositions = "-1px 33px,430px 2px, ".split(",");
    for (var i = bgimages.length - 1; i >= 0; i--) {
        var bgimage = $.trim(bgimages[i]);
        if (bgimage === "")
            continue;
        if (path !== "") {
            bgimage = bgimage.replace(/(url\(['"]?)/i, "$1" + path);
        }
        header.append("<div style=\"position:absolute;top:0;left:0;width:100%;height:100%;background:" + bgimage + " " + bgpositions[i] + " no-repeat\">");
    }
    header.css('background-image', "url('http://i.imgur.com/QRefBfg.png')".replace(/(url\(['"]?)/i, "$1" + path));
    header.css('background-position', "0 0");
});
var artInsertSidebarBlocks = (function ($) {
    return function () {
        if ($("body#layout").length > 0) return true;
        $("div.widget").each(function (i, w) {

            if ($(this).parent('#header').length) {
                if (!$(this).hasClass('Header')) {
                    $(this).addClass('pbt-header-widget');
                }
                return true;
            }

            if ($(this).children('.pbt-no-change').length) return true;

            if (w.id == 'Navbar1') return true;
            if (w.id == 'Header1') return true;
            if (w.id == 'Blog1') return true;


            if (w.id == 'LinkList99') return true;
            if (w.id == 'LinkList98') return true;
            if (w.id == 'LinkList97') return true;
            if (w.id == 'PageList98') return true;
            if (w.id == 'PageList99') return true;
            if (w.id == 'Text99') return true;
            if (w.id == 'BlogArchive99') return true;

            var widget = $(w);
            if ((widget.hasClass('Gadget') || widget.hasClass('Followers')) && $.browser.opera) {
                return true;
            }

            var widgetTitle = $("h2", widget).text();
            $("h2", widget).remove();
            var widgetContent = widget.html();

            if (widgetContent.indexOf('googlesyndication.com') > -1) return true;
            if (widgetContent.indexOf('statcounter.com/counter/counter_xhtml.js') > -1) return true;
            if (widgetContent.indexOf('bravenet.com/counter/code.php') > -1) return true;

            var startBlock = '<div class="pbt-block clearfix" id="pbt-'+w.id+'">';
            var startBlockHeader = '<div class="pbt-blockheader">            <h3 class="t">';
            var endBlockHeader = '</h3>        </div>';
            var startBlockContent = '<div class="pbt-blockcontent">';
            var endBlockContent = '</div>';
            var endBlock = '</div>';

            widgetContent = startBlockContent + widgetContent + endBlockContent;
            if (widgetTitle && true) {
                widgetContent = startBlockHeader + widgetTitle + endBlockHeader + widgetContent;
            }
            $(widget).html(startBlock + widgetContent + endBlock);

            if (widget.hasClass('Subscribe')) {
                widget.css({ 'position': 'relative', 'z-index': '2' })
            }

        });
    };
})(jQuery);

Estaré muy agradecido si álguien me lo soluciona o ayuda en esto, saludos 😀
 
Foi útil? Participe da conversa

Com sua conta grátis você pode responder, mandar mensagem privada ao autor e comprar com Saldo retido: o pagamento é liberado quando você recebe o combinado.

Leva 30 segundos · você volta a este tópico ao terminar
Hola.

Por lo que alcance a ver el logo esta en .pbt-header, para mi la forma mas facil de hacerlo es utilizando la funcion click (.click() | jQuery API Documentation) de jquery

Inserir CODE, HTML ou PHP:
$( ".pbt-header" ).click(function() {
  window.location = "http://www.google.com/"
});
recuerda que puedes utilizar utilizar .ready() | jQuery API Documentation

La otra forma que se me ocurre es agregar el <a> dentro de esta linea.

Inserir CODE, HTML ou PHP:
header.append("<div style=\"position:absolute;top:0;left:0;width:100%;height:100%;background:" + bgimage + " " + bgpositions[i] + " no-repeat\">");

Salu2, espero al menos haberte dado una idea! 🙂
 
Compañero no funciona con ninguna de las 2 maneras, alguna otra solución?
 
no se mucho de esto pero si intenta rodearla con una etiqueta <a> href="vinculo" </a> almenos yo he hecho asi no se si me entiendas
 
Algún experto o programador? Ya que por lo que veo tu solo sabes lo básico de html y has escrito unas etiquetas sin saber lo que intento hacer xD
 
Intenta con:

Inserir CODE, HTML ou PHP:
$( document ).ready(function() {
    $(document).on('click', '.pbt-header', function(e){ 
     e.preventDefault();
     window.location = "http://www.google.com/"
    }); 
});
 
Donde pongo esto? Perdón pero soy torpe con esto y aun no he comenzado mi estudio de este año en el que me toca Javascript, me faltan 1 mes y medio
 
dentro de esta etiqueta

Inserir CODE, HTML ou PHP:
<script type="text/javascript">aqui</script>
 
Pero en que parte en el Jquery, Html, CSS, en donde? En que apartado de la Plantilla pego el código que me has pasado, yo en la plantilla veo montones de estas etiquetas
 
Jquery o javascript
 
Jquery o javascript

Bueno he estado algún tiempo ocupado con otras cosas por eso no he visto tu mensaje sorry por tardar mucho en responder, gracias amigo me ha funcionado correctamente, ahora si me pudieras explicar como hacer cuando pasas con el mouse por la zona del banner es decir del logo en donde das clic que se ponga el puntero de la mano, es que al pasar con el mouse se ve el puntero normal, te estaría mas que agradecido

- - - Actualizado - - -

Ya lo hice funcionar en el CSS pegando cursor:move;, gracias igualmente, caso cerrado, saludos
 
Voltar
Topo