Discussion :

[laurentSc]

Bonsoir,

voilà ce que je voudrais faire : j'ai un code qui fait référence des centaines de fois au fichier "button.png". Or, il s'agit d'un site visité par des mal-voyants, donc selon leur action, j'ai déjà mis la possibilité de grossir la taille des caractères (justement en modifiant l'attribut font-size d'une classe), mais voudrais aussi que ça grossisse le bouton, donc à priori afficher une image différente. Mais dans le code, on a N fois

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<img src="../_frame/button.png" alt="">

et cela est encapsulé dans une div qui a une classe :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<div class="wg-button">

Un exemple complet du code :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
    <div class="wg-button"> <a
 style="position: relative;" href="../topic/index.php"
 title="Bienvenue sur le site de VHS !"
 onmouseover="javascript:wg_popup();"><img
 src="../_frame/button.png" alt=""><span
 style="position: absolute; left: 10px; top: 17px; width: 68px;">Accueil</span></a></div>

qui fait clairement parti d'un menu : ce que je veux faire est-il donc possible avec du CSS ?

[ornitho13]

Salut,

oui tu peux passer par le CSS pour faire cela en passant ton image en fond de ta div :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
.wg_button{
   background:url(url_vers_l_image) no-repeat;
   ...
}

Après pour le fait d’agrandir automatiquement l'image quand la div augmente, il faut utiliser la propriété background-size qui est une propriété CSS3 qui n'est malheureusement pas encore utilisée par tous les navigateurs (mais une bonne partie quand même).

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
.wg_button{
   background:url(url_vers_l_image) no-repeat;
   background-size:100%;
   ...
}

[laurentSc]

Merci pour la réponse ; je viens de réaliser que finalement, ce n'est pas la peine car ces button.png sont regroupés dans seulement 2 fichiers et ne sont pas si nombreux que le pensais (donc je vais remplacer le nom du fichier image par une variable, qui prendra en fonction du choix utilisateur le nom du fichier à afficher).
Je vais simplement un peu pinailler pour la réponse : je doute fort que le

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

background:url(url_vers_l_image) no-repeat;

prenne le pas sur le

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<img src="../_frame/button.png" alt="">

[Ceddoc]

Salut,

oui tu peux passer par le CSS pour faire cela en passant ton image en fond de ta div...

Il te recommandait donc d'enlever

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<img src="../_frame/button.png" alt="">

[laurentSc]

Donc on est d'accord, mais avant, je croyais que cette ligne était présente dans plein de fichiers, donc que ça aurait été surhumain de la supprimer et je cherchais une solution (sans trop y croire), pour modifier le fichier affiché tout en gardant cette ligne.

[Ceddoc]

Donc on est d'accord, mais avant, je croyais que cette ligne était présente dans plein de fichiers, donc que ça aurait été surhumain de la supprimer et je cherchais une solution (sans trop y croire), pour modifier le fichier affiché tout en gardant cette ligne.

Y'a des solutions pour modifier un grand nombre de lignes de la même manière. Genre sous notepad++ tu ouvres tous les fichiers dans lequel est ta ligne, tu sélectionne ta ligne ctrl+f tu fais remplacer, tu met admettons

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<div class="monbouton">&nbsp;</div>

"remplacer dans tous les documents ouverts" et en avant

[laurentSc]

"remplacer dans tous les documents ouverts" et en avant

Merci du truc : je ne connaissais pas, mais très utile...