[PHPBB3][Pedido] Añadir efecto a las leyendas de grupos anunciadas con imágenes

Ver el tema anterior Ver el tema siguiente Ir abajo

[PHPBB3][Pedido] Añadir efecto a las leyendas de grupos anunciadas con imágenes

Mensaje por Saori el Miér 17 Dic - 20:25

Hola, Sonrisa  Mi foro es phpbb3 y el navegador que uso es Chrome.

Usé un código CSS y un Javascript para poner las leyendas de grupos anunciadas con imágenes, tras modificarlo un poco para adaptarlo a lo que quería, queda de este modo:

Spoiler:

Cada grupo tiene una imagen distinta y me gustaría que la parte encerrada en un círculo rojo, que muestra el nombre del grupo, fuera del mismo tamaño y forma de cada imagen, que quedara detrás de ésta y que cuando el mouse pasara por la imagen, ésta desapareciera hacia dentro mostrando así el nombre de cada grupo correspondiente a cada imagen.

Gracias de antemano por su valiosa ayuda.
avatar
Saori

Mensajes : 14
Fecha de inscripción : 25/11/2014

Ver perfil de usuario

Volver arriba Ir abajo

Re: [PHPBB3][Pedido] Añadir efecto a las leyendas de grupos anunciadas con imágenes

Mensaje por Tubilok el Miér 17 Dic - 23:59

Necesito ver el tutorial que has seguido o, mejor aún, el foro donde lo has implementado.

Firma

Tubilok
Programador y maquetador - Soporte
Equipo de Foro Nube
avatar
Tubilok
Soporte

Mensajes : 65
Fecha de inscripción : 31/08/2014

Ver perfil de usuario http://dropart.foroactivo.com/

Volver arriba Ir abajo

Re: [PHPBB3][Pedido] Añadir efecto a las leyendas de grupos anunciadas con imágenes

Mensaje por Saori el Jue 18 Dic - 4:14

Claro, el tutorial es este:


Y el foro es este:
avatar
Saori

Mensajes : 14
Fecha de inscripción : 25/11/2014

Ver perfil de usuario

Volver arriba Ir abajo

Re: [PHPBB3][Pedido] Añadir efecto a las leyendas de grupos anunciadas con imágenes

Mensaje por Bret el Mar 23 Dic - 21:20

¡Oops! No se como me he podido olvidar de tí. Perdona.

El código que has pasado no está hecho para permitir esa opción, puesto que ha sido pensado de otra forma. He hecho yo uno que cumple con tus requisitos.

CSS:

Código:
#legend {
 margin: 10px 0;
}
#legend a {
 background-size: cover;
 display: inline-block;
 height: 60px;
 width: 60px;
 margin-left: 10px;
 border-radius: 100%;
 overflow: hidden;
}

#legend a:last-child {
 margin-right: 0;
}

#legend a > span {
 width: 100%;
 height: 100%;
 line-height: 60px; /* Asegúrate de que cuadre con la altura */
 text-align: center;
 display: block;
 background-color: black;
 overflow: hidden;
 color: white;
 font-size: 9px;
 opacity: 0;
 -webkit-transition: opacity 1s;
 -moz-transition: opacity 1s;
 -ms-transition: opacity 1s;
 transition: opacity 1s;
}

#legend a:hover > span {
 opacity: .8;
}

JavaScript:

Código:
var groupImages = new Array();
groupImages[0] = 'http://r20.imgfast.net/users/2516/51/54/10/avatars/143-97.jpg' // Enlace a la imagen que aparecerá en cualquier grupo
groupImages[1] = 'https://socialprofiles.zenfs.com/images/a1ce73923d70732c68b96c3d2d5c2f4a_128.png'; // Enlace a la imagen del primer grupo que aparezca
groupImages[2] = 'http://r20.imgfast.net/users/2516/51/54/10/avatars/66-26.png'; // Enlace a la imagen del segundo grupo que aparezca

/* Copia la variable groupImages[n] sustituyendo n por el grupo que esté en la posición n en tu foro */

document.addEventListener('DOMContentLoaded', hoverGroups_flerex);
function hoverGroups_flerex() {
   var a = document.getElementById('i_whosonline').nextElementSibling.children;
   var b = a[a.length-1];
   var c = b.children;
   var d = new Array();
   for(var i = 0; i < c.length; i++) {
      d.push([c[i].textContent,c[i].firstChild.href]);
   }
   while(b.firstChild) {
      b.removeChild(b.firstChild);
   }
   for(var i = 0; i < d.length; i++) {
      var e = document.createElement('a');
      var f = document.createElement('span');
      e.href = d[i][1];
      f.innerHTML = d[i][0];
      e.style.backgroundImage = 'url(\''+ groupImages[i+1] +'\')';
      e.appendChild(f);
      b.appendChild(e);
   }
   b.id = 'legend';
}

Firma

Bret
Representante de la comunidad - Coordinador
Equipo de Foro Nube
avatar
Bret
Administrador

Mensajes : 544
Fecha de inscripción : 10/08/2013

Ver perfil de usuario http://www.foronube.net

Volver arriba Ir abajo

Re: [PHPBB3][Pedido] Añadir efecto a las leyendas de grupos anunciadas con imágenes

Mensaje por Saori el Miér 24 Dic - 2:14

¡Gracias! voy a probarlo y te aviso Sonrisa
avatar
Saori

Mensajes : 14
Fecha de inscripción : 25/11/2014

Ver perfil de usuario

Volver arriba Ir abajo

Re: [PHPBB3][Pedido] Añadir efecto a las leyendas de grupos anunciadas con imágenes

Mensaje por Contenido patrocinado


Contenido patrocinado


Volver arriba Ir abajo

Ver el tema anterior Ver el tema siguiente Volver arriba


 
Permisos de este foro:
No puedes responder a temas en este foro.