Code pour un changement d'opacité d'une image

comment faire ?

25 décembre 2005 à 22:12:58

Bonsoir,

j'aimerais savoir comment faire pour coder ce genre de style :
dans le header ici.

j'ai pu trouver un bout de code :

mais celui ne semble pas fonctionner sur le changement d'opacité ...

gcyrillus

25 décembre 2005 à 23:01:43

bonjour,
voici un sujet resolu sur l'opacité. forum-83-5755-rendre-une-image-transparente
tu devrais trouver ce que tu cherche

.
a plus

fan de pluxml je suis cuisinier et codeur amateur. Des thèmes pour pluxml ? Oui

H_aldnoer

26 décembre 2005 à 0:08:20

Bonsoir,

en faite le changement d'opacité doit s'opérer au moment ou l'on passe la souris sur l'image comme sur ce site

voyez vous ?

gcyrillus

26 décembre 2005 à 0:22:04

oups, bon tu as les css pour plusieurs navigateurs, mais malheureusement IE ne comprend le hover qu' avec la balise <a>, il te faut alors faire usage d'un javascript pour que ça marche aussi dans IE.
Je n'en ai pas de tout fait a te proposer, peut-etre trouveras tu ton bonheur sur l'editeur javascript ou tout autre site dedié aux script "javascript".

A priori le script du lien fonctionne bien que tu donne , est tu sur d'avoir aussi le script(ou equivalent adapté a ton usage) et en lien (<link .. />) dans ta page ?
bon dev...

fan de pluxml je suis cuisinier et codeur amateur. Des thèmes pour pluxml ? Oui

H_aldnoer

26 décembre 2005 à 0:30:19

Citation : gcyrillus

oups, bon tu as les css pour plusieurs navigateurs, mais malheureusement IE ne comprend le hover qu' avec la balise <a>, il te faut alors faire usage d'un javascript pour que ça marche aussi dans IE.
Je n'en ai pas de tout fait a te proposer, peut-etre trouveras tu ton bonheur sur l'editeur javascript ou tout autre site dedié aux script "javascript".

A priori le script du lien fonctionne bien que tu donne , est tu sur d'avoir aussi le script(ou equivalent adapté a ton usage) et en lien (<link .. />) dans ta page ?
bon dev...

qu'entendez vous par la ?

gcyrillus

26 décembre 2005 à 0:46:47

rebonsoir,

dans le code que vous presenter vous faites appel a un javascript avec la gestion d'evenements suivante:

onMouseOver="slowhigh(this)" onMouseOut="slowlow(this)

.

onMouseOver "surveille" l'evenement du passage de la souris au dessus de l'element concerné.
A son declenchement un appel a une fonction javascript est lancée. ici la fonction est slowhigh(); cette fonction est codé en javascript et ce trouve (sur cette exmple de page ) dans un fichier externe avec pour extension ".js". ici le fichier est "java.js"
Ce fichier doit etre appeler dans l'entete de la page (comme les feuillesde styles) et dans votre exemple c'est :

.

Dans ce fichier peuvent etre regroupée plusieurs fonctions qui serviront au different effet dynamique du site.

en bref "onMouseOut="slowlow(this)" n'est pas un code simple css donnant un effet de fondue, c'est un appel a une fonction javascript situé dans un fichier exterieur.

J'espere vous eclairer un peu.

fan de pluxml je suis cuisinier et codeur amateur. Des thèmes pour pluxml ? Oui

H_aldnoer

26 décembre 2005 à 0:57:45

Ok mais moi qui veut utiliser la même fonction comment dois-je en faire appel étant donné que je ne dispose pas de ce fichier ?

ratdecav

26 décembre 2005 à 1:04:35

Salut, voici un exemple :

<html>
<head>
<title>opacity</title>
<script type="text/javascript">
function Allume(image)
{
image.filters.alpha.opacity=90
}
function Eteint(image)
{
image.filters.alpha.opacity=30
}
</script>
</head>
<body>
<br>
<br>

<img src="photo.jpg" style="filter: alpha(opacity=30)" onMouseOver="Allume(this)"
onMouseOut="Eteint(this)">

</body>
</html>

Ne fonctionne pas avec ff.
++

H_aldnoer

26 décembre 2005 à 1:09:56

Bonsoir,

si possible un fonctionnant sous firefox et ie

ratdecav

26 décembre 2005 à 1:20:12

Pour ff tu mettre en css :

<html>
<head>
<style type="text/css">
img {
opacity:.5;
}
img:hover {
opacity:.1;
}
</style>
</head>
<body>
<img src="photo.jpg">
</body>
</html>

gcyrillus

26 décembre 2005 à 1:21:57

Citation : H_aldnoer

Ok mais moi qui veut utiliser la même fonction comment dois-je en faire appel étant donné que je ne dispose pas de ce fichier ?

Ce fichier se trouve sur le site et il vous est possible de le visualiser pour en comprendre/analyser son fonctionnement (en particulier la gestion des different navigateurs).
http://bleachtrad.com/java.js , (la balise meta <link ...> vous donne son adresse )
Si ce script vous convient et qu'il vous est difficile d'en faire un aussi efficace pourquoi ne pas demander au webmaster de vous autoriser a l'utiliser ?.

fan de pluxml je suis cuisinier et codeur amateur. Des thèmes pour pluxml ? Oui

H_aldnoer

26 décembre 2005 à 1:35:54

Ok ca semble marcher mais je veut le faire qu'en des endroits local et non sur toute la page !

ratdecav

26 décembre 2005 à 1:40:52

Tu peux lire les cours aussi ... mais bon , tu rajoutes une class ou
une id pour identier les photos concernées.
++

H_aldnoer

26 décembre 2005 à 1:43:19

Citation : gcyrillus

Citation : H_aldnoer

Ok mais moi qui veut utiliser la même fonction comment dois-je en faire appel étant donné que je ne dispose pas de ce fichier ?

Ce fichier se trouve sur le site et il vous est possible de le visualiser pour en comprendre/analyser son fonctionnement (en particulier la gestion des different navigateurs).
http://bleachtrad.com/java.js , (la balise meta <link ...> vous donne son adresse )
Si ce script vous convient et qu'il vous est difficile d'en faire un aussi efficace pourquoi ne pas demander au webmaster de vous autoriser a l'utiliser ?.

encore faut il que je le comprenne car si je comprend bien on fait appel à deux fonction :

function slowhigh(which2){
imgobj=which2
browserdetect=which2.filters? "ie" : typeof which2.style.MozOpacity=="string"? "mozilla" : ""
instantset(baseopacity)
highlighting=setInterval("gradualfade(imgobj)",50)
}

function slowlow(which2){
cleartimer()
instantset(baseopacity)
}

H_aldnoer

26 décembre 2005 à 20:20:38

euh au faite je vois l'appariton de 5 fonctions isn't it ?