Afficher un texte à la place d'une image

Résolu/Fermé

Eiffel91 Messages postés 5 Date d'inscription mardi 12 janvier 2016 Statut Membre Dernière intervention 1 février 2016 - 12 janv. 2016 à 12:44
Eiffel91 - 26 janv. 2016 à 10:02

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

A voir également:

Afficher un texte à la place d'une image
Insérer une image dans word sans bouger le texte - Guide
Excel cellule couleur si condition texte - Guide
Image iso - Guide
Transcription audio en texte word gratuit - Guide
Mettre un texte en majuscule - Guide

2 réponses

Réponse 1 / 2

Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 525
12 janv. 2016 à 15:44

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

Eiffel91 Messages postés 5 Date d'inscription mardi 12 janvier 2016 Statut Membre Dernière intervention 1 février 2016
20 janv. 2016 à 17:37

Bonjour Pitet,

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

Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 525
21 janv. 2016 à 09:50

La solution pour que ca fonctionne sur les vieux navigateurs pourrait être :

.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.

Eiffel91 Messages postés 5 Date d'inscription mardi 12 janvier 2016 Statut Membre Dernière intervention 1 février 2016 > Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022
21 janv. 2016 à 11:57

Bonjour et merci pour la rapidité de la réponse.

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.

Eiffel91 Messages postés 5 Date d'inscription mardi 12 janvier 2016 Statut Membre Dernière intervention 1 février 2016
21 janv. 2016 à 12:14

Et pour être vraiment précis.
Ç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

Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 525
21 janv. 2016 à 12:42

Si il s'agit d'un intranet, il existe un problème connu dû au fait que IE utilise par défaut un mode de compatibilité pour les sites consultés en local. La solution classique est alors d'utilisé un meta tag X-UA-Compatible : https://www.alsacreations.com/astuce/lire/1437-comment-interdire-le-mode-de-compatibilite-sur-ie.html

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

Réponse 2 / 2

Eiffel91
25 janv. 2016 à 17:21

Bonjour Pitet,

Il semblerait que la balise Meta règle le problème :-)
(J'attends juste la confirmation d'une autre personne avant de crier victoire mais ca sent bon).

Merci encore

Eiffel91
26 janv. 2016 à 10:02

Je confirme que le problème est donc résolu.

Merci

Discussions similaires

Les meilleurs places bercy / accor hotel arena

Dechiffrer une image caché