Liens originaux Bouton_activeLiens originaux Bouton_hoverLiens originaux Fb-hoverLiens originaux Fb-active
CSSActif, le forum, n'est plus maintenu. Il est néanmoins disponible pour consultation. Pour des outils pratiques, rendez-vous sur:

Découvrez CSSActif, une collection d'outils et de tutoriels interactifs pour les développeurs Web — HTML, CSS, JavaScript et bien plus!

Derniers sujets
» Système d'onglets simple et personnalisable
Liens originaux EmptyLun 03 Juin 2024, 17:20 par birds

» Fiche de Présentation RPG
Liens originaux EmptySam 30 Mar 2024, 22:07 par Peyton972

» [RPG] Fiche personnage avec bannière
Liens originaux EmptySam 30 Mar 2024, 22:06 par Peyton972

» Structure de Qui Est En Ligne (1)
Liens originaux EmptyLun 04 Mar 2024, 23:20 par Peyton972

» Qui Est En Ligne - Utopia
Liens originaux EmptyDim 24 Déc 2023, 18:16 par romee

» Pack forum complet "Androïd Sylver" RPU (N°2)
Liens originaux EmptyJeu 02 Nov 2023, 06:42 par Hydrar

» Formulaire de connexion rapide amélioré
Liens originaux EmptySam 04 Mar 2023, 18:57 par Krager

» Avatar centré dans le profil
Liens originaux EmptySam 11 Fév 2023, 06:04 par Krager

Le Deal du moment : -43%
-100€ Pack rééquipement Philips Hue ...
Voir le deal
129.99 €

Partagez
 

Liens originaux

Voir le sujet précédent Voir le sujet suivant Aller en bas 
http://devil-tears.forumactif.org/
OceanSoul
OceanSoul
{ Membre }
{ Membre }

Féminin Messages : 137



Liens originaux Empty
Bonzour bonzour Smack Smack

J'ai un petit soucis, j'aimerais arriver à faire un effet semblable à celui-ci (The Rules, The Daily News...) sur les liens de mon forum, mais je ne sais pas trop comment m'y prendre Oo
Je me suis déjà servie du code qui permet d'appliquer l'effet de fondu sur les images, mais j'avoue ne pas trop savoir comment faire pour arriver à le mettre sur des liens.
Merci d'avance pour votre aide Calins
MessageSujet: Liens originaux   Liens originaux EmptyMar 06 Avr 2010, 09:12
Revenir en haut Aller en bas
http://nin-gai.forum2ouf.com/
Imari
Imari
{ Membre hyper-actif }
{ Membre hyper-actif }

Féminin Messages : 1538



Liens originaux Empty
Bonjour ^^

Merci d'utiliser la fonction rechercher la prochaine fois Wink

https://css-actif.forumactif.org/images-f6/effet-d-opacite-sur-une-image-t431.htm
MessageSujet: Re: Liens originaux   Liens originaux EmptyMar 06 Avr 2010, 12:15
Revenir en haut Aller en bas
http://wfwp.forumactif.com
Episkey
{ Membre }
{ Membre }

Féminin Messages : 32



Liens originaux Empty
Coucou,
Il ne s'agit pas d'une image Imari.
Sinon, OceanSoul, il s'agit en fait de javascript, et bon, à mon avis, les admins ne doivent pas vouloir qu'on utilise leur script. T'y connais-tu un peu en javascript ? =/

Edit : Rectification, il s'agit d'un script libre de droit - http://www.dynamicdrive.com/dynamicindex11/gradualfader.htm
La démarche est expliquée pour un site dans ce tuto par contre, donc il faut l'adapter pour un forum, en passant par les templates.
=> Irrelevant


Dernière édition par Episkey le Mar 06 Avr 2010, 12:29, édité 3 fois
MessageSujet: Re: Liens originaux   Liens originaux EmptyMar 06 Avr 2010, 12:18
Revenir en haut Aller en bas
http://nin-gai.forum2ouf.com/
Imari
Imari
{ Membre hyper-actif }
{ Membre hyper-actif }

Féminin Messages : 1538



Liens originaux Empty
Si tu regardes vers la fin du topic, la solution y est donnée page 7 il me semble ^^
MessageSujet: Re: Liens originaux   Liens originaux EmptyMar 06 Avr 2010, 12:19
Revenir en haut Aller en bas
http://wfwp.forumactif.com
Episkey
{ Membre }
{ Membre }

Féminin Messages : 32



Liens originaux Empty
Ah oui, désolée Imari, je n'ai pas eu le réflexe de regarder dans toutes les pages. Ca pourrait peut-être être bien de l'ajouter dans le titre ou quelque part dans le premier message, histoire de faciliter en cas de recherche ? =$
MessageSujet: Re: Liens originaux   Liens originaux EmptyMar 06 Avr 2010, 12:28
Revenir en haut Aller en bas
http://devil-tears.forumactif.org/
OceanSoul
OceanSoul
{ Membre }
{ Membre }

