ruleta de amigos para hi5

Tema en 'Foro Libre' iniciado por DaNgEroUs 99999, 20 May 2009.

  1. DaN

    DaNgEroUs 99999
    Expand Collapse
    Recluta

    Mensajes:
    15
    Me Gusta recibidos:
    0
    [Aporte]Ruleta de amigos en acerca de mi
    « : 19 de Mayo del 2009, 04:49:54 »


    Esta es una manera de poner los amigos principales, dentro de acerca de mi
    sin mover la seccion o hacer algo raro a su hi5.

    El codigo hace una circulo de amigos, dejando un espacio
    en medio y cada que pasas el mouse por encima de un amigo
    en la parte de enmedio aparece en grande la imagen de ese amigo
    o cualquier otra imagen que quieras.

    Bueno pss este es el codigo:

    HTML
    <div id="symarcs-galeria">
    <a class="symarcs-imagen" href="URL_de_tu_amigo"><img class="fotos" src="URL de la imagen que forma el circulo" title="Amigo1"/><span><img class="ventana" src="URL de la imagen que aparecera"/><br/></span></a>

    <a class="symarcs-imagen" href="URL_de_tu_amigo"><img class="fotos" src="URL de la imagen que forma el circulo" title="Amigo12"/><span><img class="ventana" src="URL de la imagen que aparecera"/></span></a>

    <a class="symarcs-imagen" href="URL_de_tu_amigo"><img class="fotos" src="URL de la imagen que forma el circulo" title="Amigo11"/><span><img class="ventana" src="URL de la imagen que aparecera"/><br/></span></a>

    <a class="symarcs-imagen" href="URL_de_tu_amigo"><img class="fotos" src="URL de la imagen que forma el circulo" title="Amigo10"/><span><img class="ventana" src="URL de la imagen que aparecera"/><br/></span></a>

    </br><a class="symarcs-imagen" href="URL_de_tu_amigo"><img class="fotos" src="URL de la imagen que forma el circulo" title="Amigo2"/><span><img class="ventana" src="URL de la imagen que aparecera"/><br/></span></a>

    <a id="pad" class="symarcs-imagen" href="URL_de_tu_amigo"><img class="fotos" src="URL de la imagen que forma el circulo" title="Amigo9"/><span><img class="ventana" src="URL de la imagen que aparecera"/></span></a>

    </br><a class="symarcs-imagen" href="URL_de_tu_amigo"><img class="fotos" src="URL de la imagen que forma el circulo" title="Amigo3"/><span><img class="ventana" src="URL de la imagen que aparecera"/><br/></span></a>

    <a id="pad" class="symarcs-imagen" href="URL_de_tu_amigo"><img class="fotos" src="URL de la imagen que forma el circulo" title="Amigo8"/><span><img class="ventana" src="URL de la imagen que aparecera"/></span></a>

    </br><a class="symarcs-imagen" href="URL_de_tu_amigo"><img class="fotos" src="URL de la imagen que forma el circulo" title="Amigo4"/><span><img class="ventana" src="URL de la imagen que aparecera"/><br/></span></a>

    <a class="symarcs-imagen" href="URL_de_tu_amigo"><img class="fotos" src="URL de la imagen que forma el circulo" title="Amigo5"/><span><img class="ventana" src="URL de la imagen que aparecera"/><br/></span></a>

    <a class="symarcs-imagen" href="URL_de_tu_amigo"><img class="fotos" src="URL de la imagen que forma el circulo" title="Amigo6"/><span><img class="ventana" src="URL de la imagen que aparecera"/><br/></span></a>

    <a class="symarcs-imagen" href="URL_de_tu_amigo"><img class="fotos" src="URL de la imagen que forma el circulo" title="Amigo7"/><span><img class="ventana" src="URL de la imagen que aparecera"/><br/></span></a>
    </div>

    Cambian:
    URL_de_tu_amigo --> por la direccion hi5 de cada amigo
    URL de la imagen que forma el circulo --> Son las imagenes que estan alrededor
    URL de la imagen que aparecera --> Es la imagen q aparecera al poner el mouse encima de una imagen de alrededor

    CSS
    <style type="text/css">
    #symarcs-galeria{
    position: relative;
    height:450;width:350px;
    border: 0px;}

    .symarcs-imagen img{
    border: 2px solid black;
    margin: 0 5px 5px 0;}

    .symarcs-imagen:hover img{
    border: 2px Dashed #FF0000;}

    .symarcs-imagen span{
    position: absolute;
    background-color: transparent;
    visibility: hidden;
    color: black;
    text-decoration: center;}

    .symarcs-imagen:hover span{
    visibility: visible;
    left: 90px;
    top:115px;
    z-index: 10;}

    .symarcs-imagen .fotos{
    width:75px;height:100px;}

    .symarcs-imagen .ventana{
    width:160px;height:210px;}

    #pad.symarcs-imagen {padding-left:175px;}
    </style>

    Ahora una imagen para que vean el funcionamiento.
    Asi es como se ve cuando el mouse no esta sobre
    ningun amigo:





     
  2. lRa

    lRay
    Expand Collapse
    Teniente Coronel

    Mensajes:
    1.094
    Me Gusta recibidos:
    6
    Seria bueno que pusieras una captura de como quedaria..

    saludoz!
     
  3. lNe

    lNewDance
    Expand Collapse
    Cabo

    Mensajes:
    170
    Me Gusta recibidos:
    0
    Wooh .. parece qe qedaria bien
    Pero como dice ray una fotito no vendria nada mal
     

Compartir esta página