Editeur de propriétés avancés

Dandy_999 · Message par **Dandy_999** » 20 oct. 2006, 20:41

Je suis le nez dans le moteur...comme disait l'autre. En ce moment je fais un site pour une assos, mais...

car il y a un toujours un "mais"

J'aimerais utiliser la fonction "Evénements Javascripts" et ses sous rubriques comme par exemple la fonction "onmouseover" et "onmouseout".
Le problème est que je sais pas quoi mettre comme attributs.

Un ex : faire en sorte qu'un lien, au passage de la souris (onmouseover) se mette en rouge ou en italique ou etc. puis retourne en mode normal (onmouseout). Je ne comprends le système de l'attribut d'une valeur.

J'ai cherché sur le web, il n'ya rien qui explique les attributs.

En somme, j'ai besoin d'un coup de paluche pour mon site.

MERCI!!!!!

Message envoyé avec : Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.0)

claudef · Message par **claudef** » 20 oct. 2006, 21:38

Bjr, voici un petit code qui devrait fonctionner.
Une fonction en javascript que tu places en début de script puis un exemple avec une balise <td> d'un tableau. quand tu passes la souris sur la cellule du tableau, celle-ci change de couleur puis quand la souris sort, elle reprend la couleur initiale ou une autre, enfin tu vois...

Cela ne répond peut-être pas totalement à ta question mais j'espère qu'elle y apportera un début de réponse.

Bon courage

Code : Tout sélectionner

<!-- fonctions javascript -->
<script langage="javascript">
function SourisPasse(o, etat, action)
{
	if(action == 1)
	{
		if(etat) //souris sur l'objet
		{
			o.style.background = "#99FFCC";
			o.style.color="#660033";
			o.style.cursor = "hand";
		}
		else // souris hors de l'objet
		{
			o.style.background = "#FFFFCC";
			o.style.color="black";
		}
	}
	else if(action == 2)
	{
		if(etat) //souris sur l'objet
		{
			o.style.background = "#99FFCC";
			o.style.color="#660033";
			o.style.cursor = "hand";
		}
		else // souris hors de l'objet
		{
			o.style.background = "#CCFFFF";
			o.style.color="black";
		}
	}
}
</script>

<table>
  <tr>
    <td align=center width=33% bgcolor=#FFFFCC
	           onmouseover=\"SourisPasse(this, true, 1)\"
		   onmouseout=\"SourisPasse(this, false, 1)\">";
  </tr>
</table>

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.0.7) Gecko/20060909 Firefox/1.5.0.7

Dandy_999 · Message par **Dandy_999** » 22 oct. 2006, 00:09

Je suis le nez dans le moteur...comme disait l'autre.

Merci pour le script,

Je vais pouvoir l'utiliser cela me sera utile.

Mais, je me creuse la tête quand même pour me dire qu'il est possible de trouver un dico, ou un tuto sur cette fonction d'édition avancée.

Il est plus simple et plus rapide, selon moi, d'intervenir sur un événement en particulier que ce soit en javascript ou en html à condition de savoir quelles sont les valeurs à inscrire dans cette boite de dialogue.

Je repars fureter en attendant, je l'espère, d'autres réponses à ma quête.

Si autre(s) idée(s), n'hésitez pas à faire signe. J'arriverai bien à en faire un tuto un jour.

Message envoyé avec : Mozilla/5.0 (Windows; U; Win 9x 4.90; es-ES; rv:1.8.0.2) Gecko/20060308 Firefox/1.5.0.2

Message par **chinon37** » 22 oct. 2006, 08:37

Pourquoi du javascript???
Avec du html et du css, tu fais la même chose en plus simple, et les gens qui déconectent le js le verront:
exemple:

Code : Tout sélectionner

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
    <meta name="generator" content="HTML Tidy for Windows (vers 12 April 2005), see www.w3.org">
    <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
    <title>
      essai
    </title>
<style type="text/css">
a hover {
  color: #cc0000;
  font-style: italic;
  font-weight: bold;
}
a {
  color: #3333ff;
  text-decoration: none;
  font-size: 20px;
}

</style>
  </head>
  <body>
    <a href="#">ceci est un lien</a>
  </body>
</html>

tu fais un copié-collé du code dans Nvu/Kompozer (onglet source en supprimant tout code de la page au préalable) tu enregistres et tu fais un aperçu dans le navigateur.
En tapant "css html" dans google, tu auras les infos

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.0.7) Gecko/20060909 Firefox/1.5.0.7

Message par **Ymai** » 22 oct. 2006, 09:25