Féminin Messages : 137



Liens originaux Empty
NIah quel morue Oo je suis vraiment désolée d'avoir fait cette demande alors que la solution était déjà donné Arrow
J'ai vu le topic en plus, mais que je pensais qu'il ne s'agissait que d'une explication concernant les images Embarassed Vraiment désolée
MessageSujet: Re: Liens originaux   Liens originaux EmptyMar 06 Avr 2010, 14:36
Revenir en haut Aller en bas
http://generation.geek.chez.com
Boow
Boow
{ Membre actif }
{ Membre actif }

Masculin Messages : 866



Liens originaux Empty
La demande est-elle terminée ?
MessageSujet: Re: Liens originaux   Liens originaux EmptyMar 06 Avr 2010, 15:10
Revenir en haut Aller en bas
http://devil-tears.forumactif.org/
OceanSoul
OceanSoul
{ Membre }
{ Membre }

Féminin Messages : 137



Liens originaux Empty
Ben en fait non Oo
Parce que j'ai regardé le topic, et je n'ai pas vraiment trouvé la réponse à ma question. J'ai essayé de bidouiller en me servant du tuto pour faire de jolis titres et les codes donnés, mais ça ne fait rien Oo
Si quelqu'un sait comment faire, parce que là franchement je vois vraiment pas comment m'y prendre Euh..
MessageSujet: Re: Liens originaux   Liens originaux EmptyMar 06 Avr 2010, 15:40
Revenir en haut Aller en bas
http://wfwp.forumactif.com
Episkey
{ Membre }
{ Membre }

Féminin Messages : 32



Liens originaux Empty
Re,
Après relecture attentive, effectivement, il ne s'agit quand même que d'images xD Mais bon, c'est facilement applicable à d'autres choses.
En fait, il faut se servir du tuto page 7 :

Howard Wolowitz a écrit:
Salut ! On peut aussi embellir cet effet avec du jQuery. Il faut commencer par mettre sur chaque images où on veut qu'apparaisse cet effet une classe particulière; je vais l'appeler ici opacity. Ensuite il faut entrer ce code dans overall_header_new :
Code:
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('.opacity').each(function() {
   jQuery(this).fadeTo(0,0.5);
   jQuery(this).mouseenter(function(){jQuery(this).stop();jQuery(this).fadeTo('normal',1);});
   jQuery(this).mouseleave(function(){jQuery(this).stop();jQuery(this).fadeTo('normal',0.5);});
});
});
</script>

