Soucis de css

[demeter1]

Bonjour à tous,
sur l'un de mes thèmes, il me faut changer l'image de cette séquence via css . j'ai tenté diverses imbrications mais en vain.

Code:

<div class="M14_px"><span class="M14_14px" title="Afficher le texte avec une taille de 14px"><a href="#"><img src="http://i68.servimg.com/u/f68/11/93/85/24/14px10.gif"></a></span>

Une idée pour me dépanner ??

Merci par avance pour votre aide.

[Invité]

bonsoir Stéphane ,
a tu tenter comme ceci >>

Code:

div.M14_px, span.M14_14px a img{background:url(.............);}

si les images sont intégré dans un js ou dans un Template , peut être ajouté la mention !important

Code:

div.M14_px, span.M14_14px a img{background:url(.............)!important;}

cdl,

[demeter1]

Bonsoir Chrystophe,
Merci pour cette aide.

La div englobe en fait un ensemble de span.

Voici la séquence en entier :

Code:

 <div class="M14_px">
        <span class="M14_14px" title=
        "Afficher le texte avec une taille de 14px"><a href="#"><img src=
        "http://i68.servimg.com/u/f68/11/93/85/24/14px10.gif"></a></span>
        <span class="M14_16px" title=
        "Afficher le texte avec une taille de 16px"><a href="#"><img src=
        "http://i68.servimg.com/u/f68/11/93/85/24/16_px10.gif"></a></span>
        <span class="M14_18px" title=
        "Afficher le texte avec une taille de 18px"><a href="#"><img src=
        "http://i68.servimg.com/u/f68/11/93/85/24/18px10.gif"></a></span>
        <span class="M14_20px" title=
        "Afficher le texte avec une taille de 20px"><a href="#"><img src=
        "http://i68.servimg.com/u/f68/11/93/85/24/20px10.gif"></a></span>
    </div>

Code:

div.M14_px, span.M14_14px a img{background:url(background-image: url("http://i84.servimg.com/u/f84/11/93/85/24/14px_c10.gif")!important;
)!important;}

Positionne l'image en fond de div mais ne modifie pas l'image d'origine

J'ai tenté
1

Code:

span.M14_14px {
background-image: url("http://i84.servimg.com/u/f84/11/93/85/24/14px_c10.gif")!important;
}

Aucune action

2

Code:

span.M14_14px a img{
background-image: url("http://i84.servimg.com/u/f84/11/93/85/24/14px_c10.gif")!important;
}

Aucune action

3

Code:

span.M14_14px a :link {
  background-image: url("http://i84.servimg.com/u/f84/11/93/85/24/14px_c10.gif")!important;
}

Aucune action
et
4

Code:

span.M14_14px a {
  background-image: url("http://i84.servimg.com/u/f84/11/93/85/24/14px_c10.gif")!important;
}

Superposition des deux images.L'image d'origine se retrouve en avant plan.
j'ai tenté un z-index histoire de voir si j'allais arriver à modifier l'ordre de superposition mais, rien à faire.

au niveau js, voici celui qui gère la taille des écritures

Code:

/* taille des écrits par le biais des boutons sur editeur*/
$(document).ready(function(){$.cookie("tropic")&&$("body,.altitude_encadrement,.sceditor-container textarea , .sceditor-container .postbody,.postbody,.quote,.cont_code,.spoiler_content,.altitude_encadrement .genmed b,td.pany,table.dany,.post-options").addClass($.cookie("tropic")),$(".M14_px a").click(function(){var t=$(this).parent().attr("class");return $("body,.altitude_encadrement,.sceditor-container textarea , .sceditor-container .postbody,.postbody,.quote,.cont_code,.spoiler_content,.altitude_encadrement .genmed b,td.pany,table.dany,.post-options").removeClass("M14_14px M14_16px M14_18px M14_20px").addClass(t),$.cookie("tropic",t,{path:"/",expires:1e4}),!1})});

[Neptunia]

Bonjour ^^

Le CSS ne peut pas changer d'images, il peut uniquement installer des images de fond.

Code:

span.M14_14px:hover a img {
  display:none;
  }
span.M14_14px:hover {
  background-image: url("http://i84.servimg.com/u/f84/11/93/85/24/14px_c10.gif")!important;
  }

On supprime d'abord l'image "fixe" avant d'en remettre une en tant qu'image de fond.

Code non testé.

[demeter1]

Bonjour Neptunia,
le css agit mais d'une maniére assez bizarre.
l'image initiale est bien supprimée mais et remplacée par l'image du span suivant. Il s'en suit un clignotement au hover qui passe de l'image du deuxième span à l'ancienne image. Par contre l'image de remplacement n'apparait absolument pas.

[Neptunia]

Je pense avoir compris ce qu'il se passe.

Le span prend la taille de l'image, si on supprime l'image 14px, le span se rétrécit.

Je pense qu'un visibility: hidden à la place du display:none résoudrait le souci. Ou sinon imposer une largeur à chaque span.

[Scoubifitz]

Bonsoir,

En supprimant l'image par un display:none et en plaçant une autre image avec le pseudo élément ::before ?

Code:

div.M14_px span.M14_14px img{display:none}
div.M14_px span.M14_14px::before{content:url(http://i84.servimg.com/u/f84/11/93/85/24/14px_c10.gif)}

[demeter1]

Bonjour Scoubifitz,
la solution fonctionne à merveille mais le before place l'image avant le a href="#" et, rend le lien inopérant.

Je n'ai pas encore testé la solution de Neptunia avec le soucis de chargement que nous avons en ce moment.

[Scoubifitz]

Il suffit donc de rajouter le "a" dans le chemin CSS ...

Code:

    div.M14_px span.M14_14px img{display:none}
    div.M14_px span.M14_14px a::before{content:url(http://i84.servimg.com/u/f84/11/93/85/24/14px_c10.gif)}

[Neptunia]

@scoubifitz

Ca ne devrait rien changer. Before = avant

L'image est dans le lien, c'est sa taille qui définit la zone cliquable du lien. Si on masque l'image, on masque aussi le lien et l'image rajoutée sera toujours devant le lien.

[Scoubifitz]

before = au début ... after = à la fin ...

le "content" créé une image au début de la balise "a" ...

display:none supprime donc l'ancienne image , et le pseudo-élément "before" place une nouvelle image au début de la balise "a" ...

[Neptunia]

J'ai rien dit, cette fois ma connaissance de l'anglais m'a joué un sale tour vu que before et after veulent dire en anglais respectivement avant et après.

Je me demande quels sont les andouilles qui ont utilisé ça comme pseudo élément à la place de :begin et :end par exemple. Sûrement pas des anglais ! A mon avis ya que des étasuniens pour autant maltraiter la langue de Shakespeare

[demeter1]

Il suffit donc de rajouter le "a" dans le chemin CSS ...

Code:

    div.M14_px span.M14_14px img{display:none}
    div.M14_px span.M14_14px a::before{content:url(http://i84.servimg.com/u/f84/11/93/85/24/14px_c10.gif)}

Bonjour à tous,
scoubifitz, le css fonctionne à merveille. Merci pour cette aide


Un grand merci également aux autres intervenants de ce sujet.