velomagus

Image cachée mais dévoilable par un clic

Messages recommandés

velomagus    4

Bonjour à tous,

 

Alors je récapitule, mon site www.velomagus.fr est dédié à raconter l'accident grave que j'ai eu en vélo. Dans la poursuite de mon récit je souhaiterai publier des photos de moi, particulièrement juste après l'accident. Seulement il y en a qui sont un peu gore alors je ne veux pas choquer les âmes sensibles. Je souhaiterai savoir comment faire pour que l'on voie un message d'avertissement qui cacherai l'image et qui, en cliquant dessus, laisserai apparaître l'image en question?

 

Je précise que j'ai des bases de code (DUT Info qui date un peu mais plus axé Java et un peu de PHP/HTML/CSS). J'ai vu des solutions ça et là (sur le site W3C par exemple https://www.w3schools.com/howto/howto_css_overlay.asp) mais je vous avoue que je ne sais pas comment l’intégrer à Zwii.

 

A bientôt

 

Nicolas

Partager ce message


Lien à poster
Partager sur d’autres sites
Rémi    146

J'ai plusieurs solutions simples :

 

Dans le cas ou tu veux afficher l'image dans une page : tu prends 2 images, une avec un avertissement écrit dessus, et l'autre plutôt gore, tu affiche sur ta page celle avec l’avertissent et tu fais en sorte que lorsque la personne clic sur l'image avec l'avertissement elle arrive sur ton autre image hébergé sur ton site (il suffit juste dans TinyMCE de mettre un lien sur ton image vers l'autre image).

 

Dans le cas ou tu veux créer une galerie photo, autant en faire une spéciale images choquantes, et créer une autre page avant d'arriver sur celle-ci qui précise que la galerie contient des images hards.

 

J'espère que j'ai été clair dans mes explications :D .

  • Like 1

Partager ce message


Lien à poster
Partager sur d’autres sites
PeterRabbit    283

@velomagus Sinon, j'étais en train d'essayer ça :

 

blob.png.82c1e7af2296378f6789f2931e0787d6.png

 

C'est la même solution que @Rémi avec des effets au choix : une "image texte" en fond et l'autre qui se superpose au survol. Rien qu'avec du css.  Et tu connais l'adresse...

Essais faits sur la 8.21 qui vient de sortir.

Je t'explique si tu veux. :)

 

Modifié par PeterRabbit (Voir l’historique des modifications)
  • Like 1
  • Thanks 1

Partager ce message


Lien à poster
Partager sur d’autres sites
PeterRabbit    283

Il doit y avoir d'autres solutions, mais c'est la première qui m'est venue à l'esprit.

Imaginons : le désert, c'est ton avertissement qui s'affiche en même temps que la page, l'iceberg, c'est l'image insoutenable. Voici ce que ça donnerait au survol de la souris :

 

slide.jpg.4b1450d10489e38917e1eec950c9eb8d.jpg

 

Pour essayer, colle ce code au bas de "core/layout/common.css" :

.container {
  position: relative;
  width: 100%;
}

.image {
  display: block;
  width: 100%;
  height: auto;
}

.overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  /*background-color: #008CBA;*/
  overflow: hidden;
  width: 100%;
  height: 0;
  transition: .5s ease;
}

.container:hover .overlay {
  height: 100%;
}

.text {
  white-space: nowrap; 
  color: white;
  font-size: 20px;
  position: absolute;
  overflow: hidden;
  width: 100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}

et ajoute celui-ci dans le code de ta page (menu "Outils" ou "Voir" en fonction de ta version de Zwii) :

<div class="container"><img class="image" src="/site/file/source/gallery/landscape/desert.jpg" alt="" width="1007" height="566" />
<div class="overlay">
<div class="text"><img src="/site/file/source/gallery/landscape/iceberg.jpg" alt="" width="1007" height="566" /></div>
</div>
</div>

Le tout brut de copier-coller ou presque (compare les codes), avec le premier effet venu et pour faire au plus simple et au plus rapide pour te proposer une première piste de réflexion. :|

 

Mais je vais chercher : la solution de l'image-texte ne me plaît qu'à moitié.

 

PS : Autres propositions (je ne les ai pas essayées)

 

 

 

 

Modifié par PeterRabbit (Voir l’historique des modifications)

Partager ce message


Lien à poster
Partager sur d’autres sites
PeterRabbit    283

@velomagus J'ai également trouvé ce système, que je trouve très chouette !

Je ne résiste pas au plaisir de le présenter, même s'il ne convient pas très bien, a priori, à ton projet. :)

 

Mais avec quelques retouches — le chameau surtout —, qui sait ? ça pourrait le faire.

Modifié par PeterRabbit (Voir l’historique des modifications)

Partager ce message


Lien à poster
Partager sur d’autres sites

Créer un compte ou se connecter pour commenter

Vous devez être membre afin de pouvoir déposer un commentaire

Créer un compte

Créez un compte sur notre communauté. C’est facile !

Créer un nouveau compte

Se connecter

Vous avez déjà un compte ? Connectez-vous ici.

Connectez-vous maintenant