No estás registrado (Registrarse)

Vanilla 1.1.10 es un producto de Lussumo. Para más información: Documentación, Soporte.

Desarrollo Web: Como se hace un fondo "clicable"?

Abajo

1 a 6 de 6

  1.  
    •  
      CommentAuthorruben_gzz
    • CommentTimeApr 26th 2012
     # 1
    He estado buscando en diferentes foros, soporte de wordpress, incluso ofrecido paga a cambio, y no he podido lograr lo que quiero.

    Como puedo hacer que sitio bajo wordpress tenga un fondo clickable como el sitio browsergamez.com?

    Parece que es simplemente añadir la imagen de fondo, y crear una especie de capa transparente que es lo que hace el efecto "mega banner"

    alguien podria ayudar a este novato?Adspree Media
    • CommentAuthorDeXon
    • CommentTimeApr 26th 2012
     # 2
    Lo único que se me ocurrió fue que crees un div de fondo de lado a lado y con este ejemplo:

    <code><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Div clickable</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript"></script>
    <script language="javascript">
    $(document).ready(function() {
    $(".caja").click(function(){
    window.location=$(this).find("a").attr("href");
    return false;
    });
    });
    </script>
    <style type="text/css">
    .caja{
    width:100%;
    height:1000px;
    background-color:#0066CC;
    color:#FFF;
    cursor:pointer;
    }
    .caja a{color:#FFF;}
    html {
    width: 100%;
    heigth: 100%;
    }
    body {
    width: 100%;
    heigth: 100%;
    }</style>
    </head>
    <body>
    <div class="caja">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas bibendum luctus mauris, vitae laoreet ligula pulvinar sed. Maecenas tincidunt egestas tortor ac dignissim. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed vitae velit mattis justo faucibus ullamcorper. In quis est nec metus lobortis dapibus.
    <a href="http://google.es">link</a>
    </div>
    </body>
    </html></code>

    Como decia es solo un ejemplo es cuestion de adaptarlo :smash:
  3.  # 3
    tambien es posible con con la propiedad css z-index

    mira más aqui: http://www.w3schools.com/cssref/pr_pos_z-index.asp

    y tambien con un div principal como lo hacen ally:

    #fondo {
    display: block;
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0;
    top: 0;
    cursor: pointer;
    }

    #fondo a.klick {
    display: block;
    height: 100%;
    width: 100%;
    text-decoration: none;
    color: transparent;
    top: 0px;
    left: 0px;
    }
    •  
      CommentAuthorruben_gzz
    • CommentTimeApr 26th 2012
     # 4
    pues parece que me voy acercando pero aun nada hehe, ya puedo hacer click pero me mueve todo el contenido :dumb:Adspree Media
    • CommentAuthorMafiay2k
    • CommentTimeApr 27th 2012
     # 5
    En el body pones el background en .css
    Luego creas un fondo fixed que es el linkable.
    Realmente tu ves el fondo de background del body, y el anchor es transparente aunque tambien se podría mandar a gipuzcoa con un text-indent:-100000em; el height / width del a permitirá que sea todo linkable.
    Si tienes problemas con el movimiento dale propiedad a la capa superior overflow:hidden;Dominios venta
    •  
      CommentAuthordcaceres
    • CommentTimeApr 27th 2012
     # 6

1 a 6 de 6

  1.