Forum SELFHTML Archives du forum 2005 février| Forum SELFHTML Archives du forum 2005 février |
 |
Forum SELFHTML: Archives: |
 |
|
 |
|
Le message suivant est de: S6rano, 03. 02. 2005, 10:47
Je suis en train de découvrir ce site très bien fait à propos, entre autres, des CSS.
Je me pose la question à propos de l'action suivante : comment, à partir d'une même image, faire un rollover qui utiliserait la fonction filter:Gray ? La photo du "Bas" du rollover serait le noir/blanc, l'image du "Haut" (onmouseover) serait l'image originale en couleurs.
Si vous avez une idée... De mon côté, je continue à chercher.
S6rano
 |
Le message suivant est de: Patrick Andrieu, 04. 02. 2005, 10:53
http://actuel.fr.selfhtml.org/equipe/patrick.htm
Bonjour!
»» Je me pose la question à propos de l'action suivante : comment, à partir d'une même image, faire un rollover qui utiliserait la fonction filter:Gray ? La photo du "Bas" du rollover serait le noir/blanc, l'image du "Haut" (onmouseover) serait l'image originale en couleurs.
»» Si vous avez une idée... De mon côté, je continue à chercher.
Je crois qu'on ne voit pas très bien ce que tu veux dire...
Meilleures salutations de Francfort sur le Main,
Patrick
| |
Le message suivant est de: s6rano, 07. 02. 2005, 12:27
Je vais tâcher d'être plus clair.
Un rollover est ordinairement composé de deux images. Une image fixe et une autre image survolée (qui est préloadée). Je souhaitrais utiliser UNE MËME image pour un rollover, en affectant le "filtre:gray" lié au comportement onmouseover par exemple.
S6rano
| |
Le message suivant est de: Bartouille, 
bertrand.wattel_pasDeSpam@free.fr, 07. 02. 2005, 21:00
http://mythes.foret.free.fr
»» Je vais tâcher d'être plus clair.
»» Un rollover est ordinairement composé de deux images. Une image fixe et une autre image survolée (qui est préloadée). Je souhaitrais utiliser UNE MËME image pour un rollover, en affectant le "filtre:gray" lié au comportement onmouseover par exemple.
»» S6rano
Bonjour,
En préambule, je préciserai qu'il n'y a guère qu'Internet Explorer qui a implémenté la formidable idée de Microsoft que sont les filtres.
Pour ton problème rien de plus simple, au lieu de changer l'image dans le script de rollover, tu changes l'attribut de style :
document.getmachinbytagsbidule['monimage'].style.filter.gray = true ou du moins quelques chose dans ce goût là (en plus comme ça ne fonctionnera que sous IE, tu peux même utiliser le "BillDOM" avec document.all plus court à taper). Je ne connais pas la syntaxe exacte du filtre car je n'utilise jamais cette propriété de style.
Au final, voilà une solution ô combien pas portable, alors que le premier graticiel venu permet de transformer une image en gris et il y a des scripts qui fonctionneront sous 99% des navigateurs du marché.
Au fait question, est-ce-que les dernières versions de Mozilla ont implémenté les filtres ?
@+
Bartouille
| |
Le message suivant est de: Celelibi, sysygogo86@msn.com, 08. 02. 2005, 11:29
http://www.espionet.com
Bonjour,
Bartouille, est-ce de l'irone que je sent dans ton message ?
»» document.getmachinbytagsbidule['monimage'].style.filter.gray = true
document.getElementById('id_image') peut-être ? :)
»» Au final, voilà une solution ô combien pas portable, alors que le premier graticiel venu permet de transformer une image en gris et il y a des scripts qui fonctionneront sous 99% des navigateurs du marché.
Pourquoi ne pas jouer que le filter:alpha pour IE et sur opacity pour les autres ?
»» Au fait question, est-ce-que les dernières versions de Mozilla ont implémenté les filtres ?
Non, à mon avis ça sera pas demain la veille. Pour vu que ça dure... :)
Celelibi
| |
Le message suivant est de: Patrick Andrieu, 08. 02. 2005, 16:09
http://actuel.fr.selfhtml.org/equipe/patrick.htm
Bonjour tous!
»» »» document.getmachinbytagsbidule['monimage'].style.filter.gray = true
»» document.getElementById('id_image') peut-être ? :)
Ce serait un truc à essayer, mais je ne sais pas si cela fonctionnera. La raison en est que les propriétés CSS, si on veut les changer en faisant appel au DOM, ont une autre "orthographe":
style="background-color:#FFDDDD"
devient:
backgroundColor [document.getElementById('id_de_l_element').style.backgroundColor = #FFDDDDD]
Mais les filtres ont une autre syntaxe:
style="filter:Gray()"
^^^^^^^^^^^^^
Meilleures salutations de Francfort sur le Main,
Patrick
| |
Le message suivant est de: Patrick Andrieu, 08. 02. 2005, 16:48
http://actuel.fr.selfhtml.org/equipe/patrick.htm
Et rebonjour!
La curiosité est un vilain défaut, peut-être, mais pas dans ce cas... Quelques minutes de réflexion et on y va:
»» Ce serait un truc à essayer, mais je ne sais pas si cela fonctionnera. La raison en est que les propriétés CSS, si on veut les changer en faisant appel au DOM, ont une autre "orthographe":
»»
»» style="background-color:#FFDDDD"
»»
»» devient:
»»
»» backgroundColor [document.getElementById('id_de_l_element').style.backgroundColor = #FFDDDDD]
»»
»» Mais les filtres ont une autre syntaxe:
»»
»» style="filter:Gray()"
»» ^^^^^^^^^^^^^
Changer la propriété CSS filtre:
On copie le source-code de l'exemple: http://fr.selfhtml.org/css/proprietes/affichage/filter_gray.htm
On ajoute un script et attribue des ID aux éléments (images):
<html><head><title>filter:Gray()</title>
<script>
function change_filter() {
document.getElementById('filterchange').style.filter = "invert()";
}
</script>
</head><body bgcolor="#FFFFFF" text="#000000">
<p>À gauche le graphique normal, à droite avec le filtre Gray():</p>
<img id="filter" src="filter_gray.jpg" width="200" height="240" border="0" alt="image">
<img id="filterchange" src="filter_gray.jpg" style="filter:Gray()" width="200" height="240" border="0" alt="image">
<p>
<a href="#" onClick="change_filter(); return false;">On teste!</a>
</body></html>
On passe de gray() à invert().
Tata et ons' tape sur les épaules :)
»» Meilleures salutations de Francfort sur le Main,
»» Patrick
Meilleures salutations de Francfort sur le Main,
Patrick
| |
Le message suivant est de: Patrick Andrieu, 08. 02. 2005, 17:18
http://actuel.fr.selfhtml.org/equipe/patrick.htm
»» Et rebonjour!
Et encore!
Et voilà un rollover noir et blanc/couleurs:
<html><head><title>filter:Gray()</title>
<script type="text/javascript">
function change_filter() {
document.getElementById('filter').style.filter = "";
}
function rechange_filter() {
document.getElementById('filter').style.filter = "Gray()";
}
</script>
</head><body bgcolor="#FFFFFF" text="#000000">
<p>Survolez l'image avec la souris pour la voir en couleurs:</p>
<a href="javascript:void(0);" onMouseover="change_filter();return true" onMouseOut="rechange_filter();return true;"><img name="picture" id="filter" src="filter_gray.jpg" style="filter:Gray()" width="200" height="240" border="0" alt="image"></a>
</body></html>
Reste à rappeler que cela ne fonctionne qu'exclusivement avec Internet Explorer et qu'il serait mieux de faire un rollover classique, c'est à dire avec deux images (une noire et blanc et une couleurs).
Meilleures salutations de Francfort sur le Main,
Patrick
| |
Le message suivant est de: Bartouille, bertrand.wattel_pasDeSpam@free.fr, 08. 02. 2005, 20:03
http://mythes.foret.free.fr
»» document.getElementById('filter').style.filter = "Gray()";
Salut Patrick,
Merci pour la syntaxe ! Vue la portabilité du script, je n'avais même pas approfondie la question.
Bartouille
| |
Le message suivant est de: s6rano, 09. 02. 2005, 12:58
Si tout ça ne constitue pas une réponse complète, je ne m'y connais pas. Merci à tous pour cette contribution dont la conclusion est qu'en effet, pour le moment, il vaut mieux passer par 2 images plutôt qu'une. Mais l'exercice de style en valait la peine. Encore merci à tous.
S6
| |
Le message suivant est de: Bartouille, bertrand.wattel_pasDeSpam@free.fr, 08. 02. 2005, 20:30
http://mythes.foret.free.fr
»» Bonjour,
»»
»» Bartouille, est-ce de l'irone que je sent dans ton message ?
YES ! J'adore Javascript, mais que chacun y doit allé de sa syntaxe pour faire exactement la même chose m'exaspère !
»» Pourquoi ne pas jouer que le filter:alpha pour IE et sur opacity pour les autres ?
Si on joue sur l'opacité, on va faire ressortir la couleur de fond en plus, mais c'est une possibilité. D'autant plus que le passage en gamme de gris ne sera vraiment esthétique sur fond blanc ou noir.
»» Non, Pour vu que ça dure... :)
Je suis d'accord, c'est un petit peu comme la peinture métallisée sur une voiture (n'est-ce pas Patrick ?), ça fait joli mais elle ne va pas mieux rouler.
Bartouille
|
| Forum SELFHTML Archives du forum 2005 février |
© 1998-2004 selfhtml@fr.selfhtml.org
(CSS)