Bonjour
+1 pour Chinon et malheureusement -1 pour claudef
La solution CSS devrait pouvoir être utilisée dans la plupart des cas, sauf quand l'objet visé n'est pas un lien <a>.
Et, dans ce cas, il faut ruser avec IE pour qu'il accepte des directives du type:
.machinchouette:hover,
lui qui n'accepte que
a:hover
Le sujet est abondamment traité ailleurs.

Je constate toutefois que le Javascript proposé par claudef ne fonctionne pas (en tous les cas pas sous FF2RC3) ni sous IE. En fait, brutalement dit, il me paraît bancal et sémantiquement curieux (pourquoi un tableau?).
Je propose donc:

Code : Tout sélectionner

<!-- fonctions javascript -->
<script language="javascript" type="text/javascript">
function SourisPasse(o, etat, action)
{
if(action == 1)
{
if(etat) //souris sur l'objet
{
o.style.background = "#99FFCC";
o.style.color="#660033";
o.style.cursor = "pointer";
}
else // souris hors de l'objet
{
o.style.background = "#FFFFCC";
o.style.color="black";
}
}
else if(action == 2)
{
if(etat) //souris sur l'objet
{
o.style.background = "#99FFCC";
o.style.color="#660033";
o.style.cursor = "pointer";
}
else // souris hors de l'objet
{
o.style.background = "#CCFFFF";
o.style.color="black";
}
}
}
</script> 
<span style="text-align: center; background-color: #FFFFCC;" 
onmouseover="SourisPasse(this,true,1)"
onmouseout="SourisPasse(this,false,2)">un bout de texte
</span>

Il y a sûrement moyen de faire mieux, mais celui-ci a l'avantage de fonctionner (si Javascript est activé) et d'être syntaxiquement correct.
Merci de me corriger les erreurs qui restent.

Mais on est vraiment un peu HS, là, non?

claudef · Message par **claudef** » 22 oct. 2006, 21:20

Salut Ymai,

Dsl, mais le script fonctionne sous IE et sous FF 1.5.0.7. Il a été testé et est utilisé par ma boîte depuis plus d'un an.
Kenavo

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.0.7) Gecko/20060909 Firefox/1.5.0.7

Invité · Message par **Invité** » 23 oct. 2006, 03:33

Toujours une soupape a regler...

bonsoir,

Je constaste que vous vous donnez du mal pour répondre a ma question de départ.

Je comprends bien le fait d'inscrire un script ou d'utiliser le html, c'est une satisfaction qui completera mon site deja. Mais, etant pointilleux et curieux, je souhaiterais tout de même pouvoir utiliser cette boite de dialogue.
Elle m'obsede!!!!
Je pose la question :
Quelles seraient les valeurs a attribuer dans le champ qui suit une commande X?

ex:
Fonctions
onmouseover

Attributs
???????

Peut être cela répondrait-il a une attente de certains internautes qui seraient a même d'utiliser cette fonction "d'Editeur de propriétés avancés"

Merci pour les réponses. Merci de l'aide.

Message envoyé avec : Mozilla/5.0 (Windows; U; Win 9x 4.90; es-ES; rv:1.8.0.2) Gecko/20060308 Firefox/1.5.0.2

Message par **Ymai** » 23 oct. 2006, 11:28

claudef a écrit :Il a été testé et est utilisé par ma boîte depuis plus d'un an.

J'aurais peut-être dû être moins abrupt. Désolé.
Je vois plusieurs soucis, malgré tout, qui empêcheront l'utilisateur non averti d'utiliser le script en l'état.

Code : Tout sélectionner

o.style.cursor = "hand";

doit être remplacé par

Code : Tout sélectionner

o.style.cursor = "pointer";

http://www.w3schools.com/css/pr_class_cursor.asp
Le premier n'étant pas interprété par FF mais seulement par IE. Il n'y aura donc pas de "main" visible sous FF (même si le changement de couleur n'est pas affecté par ce problème).
Sinon, le script fonctionne effectivement... presque. Il y a sans doute un problème de recopie:

Code : Tout sélectionner

onmouseover="SourisPasse(this, true, 1)"

ne peut évidemment passer à cause des "".
Ma remarque concernait aussi la sémantique et/ou la logique. A quoi peut bien servir un tableau d'une seule cellule dont l'unique colonne mesure 33% du tableau?
Pour le reste, je ne me suis effectivement pas fatigué: j'ai repris le code de claudef qui fait parfaitement son travail.

Message par **Ymai** » 23 oct. 2006, 11:34

Anonymous a écrit :ex:
Fonctions
onmouseover

Je dois avouer que là, je ne suis pas...

Attributs

Attributs: onmouseover
valeur: javascript:uneFonction()

Exemple de valeur: javascript:SourisPasse(this, true, 1)

Geckozone

Editeur de propriétés avancés

Editeur de propriétés avancés

Re: Editeur de propriétés avancés

Qui est en ligne ?