Opacité de deux images dans Muse (HTML)
JeffC1977_
Messages postés
2
Date d'inscription
Statut
Membre
Dernière intervention
-
Raoulouf -
Raoulouf -
Bonjour à tous
Je débute en HTML et c'est pourquoi je prends quelques instants pour poser cette question de débutant.
J'utilise Muse et avec un code HTML. J'ai inséré une image qui a un opacité de .7 (pour faire un test) afin que lorsque j'amène ma souris sur l'image, celle ci devient avec un opacité à 1.
Pour ce faire, J'ai créé une Ressource (dans Muse) que j'ai nommé Main_Cardinal.
Tout fonctionne avec une image en utilisant ce code HTML.
Lorsque j'insère une seconde image, je crée une seconde Ressource dans Muse (que j'appelle Test) et ajoute l'image à mon précédent code et rien ne fonctionne. La première image (Main_Cardinal) fonctionne mais la seconde n'a pas d'opacité à .7 et quand je passe ma souris sur la seconde image, il ne se passe absolument rien.
Où je fais l'erreur.
merci de votre aide
Je débute en HTML et c'est pourquoi je prends quelques instants pour poser cette question de débutant.
J'utilise Muse et avec un code HTML. J'ai inséré une image qui a un opacité de .7 (pour faire un test) afin que lorsque j'amène ma souris sur l'image, celle ci devient avec un opacité à 1.
Pour ce faire, J'ai créé une Ressource (dans Muse) que j'ai nommé Main_Cardinal.
Tout fonctionne avec une image en utilisant ce code HTML.
<style>
.Main_Cardinal img {
transition: all 0.4s ease 0s;
transform-origin:center center;
filter:alpha(opacity=.70);
-moz-opacity:.70;
opacity:.70;
}
.Main_Cardinal img:hover {
transform: scale(1.2);
filter:alpha(opacity=1);
-moz-opacity:1;
opacity:1;
}
</style>
Lorsque j'insère une seconde image, je crée une seconde Ressource dans Muse (que j'appelle Test) et ajoute l'image à mon précédent code et rien ne fonctionne. La première image (Main_Cardinal) fonctionne mais la seconde n'a pas d'opacité à .7 et quand je passe ma souris sur la seconde image, il ne se passe absolument rien.
<style>
.Main_Cardinal img, .Test img {
transition: all 0.4s ease 0s;
transform-origin:center center;
filter:alpha(opacity=.70);
-moz-opacity:.70;
opacity:.70;
}
.Main_Cardinal img:hover, .Test img:hover {
transform: scale(1.2);
filter:alpha(opacity=1);
-moz-opacity:1;
opacity:1;
}
</style>
Où je fais l'erreur.
merci de votre aide
A voir également:
- Opacité de deux images dans Muse (HTML)
- Comment faire deux colonnes indépendantes dans word - Guide
- Nombre de jours entre deux dates excel - Guide
- Editeur html - Télécharger - HTML
- Deux ecran pc - Guide
- Des images - Guide
2 réponses
bonsoir,
je ne connais pas Adobe Muse mais ce dont vous parlez c'est du CSS et non du HTML.
Ou HTML sert à décrire le contenu et indiquer celui ci(ex img pour une image) CSS permet de changer l'apparence et certaines propriétés (comme au survole de la souris) ainsi que des animations.
Vérifiez bien que la classe(et non ressource) CSS est indiqué dans le HTML.
Par exemple ici(dans le fichier CSS):
.Main_Cardinal img, .Test img{
indique que de toutes images contenues dans les balises de classe(attribut de balise HTML "class") Main_Cardinal auront les propriétés CSS décrites entre les accolades(les animations et la transparence indiquées). Ensuite la virgule dit la même chose pour les balises images(img) incluses dans une balise de class='Test' auront aussi ces propriétés.
Donc quelque part dans vos balises HTML vous devez avoir quelque chose comme ça:
unebaliseHTML est bien sûr remplacé par le la balise container appropriée(div, p,span, article ou autre...) selon que Muse écrit plus ou moins bien HTML en respectant les normes actuelles(et la sémantique qui va avec).
Sinon avez vous vidé le cache du navigateur? Cela peut aussi être que le navigateur n'a pas encore la version à jour(avec l'ajout de la classe Test) et utilise l'ancien fichier stocké en cache(mise en mémoire des pages pour les charger plus rapidement).
Pour une meilleure compréhension et résultat ceci vous aidera:
https://www.commentcamarche.net/contents/498-html-langage
https://www.commentcamarche.net/contents/230-css-feuilles-de-style
je ne connais pas Adobe Muse mais ce dont vous parlez c'est du CSS et non du HTML.
Ou HTML sert à décrire le contenu et indiquer celui ci(ex img pour une image) CSS permet de changer l'apparence et certaines propriétés (comme au survole de la souris) ainsi que des animations.
Vérifiez bien que la classe(et non ressource) CSS est indiqué dans le HTML.
Par exemple ici(dans le fichier CSS):
.Main_Cardinal img, .Test img{
indique que de toutes images contenues dans les balises de classe(attribut de balise HTML "class") Main_Cardinal auront les propriétés CSS décrites entre les accolades(les animations et la transparence indiquées). Ensuite la virgule dit la même chose pour les balises images(img) incluses dans une balise de class='Test' auront aussi ces propriétés.
Donc quelque part dans vos balises HTML vous devez avoir quelque chose comme ça:
<unebaliseHTML> ...autre contenu... <img src='url de l'mage' alt='description de l'image' class='Test'/> ...autre contenu... </unebaliseHTML>
unebaliseHTML est bien sûr remplacé par le la balise container appropriée(div, p,span, article ou autre...) selon que Muse écrit plus ou moins bien HTML en respectant les normes actuelles(et la sémantique qui va avec).
Sinon avez vous vidé le cache du navigateur? Cela peut aussi être que le navigateur n'a pas encore la version à jour(avec l'ajout de la classe Test) et utilise l'ancien fichier stocké en cache(mise en mémoire des pages pour les charger plus rapidement).
Pour une meilleure compréhension et résultat ceci vous aidera:
https://www.commentcamarche.net/contents/498-html-langage
https://www.commentcamarche.net/contents/230-css-feuilles-de-style
Merci pour ce message
Très apprécié
Je sais que Muse est pas très apprécié et je suis entrain de la découvrir. Je ne connais le code mais ce logiciel me semble très décevant venant de Adobe.
J'ai finalement trouvé la marche à suivre pour y arriver (par hasard). Je devais aller sur l'image en mode Actif et mettre un cadre pour ensuite l'enlever et tout fonctionne.
merci encore
Très apprécié
Je sais que Muse est pas très apprécié et je suis entrain de la découvrir. Je ne connais le code mais ce logiciel me semble très décevant venant de Adobe.
J'ai finalement trouvé la marche à suivre pour y arriver (par hasard). Je devais aller sur l'image en mode Actif et mettre un cadre pour ensuite l'enlever et tout fonctionne.
merci encore
Certains des logiciels Adobe ont eut leur utilité car fonctionnant ensemble et permettant d'obtenir des applications (dites)riches rapidement(ex: Adobe Air).
Ceci dit l'évolution des normes du web(W3C) et l'apport de fonctionnalités de celles ci(et contrairement à Adobe sont gratuites à utiliser et ne nécessitent pas de logiciel pour les faire fonctionner-c'est le cas de Flash devenu obsolète quand il a été utilisé pendant une décennie faute de mieux-), cette évolution des normes du web et de leurs technologies ont donc rendues caduques la plupart des applications d'Adobe pour le développement web.
C'est le cas des APIs fournies par HTML5(essentiellement en javascript).
Les CMS et leur popularité en sont un autre exemple puisqu'ils apportent une solution clé en main pour créer des sites dynamiques(donc avec serveur de base de données et son programme de gestion,) à tout un chacun pour la plupart sans avoir à toucher au code(sauf si on en a envie). Bien sûr ça reste bien de connaître la base et le fonctionnement(HTML, http, CSS, le principe des sites dynamiques et des bases de données...) car c'est toujours mieux de savoir "comment ça marche" ce qu'on fait et utilise et permettra d'avoir de meilleurs résultats(référencement naturel correctement fait, qualité du site et de son programme...).
Ceci dit l'évolution des normes du web(W3C) et l'apport de fonctionnalités de celles ci(et contrairement à Adobe sont gratuites à utiliser et ne nécessitent pas de logiciel pour les faire fonctionner-c'est le cas de Flash devenu obsolète quand il a été utilisé pendant une décennie faute de mieux-), cette évolution des normes du web et de leurs technologies ont donc rendues caduques la plupart des applications d'Adobe pour le développement web.
C'est le cas des APIs fournies par HTML5(essentiellement en javascript).
Les CMS et leur popularité en sont un autre exemple puisqu'ils apportent une solution clé en main pour créer des sites dynamiques(donc avec serveur de base de données et son programme de gestion,) à tout un chacun pour la plupart sans avoir à toucher au code(sauf si on en a envie). Bien sûr ça reste bien de connaître la base et le fonctionnement(HTML, http, CSS, le principe des sites dynamiques et des bases de données...) car c'est toujours mieux de savoir "comment ça marche" ce qu'on fait et utilise et permettra d'avoir de meilleurs résultats(référencement naturel correctement fait, qualité du site et de son programme...).
