Codage image

[Park Ha Gi]

Bonjour,
Voilà, il y a quelque temps, j'ai voulu essayer cet effet ( voir photo ) mais sans résultat. Ce que j'aimerais : une image, entouré par un cadre ( fait en codage ), avec une opacité réduite et qui lors du passage de la souris dessus, le cadre et l'image soit dans leur opacité normal ...

Spoiler:

Merci d'avance

[Arlem]

Bonjour,

Ce tutoriel te sera surement utile :
https://forum.forumactif.com/trucs-et-astuces-f8/astuce-script-image-translucide-qui-devient-opaque-t19244.htm?highlight=image

[Park Ha Gi]

Bonjour, merci pour votre réponse, mais je viens d'essayer mais ça ne marche pas du tout --"

[ge80]

Bonjour

Pouvez-vous placer, sur ce forum, le code que vous avez utilisé ?
J'essaierai de le corriger ou d'en proposer un autre.

Cordialement
ge



Edit : correction car le post vient d'être mis en résolu.
Le problème est réglé.

[Park Ha Gi]

Euh, non, le post n'est pas résolu, c'est bizarre, je l'ai pas mis ?? ^^"

Code:

<style TYPE="text/css">
<!--
.opac { filter:alpha(opacity=30) }
.clair { filter: alpha(opacity=100)}
-->
</style>

<img class='opac'
onmouseover="this.className='clair'" onmouseout="this.className='opac'" src="http://i25.servimg.com/u/f25/14/05/20/17/phg10.jpg">

Voilà ce que j'ai mis comme code.

[ge80]

Tiens bizarre, il n'y a que l'auteur du sujet qui puisse le mettre en résolu.

Je regarde votre code après avoir terminé une autre aide....

[Park Ha Gi]

Oui, effectivement, c'est bizarre ^^"
Okay, merci beaucoup

[ge80]

Ce code fonctionne dans une page html, un widget ou en message d'accueil.

Par contre il ne fonctionne pas pour Firefox.

In Firefox (opacity:x) x can be a value from 0.0 - 1.0. A lower value makes the element more transparent.

In IE (filter:alpha(opacity=x)) x can be a value from 0 - 100. A lower value makes the element more transparent.

ge

[Adam_sfp]

Bonjour

Vous pouvez utiliser un script à coller dans description de site

Code:

<script type=text/javascript src=http://sd-1.archive-host.com/membres/up/37821634957680146/fade/js/custom.js></script>

et ensuite pour votre image
rajouter la class de cette manière

Code:

<img src="http://i25.servimg.com/u/f25/14/05/20/17/phg10.jpg" alt="test" width="50" height="100" border="0" class="latest_img" />

Cordialement.

[Park Ha Gi]

Merci beaucoup à vous deux ^^
Ca marche, par contre est-ce que se serait trop vous demander comment faire pour l'encadré ?

[Adam_sfp]

Bonsoir
A ce moment la vous pouvez procéder de cette manière
Mettre votre image dans une div

Code:

<div id="images"><a href="#"><img src="http://i25.servimg.com/u/f25/14/05/20/17/phg10.jpg" alt="test" width="50" height="100" border="0" class="latest_img" /></a></div>

*Après href vous pouvez mettre un lien en cliquant sur l'image on est redirigé.

Pour le cadre autour de l'image vous pouvez le personnaliser via la feuille de style CSS

Par exemple coller ceci dans le CSS

Code:


#images {
  width: 50px;
  border: 2px dashed #00A5CD;
  float: center;
}

Que vous pouvez bien sur modifier..
wight --> largeur de l'image
border 2px -->épaisseur du cadre
dashed --> le style du cadre vous pouvez le remplacer par dotted ,
solid , double , groove , ridge ...etc

#00A5CD -->le code couleur du cadre
float: center; -->position de l'image


Cordialement.

[Park Ha Gi]

Merci beaucoup. Encore une dernière petit question et après j'arrête
Comment faire pour que le contour fasse comme l'image, c'est à dire, avec l'opacité ? Et également, modifier la valeur de l'opacité ?

[Adam_sfp]

Bonjour

Je crois bien que l'opacité prend effet uniquement sur l'image.
Pour modifier la valeur de l'opacité il faut éditer le script
https://sd-1.archive-host.com/membres/up/37821634957680146/fade/js/custom.js

Changer les valeurs et l'héberger à nouveau.

Cordialement.

[Park Ha Gi]

Okay, merci beaucoup

[Adam_sfp]

Bonjour, Afin de faciliter la gestion des problèmes, si votre problème est résolu, pensez à : éditer votre premier message, cocher l'icône Et enregistrer en cliquant sur Vous pouvez également remercier les personnes qui vous ont aidé, en cliquant sur le bouton A bientôt sur ForumActif