Signaler

Opacité survol, petit coup de pouce html :)

Posez votre question flea07 9Messages postés dimanche 14 juin 2015Date d'inscription 2 août 2017 Dernière intervention - Dernière réponse le 2 août 2017 à 17:27 par Pitet
Bonjour,


J'aimerais intégrer cette image sur mon site via ce code HTML :
<a data-flickr-embed="true" href="https://www.flickr.com/photos/157160288@N06/36174693656/in/dateposted-public/" rel="nofollow noopener noreferrer" target="_blank" title="plaquette png"><img src="https://farm5.staticflickr.com/4322/36174693656_6febf0f96e_o.png" width="588" height="686" alt="plaquette png"></a><script async src="//embedr.flickr.com/assets/client-code.js" charset="utf-8"></script>

Cependant j'aimerais que l'image baisse d'opacité ( à 50%) lors de d'un survol souris, savez-vous quel code intégrer ?

Est-ce que cette méthode d'intégration pour les images permet de baisser le poids du contenu de mon site web ?

Merci pour votre expérience :)
Utile
+1
plus moins
Bonjour,

Voici le code modifié :

<style>
.lien-hover {
    opacity: .5;
}
</style>

<a onmouseover="this.className = 'lien-hover';" onmouseout="this.className='';" data-flickr-embed="true" href="https://www.flickr.com/photos/157160288@N06/36174693656/in/dateposted-public/" rel="nofollow noopener noreferrer" target="_blank" title="plaquette png"><img src="https://farm5.staticflickr.com/4322/36174693656_6febf0f96e_o.png" width="588" height="686" alt="plaquette png"></a><script async src="//embedr.flickr.com/assets/client-code.js" charset="utf-8"></script>


L'image doit au final être chargée, qu'elle soit hébergée sur ton propre domaine ou sur un autre domaine. Pour réduire le temps de chargement de manière notable, il faut réduire la dimension de l'image et/ou sa qualité. Toutefois, le fait de charger des fichiers depuis des adresses différentes permet d'améliorer très légèrement les performances dans le cas où le nombre de fichiers à charger est important. Il est notamment recommandé de placer tous les fichiers statiques (images, css, js, etc) sur un domaine à part sur lequel les cookies sont désactivés (pour réduire le volume des échanges HTTP) et le cache côté navigateur est activé.

Donc pour répondre à ta question :
Est-ce que cette méthode d'intégration pour les images permet de baisser le poids du contenu de mon site web ?

- Le poids devant être chargé par le navigateur reste le même
- Les performances sont très légèrement améliorées car plusieurs fichiers sont chargés en parallèle
- Le poids des images hébergées en externe n'est pas compté par ton hébergeur
Cette réponse vous a-t-elle aidé ?  
flea07 9Messages postés dimanche 14 juin 2015Date d'inscription 2 août 2017 Dernière intervention - 2 août 2017 à 14:39
Merci beaucoup pour toutes ces précisions :)
L'image que je souhaite charger est hélas trop lourdes (7 Mo) elle est en 300PPP si je la passe en 72 PP la qualité devient vraiment trop médiocre (elle pixelise) connais-tu une méthode de compression qui ne pénalise pas trop la qualité ?
Répondre
avion-f16 18236Messages postés dimanche 17 février 2008Date d'inscription ContributeurStatut 15 septembre 2017 Dernière intervention - 2 août 2017 à 15:08
300 DPI est plutôt utilisé pour l'impression, pour le Web on recommande plutôt 72 DPI. Il faut trouver le bon compromis entre la compression et le résultat que tu souhaites obtenir.

Afin de rendre le chargement de ton site rapide, je te conseille :
- D'afficher des miniature en basse/moyenne qualité de chacune de tes images
- N'afficher que les premières images, charger les autres au fur-et-à-mesure que le visiteur descend
- Permettre l'ouverture d'une image de taille moyenne et de qualité moyenne au clic (avec Lightbox2 par exemple)
- Afficher un lien permettant de télécharger l'image en qualité/résolution max
Répondre
flea07 9Messages postés dimanche 14 juin 2015Date d'inscription 2 août 2017 Dernière intervention - 2 août 2017 à 15:53
Merci beaucoup pour ton aide :)
Répondre
Donnez votre avis
Utile
+0
plus moins
Salut,

Pour gérer l'opacité au survol, on peut utiliser directement la pseudo classe css :hover :

.hover-opacity:hover {
  opacity: .5;
}

<img class="hover-opacity" src="http://via.placeholder.com/350x150" alt="" />


Bonne journée,
Donnez votre avis

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes.

Le fait d'être membre vous permet d'avoir des options supplémentaires.

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !