Afficher un texte à la place d'une image
Résolu
Eiffel91
Messages postés
6
Statut
Membre
-
Eiffel91 -
Eiffel91 -
Bonjour à tous,
Ayant essayé un paquet de scripts, je m'en remet à vous sur ce forum (sur lequel je viens de m'inscrire) pour trouver une solution.
J'essaye de faire un trombinoscope sympa pour ma société.
J'ai donc des photos et je voudrais, au passage de la souris, que la photo s’atténue (opacité) et qu'un texte (où apparaîtrais les coordonnées) apparaissent.
En fait, j'ai trouvé ce script sauf qu'il utilise des valeurs qui ne fonctionnent pas sous IE.
Voici ce que ca donne :
le code CSS :
body {
font-family:arial;
font-size:14px;
}
.Coordonnees { opacity: 0.0; transition-duration: 0.4s; -moz-transition-duration: 0.6s; -webkit-transition-duration: 0.6s; -o-transition-duration: 0.6s;}
.Coordonnees a {
text-decoration:none;
color:#0cc7dd;
font-size:18px;
font-family:Arial;
text-align:center;
/* add spacing and make the whole row clickable*/
padding:5px;
display:block;
}
.Coordonnees p {
font-size:11px;
}
.Coordonnees:hover {opacity: 0.8;}
</style>
le code HTML :
<div style="background: url('Image.jpg');">
<div class="Coordonnees">
<div style="background: #ffffff; height: 164px; width: 142px; ">
<div style="padding: 0px; text-align: Center; height: 164px; overflow: auto; line-height: 12px; ">
Dans un lointain, passé, j'utilisais le javascript Roll Over avec 2 images mais j'aimerais éviter cela car je voudrais vraiment avoir du texte au passage de la souris.
Pour l'opaciét, étant donné que ce n'est pas prix en compte sous IE, je peux éventuellement faire une image normal et une autre opacifié et donc faire un roll over avec ces 2 images mais il faudrait que je puisse, en plus, faire apparaître le texte au passage de la souris.
Si cela n'est pas possible, tant pis, je m'en remettrais au jascript mais je susi sûr qu'il existe une solution :-)
Merci
Ayant essayé un paquet de scripts, je m'en remet à vous sur ce forum (sur lequel je viens de m'inscrire) pour trouver une solution.
J'essaye de faire un trombinoscope sympa pour ma société.
J'ai donc des photos et je voudrais, au passage de la souris, que la photo s’atténue (opacité) et qu'un texte (où apparaîtrais les coordonnées) apparaissent.
En fait, j'ai trouvé ce script sauf qu'il utilise des valeurs qui ne fonctionnent pas sous IE.
Voici ce que ca donne :
le code CSS :
body {
font-family:arial;
font-size:14px;
}
.Coordonnees { opacity: 0.0; transition-duration: 0.4s; -moz-transition-duration: 0.6s; -webkit-transition-duration: 0.6s; -o-transition-duration: 0.6s;}
.Coordonnees a {
text-decoration:none;
color:#0cc7dd;
font-size:18px;
font-family:Arial;
text-align:center;
/* add spacing and make the whole row clickable*/
padding:5px;
display:block;
}
.Coordonnees p {
font-size:11px;
}
.Coordonnees:hover {opacity: 0.8;}
</style>
le code HTML :
<div style="background: url('Image.jpg');">
<div class="Coordonnees">
<div style="background: #ffffff; height: 164px; width: 142px; ">
<div style="padding: 0px; text-align: Center; height: 164px; overflow: auto; line-height: 12px; ">
Dans un lointain, passé, j'utilisais le javascript Roll Over avec 2 images mais j'aimerais éviter cela car je voudrais vraiment avoir du texte au passage de la souris.
Pour l'opaciét, étant donné que ce n'est pas prix en compte sous IE, je peux éventuellement faire une image normal et une autre opacifié et donc faire un roll over avec ces 2 images mais il faudrait que je puisse, en plus, faire apparaître le texte au passage de la souris.
Si cela n'est pas possible, tant pis, je m'en remettrais au jascript mais je susi sûr qu'il existe une solution :-)
Merci
A voir également:
- Afficher un texte à la place d'une image
- Extraire texte d'une image - Guide
- Légender une image - Guide
- Insérer une image dans word sans bouger le texte - Guide
- Image iso - Guide
- Meilleur place accor arena ✓ - Forum Loisirs / Divertissements
2 réponses
Salut,
La propriété css opacity est prise en compte sur IE depuis la version 9. Pour les anciennes versions, tu peux utiliser la solution proposée ici : https://css-tricks.com/snippets/css/cross-browser-opacity/
Bonne journée
La propriété css opacity est prise en compte sur IE depuis la version 9. Pour les anciennes versions, tu peux utiliser la solution proposée ici : https://css-tricks.com/snippets/css/cross-browser-opacity/
Bonne journée
Merci. Ca semblerait pouvoir régler mon soucis mais... je maîtrise pas vraiment le CSS.
Et là il faut que je modifie l'existant avec les préconisations faite sur le site que tu m'as conseillé et je bug :-(
Est ce que peux m'aider ? si oui alors merci et donc voici ce que j'ai :
<style>
.Coordonnees { opacity: 0.0; transition-duration: 0.4s; -moz-transition-duration: 0.6s; -webkit-transition-duration: 0.6s; -o-transition-duration: 0.6s;}
.Coordonnees p {
font-size:12px;
}
.Coordonnees:hover {opacity: 0.9;}
</style>
Et le site proposé cette solution :
.transparent_class {
/* IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
/* IE 5-7 */
filter: alpha(opacity=50);
/* Netscape */
-moz-opacity: 0.5;
/* Safari 1.x */
-khtml-opacity: 0.5;
/* Good browsers */
opacity: 0.5;
}
Je te remercie
.Coordonnees { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -moz-opacity: 0; -khtml-opacity: 0; opacity: 0; -moz-transition-duration: 0.4s; -webkit-transition-duration: 0.4s; -o-transition-duration: 0.4s; transition-duration: 0.4s; } .Coordonnees p { font-size:12px; } .Coordonnees:hover { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)"; filter: alpha(opacity=90); -moz-opacity: 0.9; -khtml-opacity: 0.9; opacity: 0.9; }Par contre la durée de transition n'est hélas pas supportée sur les versions d'IE < 10 et je ne trouve pas d'alternative simple en css.
J'ai utilisé ton code et je n'ai pas de changement mais je crois que le problème est plus compliqué.
C'est une page que j'ai développé pour l'intranet de ma société et de mon côté, tout fonctionne. Le problème se pose sur certain postes qui m'avaient fait remonter l'info.
L0 je viens de voir avec une personne chez qui cela posait problème et cela ne fonctionne toujours pas et pourtant elle a IE 11 comme moi. Et en plus elle a une version plus récente... Rrrrrr donc je pense qu'il s'agit plus d'un problème de mise à jour Windows ou autre chose et cela risque d'être plus compliqué à solutionner.
Merci en tout cas. Je reviendrais vers toi si je trouve une solution.
Ça fonctionne sous IE11 version 11.0.18
Mais cela ne fonctionne pas IE11 version 11.0.26...ni même sur la version 11.0.16 et là je comprend pas, pourquoi vu que ma version se situe ente ces 2 là.
Cordialement
Si ca ne marche toujours pas, en plus du mode de compatibilité, il semble que ce problème puisse également venir du mode entreprise : https://stackoverflow.com/questions/25557299/internet-explorer-11-disable-display-intranet-sites-in-compatibility-view-via