Image s'éclairsit au passage du curseur

[suigetsu deus]

Rappel du premier message :

Bonjour, j'aimerais savoir comment faire pour que les images de mes sous-forum s'éclairssisse au passage du curseur de la souris, qu'il se différencie part rapport aux autres.
Mon site: http://phalange-spartiate.forum-pro.fr/index.htm

ex:

puis change quand le curseur est dessus:

A bientôt j'espère

[tuning78]

oui dans la sase blanche ou il faut l'enregistrer sur la feuille ""Voir le CSS de base de votre forum""

et sinon pour la case de desactiver le CCS de base c'est bien cocher non

[Renald]

Oui il faut que se soit cocher non.
Tu ne peux pas l'enregistrer sur le css de base c'est juste pour le voir.

[tuning78]

ok donc je l"avai mis dans le tableau blanc

[Renald]

Et tu as bien mis le span avec la class "eclairci" autour de l'image?

[tuning78]

Les url des images elles sont déjà placées dans les descriptions des catégories.
Vous pouvez essayer ceci:
Devant les url des images concernées vous mettez:

Code:

<span class="eclairci"><img src="[img]http://i20.servimg.com/u/f20/11/00/90/13/500x2010.jpg[/img]" /></span>

Dans le css vous mettez:

Code:

.eclarci:hover
{
filter:alpha(opacity=50);
}

.eclarci
{
filter:alpha(opacity=100);
}

voila comment j'ai fait sinon esce normale quand on site le message que SPAN a la fin de mon lien img il y a un slash a l'enver et quand on poste le msg il est normal avec un espace?

[Renald]

Retire les balises [img] et le code sera parfait.
Je ne sais pas pourquoi c'est différent quand tu postes mais à la fin de la balise <img c'est bien /> avec un espace devant.

Et dans le css c'est une faute que j'avais faite c'est ecrit eclarci au lieu de eclairci il faut rajouter le "i" sinon ça ne fonctionnera pas.

[Adam_sfp]

Bonsoir

*suigetsu deus

Vous pouvez aussi utiliser Jquery .
par exemple cet effet ICI
A partir de ce tuto ICI

Pour faire au plus simple a partir d'une image de suigetsu deus.

Coller dans description de site

Code:

<script type=text/javascript src=http://sd-1.archive-host.com/membres/up/37821634957680146/fade/js/custom.js></script>

Ensuite dans forum catégories et forums choisissez votre forum et dans la partie :+html:
Collez ceci

Code:

<img src="http://sd-1.archive-host.com/membres/up/37821634957680146/fade/images/news.jpg" alt="NEWS" width="650" height="162" border="0" class="latest_img" />

et enregistrez.



Cordialement.

[Renald]

Bonsoir,

Le problème de suigetsu deus c'est que le code html ne fonctionnait pas.
un simple <img src="url de l'image" /> n'affichait pas l'image.
Pourtant le html est bien activé sur son forum.

En tout cas l'effet Jquery est vraiment sympa merci!

[tuning78]

merci j'essayerai demain et quand vous dites

""Coller dans description de site"" c'est dans le CCS?

[Renald]

Non la description du site c'est dans le PA onglet général configuration du forum et la vous aurez "description du site"

[suigetsu deus]

Merci beaucoup pour votre aide, l'effet fonctionne merveilleusement sur mon forum et l'effet Jquery est magnifique, encore merci

[Renald]

Effectivement l'effet rend bien.
Mais je ne comprends pas pourquoi le premier code n'a pas fonctionné???

Sinon dans le code a mettre dans les catégories et forums la fin est inutile.
</a></div></div>

[Adam_sfp]

Merci beaucoup pour votre aide, l'effet fonctionne merveilleusement sur mon forum et l'effet Jquery est magnifique, encore merci

Bien content que cela vous convienne..
Vous pouvez personnaliser l'image via le ccs
En prenant toujours exemple sur la même image et pour rajouter un cadre de couleur

Code:

<div id="images"><a href="#"><img src="http://sd-1.archive-host.com/membres/up/37821634957680146/fade/images/news.jpg" alt="NEWS" width="650" height="162" border="0" class="latest_img" /></a></div>

Après <a href="#"> vous pouvez mettre un lien par exemple <a href="http://www.google.fr">
l'image devient cliquable.

et rajouter dans votre CSS

Code:

#images {
   width: 650px;
   border: 1px solid #363636;
   float: left;
   background-color: #2d2d2d;
   margin-top: 7px;
   line-height: 20px;
   padding-top: 8px;
   padding-bottom: 8px;
   padding-right: 8px;
   padding-left: 8px;
}

Effectivement l'effet rend bien.
Mais je ne comprends pas pourquoi le premier code n'a pas fonctionné???

Sinon dans le code a mettre dans les catégories et forums la fin est inutile.
</a></div></div>

Effectivement c'est rectifié quelques restes lors du copier coller...


Cordialement.