Ici, comme vous pouvez le voir, j'ai choisis de faire passer l'opacité de 0.5 à 1 mais vous pouvez évidemment changer ce paramètre en remplaçant “jQuery(this).fadeTo(0,0.5);” par “jQuery(this).fadeTo(0,X);” où X est l'opacité avant de passer le curseur et “{jQuery(this).stop();jQuery(this).fadeTo('normal',0.5);});” par “{jQuery(this).stop();jQuery(this).fadeTo('normal',X);});” où X est l'opacité lorsqu'on enlève le curseur de l'élément (il est conseillé de mettre la même opacité qu'avant de passer le curseur dessus. Pour finir, si vous ne souhaitez pas appeler votre classe “opacity”, il vous suffit de remplacer “jQuery('.opacity').each(function() {” par “jQuery('.X').each(function() {” où X est le nom de votre classe. Attention, pensez à ne pas enlever le point juste avant le nom de la classe ! Wink
Voilà, si vous avez un problème n'hésitez pas ! Smile
H. Wolowitz

Il suffit d'appliquer la classe opacity à d'autres éléments que des images (dans ton cas les divs contenant les titres des catégories)
MessageSujet: Re: Liens originaux   Liens originaux EmptyMar 06 Avr 2010, 18:14
Revenir en haut Aller en bas
http://devil-tears.forumactif.org/
OceanSoul
OceanSoul
{ Membre }
{ Membre }

Féminin Messages : 137



Liens originaux Empty
Bon ben j'ai tenté de suivre les indications de ce que tu m'as donné, et de mettre la classe là où se trouvait mes titres, le soucis c'est que rien ne se passe. Les effets que j'avais mis sur mes titres, n'apparaissent pas, de même pour le fondu Oo
Je me sens un peu bête sur ce coup là pale
MessageSujet: Re: Liens originaux   Liens originaux EmptyMer 07 Avr 2010, 05:48
Revenir en haut Aller en bas
http://nin-gai.forum2ouf.com/
Imari
Imari
{ Membre hyper-actif }
{ Membre hyper-actif }

Féminin Messages : 1538



Liens originaux Empty
Bonjour ^^

Peux-tu me montrer tes templates Overall-Header-New et Overall-Footer, ainsi que ton CSS s'il te plaît ?
MessageSujet: Re: Liens originaux   Liens originaux EmptyMer 07 Avr 2010, 07:09
Revenir en haut Aller en bas
iowan
iowan
{ Membre actif }
{ Membre actif }

Masculin Messages : 304



Liens originaux Empty
hmm ce script en haut est mal ecrit en plus il ya le boucle foreach =X pour économiser quelques millisecondes voici une version clean de ce script
tu peut le mettre n'importe ou dans le PA par exemple mais il est recommandé de le mettre
avant
Code:
</head>
dans le template overall_header_new
Code:

<script type="text/javascript">
(function($) {
   $obj = $('.opacity');

   $obj.css({opacity: .5}).hover(function() {
      $(this).stop().animate({ "opacity" : 1 });
   }, function() {
      $(this).stop().animate({ "opacity" : .5 });   
   });

})(jQuery);
</script>

la structure du lien est la suivant
Code:
<a class="opacity" href="#">mon lien</a>
pour un text
Code:
<div class="opacity">mon text</div>
MessageSujet: Re: Liens originaux   Liens originaux EmptyMer 07 Avr 2010, 08:02
Revenir en haut Aller en bas
http://devil-tears.forumactif.org/
OceanSoul
OceanSoul
{ Membre }
{ Membre }

Féminin Messages : 137



Liens originaux Empty
Merci pour ton aide Iowan, mais même avec ce que tu m'as donné, ça ne fonctionne pas Oo

Voici mes templates:
Overall-Footer:
Spoiler:

Overall-Header-New:
Spoiler:

Et mon CSS:
Spoiler:

Voilà Neutral
Merci pour votre aide, vraiment <3 Smack Smack
MessageSujet: Re: Liens originaux   Liens originaux EmptyMer 07 Avr 2010, 08:58
Revenir en haut Aller en bas
http://devil-tears.forumactif.org/
OceanSoul
OceanSoul
{ Membre }
{ Membre }

Féminin Messages : 137



Liens originaux Empty
Personne ne sait comment faire? Sad
MessageSujet: Re: Liens originaux   Liens originaux EmptyLun 12 Avr 2010, 07:40
Revenir en haut Aller en bas
http://wfwp.forumactif.com
Episkey
{ Membre }
{ Membre }

Féminin Messages : 32



Liens originaux Empty
Bonjour,
Je viens de retester sur un forum, et les codes donnés marchent.
Es-tu sûr que tu as bien attribué la classe opacity aux titres de tes différents sous-forums ?
MessageSujet: Re: Liens originaux   Liens originaux EmptyLun 12 Avr 2010, 10:27
Revenir en haut Aller en bas
http://devil-tears.forumactif.org/
OceanSoul
OceanSoul
{ Membre }
{ Membre }

Féminin Messages : 137



Liens originaux Empty
J'ai réussit à trouver finalement.
J'avais mis une classe 'gradualfader' et non 'opacity' à mes sous forums... Vive la gourde --_--'
xD
MessageSujet: Re: Liens originaux   Liens originaux EmptyLun 12 Avr 2010, 10:28
Revenir en haut Aller en bas
http://generation.geek.chez.com
Boow
Boow
{ Membre actif }
{ Membre actif }

Masculin Messages : 866



Liens originaux Empty
Je peux donc classer ?
MessageSujet: Re: Liens originaux   Liens originaux EmptyLun 19 Avr 2010, 05:34
Revenir en haut Aller en bas
http://nin-gai.forum2ouf.com/
Imari
Imari
{ Membre hyper-actif }
{ Membre hyper-actif }

Féminin Messages : 1538



Liens originaux Empty
Je classe. ^^
MessageSujet: Re: Liens originaux   Liens originaux EmptyMer 05 Mai 2010, 09:13
Revenir en haut Aller en bas
Contenu sponsorisé




Liens originaux Empty
MessageSujet: Re: Liens originaux   Liens originaux Empty
Revenir en haut Aller en bas
 

Liens originaux

Voir le sujet précédent Voir le sujet suivant Revenir en haut 
Page 1 sur 1

 Sujets similaires

-
» QEEL; Noms de groupes originaux
» [Liens] Liens avec fond coloré
» Liens [Q]
» bug de liens
» Liens

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
CSSActif :: De la théorie à la pratique :: Aide CSS & xHTML :: Problèmes résolus-

Partenaires Or


← Page précédente   ↑ Aller en haut Copyright © CSSActif 2009 - 2013 Tous droits réservés
Créer un forum | ©phpBB | Forum gratuit d'entraide | Signaler un abus | Cookies | Forum gratuit