Cargando...
Rango
Sexo
Mensajes
Última visita
Miembro desde

Foro Nube » Servicios » Soporte Foroactivo

Foro Cerrado
Este foro se encuentra cerrado de forma indefinida. Puedes utilizarlo para revisar material antiguo que desees recuperar.

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

Creado por ,

Mensaje [Página 1 de 1.]

Publicado el Miér 17 Dic - 20:25

avatar
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.

A 0 usuarios le gusta esto

Publicado el Miér 17 Dic - 23:59

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

A 0 usuarios le gusta esto

Firma

Tubilok
Programador y maquetador - Soporte
Equipo de Foro Nube

Publicado el Jue 18 Dic - 4:14

avatar
Claro, el tutorial es este:


Y el foro es este:

A 0 usuarios le gusta esto

Publicado el Mar 23 Dic - 21:20

avatar
Administrador
¡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';
}

A 0 usuarios le gusta esto

Firma

Bret
Representante de la comunidad - Coordinador
Equipo de Foro Nube

Publicado el Miér 24 Dic - 2:14

avatar
¡Gracias! voy a probarlo y te aviso Sonrisa

A 0 usuarios le gusta esto
Contenido patrocinado

Publicado

A 0 usuarios le gusta esto

Con la tecnología de Foroactivo y punBB