Evènements javascript KompoZer

Le premier forum francophone sur l'éditeur de pages Web multiplateforme (Linux, Mac OS X, Windows) qui monte… KompoZer, héritier de Nvu, permet de créer vos pages Web graphiquement (wysiwyg) sans aucune connaissance du langage HTML.

Modérateur : chinon37

LN
Arias
Messages : 3
Inscription : 11 févr. 2008, 13:02

Evènements javascript KompoZer

Message par LN »

Bonjour,
Je suis en train de travailler sur mon site et ce en découvrant petit à petit toutes les possibilités de KompoZer. Malheureusement, je ne connais pas encore bien le langage HTML et travaille donc en mode "visuel". J'aimerai, juste au passage de la souris sur un lien texte, qu'une image apparaisse et disparaisse au centre de la page...C'est sans doute idiot comme question...
Est-ce qu'il serait possible d'avoir quelques précisions sur l'utilisation et mise en place des évènements JavaScript?
Merci à vous pour votre aide précieuse.

LN

Message envoyé avec : Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1; FREE; (R1 1.3); .NET CLR 1.1.4322)
Mongo Bob
Varan
Messages : 1903
Inscription : 10 sept. 2005, 01:51

Message par Mongo Bob »

LN a écrit :J'aimerai, juste au passage de la souris sur un lien texte, qu'une image apparaisse et disparaisse au centre de la page..
Bonjour, elle disparaît parce que le curseur a quitté le lien? ou elle doit disparaître toute seule, c'est à dire n'apparaître qu'une seconde : faut-il contrôler le temps d'apparition? Auquel cas plutôt javascript ou php.
En fait, je réponds parce que si c'est pour qu'elle apparaisse et reste apparente seulement durant le survol du lien, on a pas besoin de dynamique js ou php et on peut le faire avec css.
Si c'est bien le contrôle de la durée d'apparition, essaie de poser ta question sur Développement Web ou fais y plutôt une recherche, la réponse y est sans doute déjà.
On peut en effet insérer JS ou php dans Kpz.
Win:Kpz version 0.7.10 (20070831)
Ubuntu:Kpz v 20090206
2 tutos :
http://josar.free.fr/index.html
http://info.sio2.be/kpz/
1 nécessité :
http://www.geckozone.org/forum/viewtopic.php?t=51228
LN
Arias
Messages : 3
Inscription : 11 févr. 2008, 13:02

Message par LN »

Bonjour et merci pour ta réponse.
En effet je n'ai pas été très claire. Je souhaite que l'image reste apparante tant que la souris n'a pas quitté le survole du lien.
Tu dis que je n'ai pas besoin de JScript tant qu'il n'y a pas de notification de durée, c'est bien cela?
Existe -t-il, dans ce cas, des tutos pour ce genre d'action en CSS?
Merci encore.

LN

Message envoyé avec : Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1; FREE; (R1 1.3); .NET CLR 1.1.4322)
Fabrice.Tres.Net
Tyrannosaurus Rex
Messages : 2390
Inscription : 26 juin 2006, 12:50

Message par Fabrice.Tres.Net »

Ce sont des popup en css

Il faut faire une recherche sur "afficher popup css hover", cela devrait donner quelques liens intéressants.
Mongo Bob
Varan
Messages : 1903
Inscription : 10 sept. 2005, 01:51

Message par Mongo Bob »

ici, il y a des exemples :
http://retouraudelta.free.fr/index.html
si tu passes sur le rond rouge-lien une photo apparaît tant qu'il y a le survol, cette image de rond rouge peut être remplacée par du texte,
html :

Code : Tout sélectionner

<li>Albert King <img class="imgflecheshr" src="img/flecheshr.png" alt="" width="50">
        <hr>
        <div>
          <a href="king.html" title="vers la page de Albert King"><img class="imgli" src="img/fonddivlien.png" alt=
          "vers la page de Albert King" width="45"> <span><img src="img/king.jpg" alt="Albert King" width=
          "100"></span></a>
        </div>
      </li>
au minimum :

Code : Tout sélectionner

<li>blabla éventuel
         <div>
          <a href="blabla.html" title="vers le blabla"><img class="imgli" src="img/fonddivlien.png" alt=
          "vers la page de blablabla" width="45"> <span><img src="img/king.jpg" alt="Albert King" width=
          "100"></span></a>
        </div>
      </li>
tout est dans le "display:none" du <span>, ce qui est entre <span> et </span> n'apparaît qu'au survol, en css pour tout ce qui touche au <a> :

Code : Tout sélectionner

a {
  color: #000099;
  display: block;
  text-decoration: none;
}
a span {
  display: none;
}
a:hover {
  background-color: transparent;
}
a:hover span {
  display: block;
  position: absolute;
  left: 300%;
  top: -22px;
}
Ceci dit que ce qui est entre <span> (l'image de survol) ne doit pas s'afficher (display: none = affichage: aucun) :

Code : Tout sélectionner

a span {
  display: none;
}
Ceci fait une exception : dans le cas où cette image de survol est -justement- survolée (hover), elle doit quand même s'afficher à un endroit bien précis (on indique une position absolue pour pouvoir utiliser "top" et "left" qui positionnent là où tu veux) :

Code : Tout sélectionner

a:hover span {
  display: block; etc... etc...
tout ça est sorti de :
tuto d'Alsacréations
des précisions?
Win:Kpz version 0.7.10 (20070831)
Ubuntu:Kpz v 20090206
2 tutos :
http://josar.free.fr/index.html
http://info.sio2.be/kpz/
1 nécessité :
http://www.geckozone.org/forum/viewtopic.php?t=51228
LN
Arias
Messages : 3
Inscription : 11 févr. 2008, 13:02

Message par LN »

Merci beaucoup, c'est exactement ce dont j'avais besoin!
Je devrais pouvoir m'en sortir!

Merci encore d'avoir été aussi clair.




Message envoyé avec : Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1; FREE; (R1 1.3); .NET CLR 1.1.4322)
Mongo Bob
Varan
Messages : 1903
Inscription : 10 sept. 2005, 01:51

Message par Mongo Bob »

LN a écrit :Merci encore d'avoir été aussi clair.
:oops:


:arrow: précision :

Code : Tout sélectionner

a:hover {
  background-color: transparent; 
ceci n'existe que pour contenter ce gros balourd de IE 6-7
Win:Kpz version 0.7.10 (20070831)
Ubuntu:Kpz v 20090206
2 tutos :
http://josar.free.fr/index.html
http://info.sio2.be/kpz/
1 nécessité :
http://www.geckozone.org/forum/viewtopic.php?t=51228
Répondre

Qui est en ligne ?

Utilisateurs parcourant ce forum : Aucun utilisateur inscrit et 3 invités