11543 sujets

JavaScript, DOM et API Web HTML5

Pages :
Salut

J'ai un soucis de rollover dans ie que je ne peux régler qu'en javascript, enfin ce serait le plus approprié Smiley lol

voila mon sujet dans la partie general pour ceux qui veulent la lire :

http://forum.alsacreations.com/topic-1-14997-1-Hover-ok-dans-FF--hover-dans-ie-.html

Bref, je m'explique :

Sur Firefox, il suffit d'un hover et hop l'image background change...

Sur Ie c'est une autre histoire Smiley lol


Lorsque l'on se déplace sur le menu, l'image devient plus clair... sous FF, j'aimerai pouvoir faire pareil sous Ie tout en gardant mon hover pour FF...

Un petit code javascript externe tout simple et propre voila tout ce que je désire Smiley confused

Pareil pour le bouton "changer" de style, sous FF, il devient orange en rollover, comment le faire également sous Ie ?

Merçi à tous pour votre aide Smiley smile
Modifié par yank (24 Dec 2007 - 11:10)
Merçi pour le lien Smiley smile

Je vais essayer ça, mais n'y a t'il pas plus simple pour faire un effet rollover ? du genre mouseout mouse...

J'utilise un swith php sur mon site...donc si je fais ce tuto, logiquement ça devrait bien fonctionner sur mon design avec la feuille de style concernée, mais sur les autres design vu que je ne veux pas cet effet est ce que le fait de mettre dans la page xhtml :
<body onload="emulHover()">
ne va pas causer des erreurs dans la page ?

Merçi Smiley smile
Modifié par yank (10 Jun 2006 - 09:36)
Ca ne fonctionne pas... Ce que je veux faire, ce n'est pas un rollover sur les liens du menu (li ni ul) mais bien sur l'image de fond ! et avec cette methode, ce sont les liens qui font un rollover...de plus ça ne fonctionne toujours pas sur IE... Smiley sweatdrop
Salut,

a écrit :
Ce que je veux faire, ce n'est pas un rollover sur les liens du menu (li ni ul) mais bien sur l'image de fond !

Tu ne fais pas un hover sur une image de fond mais sur l'entité qui la supporte :
p {background: url(image1.jpg);}
p:hover {background: url(image2.jpg);}

Sous IE pour réaliser cela il faut utiliser un js particulier csshover.htc utilisable dans une css pour ie dans des commentaires conditionnels :
<!--[if lte IE 6]>
<style type="text/css" media="screen">
body {behavior:url(csshover.htc);}
</style>
<![endif]-->

Google est ton ami.
Modifié par papyjo (10 Jun 2006 - 10:22)
Ce qui me dérange c'est que toutes les solutions proposées sont sur les "li" et "ul" alors que moi ce que je veux changer c'est le fond de mon div (class) menu et pas ma liste de menu ou autres...

mon code :

# body {

    * margin : 0;
    * text-align : center;
    * background-color : #402d20;

}
# #global {

    * position : absolute;
    * left : 50%;
    * top : 50%;
    * width : 750px;
    * height : 550px;
    * margin-top : -275px;
    * margin-left : -375px;
    * background-color : #bfa38f;

}
# .header {

    * height : 100px;
    * background-image : url(visuels/png/a.png);

}
# .menu {

    * left : 0;
    * width : 200px;
    * position : absolute;
    * height : 400px;
    * background-image : url(visuels/png/b.png);

}
# .menu:hover {

    * background-image : url(visuels/png/_menuhover.png);

}


Voila : .menu c'est l'image de fond entre autre (background-image : url(visuels/png/b.png); ) et .menu:hover dans FF nikel, mais Ie non...

Et tous les exemples que je vois sont :
#menu li:hover ul {


Des trucs dans le genre avec des li de partout, mes LI sont trés bien comme ils sont et le rollover ce fait trés bien sur eux puisque ce sont des liens et que les balises a les definies... Smiley sweatdrop

Ca devient dur à expliquer pour un si petit effet si simple il me semble pourtant

# .menugauche {

    * font-family : "Trebuchet MS", Arial, Heveltica, sans-serif;
    * font-style : normal;
    * font-size : 0.9em;
    * text-decoration : none;
    * margin : 20px 0 0 20px;
    * list-style-type : none;
    * text-align : left;
    * padding : 0;

}
# .menugauche li {

    * font-size : 0.9em;
    * font-style : normal;
    * font-weight : bold;
    * color : #ffffff;
    * margin-bottom : 5px;

}

Modifié par yank (10 Jun 2006 - 11:57)
Je sais pas ça n'existe pas un truc tout simple du genre
onmouseover="document.rollover.src=button2.src" onmouseout="document.rollover.src=button1.src"


enfin même la c'est compliqué pour pas grand chose, dans dream par exemple on peut le faire automatiquement genre dans le menu : image survolée et on choisit ces images sauf que le code est immonde certes mais c'est simple et pas besoin de 36000 fichiers pour faire un rollover d'une image (de fond)

Smiley fache j'abandonne pour ce weekend merci quand même, overdose la Smiley biggol
Salut,

Tu n'as peut être pas bien testé ce que j'ai écrit, mais csshover.htc, détecte dans ta css tous les :hover et leur attache une classe permettant palier le défaut. Toutes les balises sont prises en compte. Je viens de tester le p et p:hover et c'est nickel. Il fait de même avec les :active.

Test pour IE
Modifié par papyjo (10 Jun 2006 - 12:32)
Salut Smiley smile

Oui en effet sous ie je vois bien ton image qui change au survol... Donc il me reste à le trouver sur google et à l'appliquer sur mon div .menu enfin ma class plutot... Smiley rolleyes

Merçi
Modifié par yank (11 Jun 2006 - 11:44)
J'en ai marre de toutes ces prises de têtes et de dechiffrer leur charabia imcomprehensible tout ça pour faire un rollover tout simple... j'attendrai ie7 Smiley decu

Merçi quand même du coup de main Smiley cligne
je viens de voir dans ton code source
<!--[if lte IE 6]>
<style type="text/css" media="screen">
html {scrollbar-base-color:#800;}
body {behavior:url(csshover.htc);}
body {scrollbar-base-color:#946d84;}
p {
background:url(images/barre.jpg);
}
p:hover {
background:url(images/boussole.jpg);
}
</style>
<![endif]-->


Si avec seulement ça , ça fonctionne je vais quand même essayer, car je ne trouve pas la démarche sur les autres sites...

Du moins je ne trouve pas ce qu'l faut mettre dans le fichier csshover.htc Smiley bawling
Modifié par yank (11 Jun 2006 - 12:23)
salut

le fichier htc contient ceçi :

<attach event="ondocumentready" handler="parseStylesheets" />
       <script>

       /**
       *        Whatever:hover - V1.42.060206 - hover & active

       *        ------------------------------------------------------------

       *        (c) 2005 - Peter Nederlof
       *        Peterned -  http://www.xs4all.nl/~peterned/
 

       *        License  -  http://creativecommons.org/licenses/LGPL/2.1/
 

       *
       *        Whatever:hover is free software; you can redistribute it and/or

       *        modify it under the terms of the GNU Lesser General Public

       *        License as published by the Free Software Foundation; either

       *        version 2.1 of the License, or (at your option) any later version.

       *
       *        Whatever:hover is distributed in the hope that it will be useful,

       *        but WITHOUT ANY WARRANTY; without even the implied warranty of

       *        MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU

       *        Lesser General Public License for more details.

       *
       *        Credits and thanks to:
       *        Arnoud Berendsen, Martin Reurings, Robert Hanson

       *
       *        howto: body { behavior:url("csshover.htc"); }

       *        ------------------------------------------------------------

       */
       
       var csshoverReg = /(^|\s)(([^a]([^ ]+)?)|(a([^#.][^ ]+)+)) [decu]hover|active)/i,

       currentSheet, doc = window.document, hoverEvents = [], activators = {

              onhover:{on:'onmouseover', off:'onmouseout'},

              onactive:{on:'onmousedown', off:'onmouseup'}

       }
       
       function parseStylesheets() {
              if(!/MSIE (5|6)/.test(navigator.userAgent)) return;

              window.attachEvent('onunload', unhookHoverEvents);
              var sheets = doc.styleSheets, l = sheets.length;

              for(var i=0; i<l; i++) 
              parseStylesheet(sheets[i]);

       }
       function parseStylesheet(sheet) {
              if(sheet.imports) {

                     try {
                            var imports = sheet.imports, l = imports.length;

                            for(var i=0; i<l; i++) parseStylesheet(sheet.imports[i]);

                     } catch(securityException){}
              }
              
              try {

                     var rules = (currentSheet = sheet).rules, l = rules.length;

                     for(var j=0; j<l; j++) parseCSSRule(rules[j]);

              } catch(securityException){}
       }
       
       function parseCSSRule(rule) {

              var select = rule.selectorText, style = rule.style.cssText;

              if(!csshoverReg.test(select) || !style) return;

              
              var pseudo = select.replace(/[^:]+ [decu][a-z-]+).*/i, 'on$1');

              var newSelect = select.replace(/(\.([a-z0-9_-]+):[a-z]+)|(:[a-z]+)/gi, '.$2' + pseudo);

              var className = (/\.([a-z0-9_-]*on(hover|active))/i).exec(newSelect)[1];

              var affected = select.replace(/ [decu]hover|active).*$/, '');

              var elements = getElementsBySelect(affected);
              if(elements.length == 0) return;

              
              currentSheet.addRule(newSelect, style);
              for(var i=0; i<elements.length; i++)

              new HoverElement(elements[i], className, activators[pseudo]);

       }
       
       function HoverElement(node, className, events) {

              if(!node.hovers) node.hovers = {};

              if(node.hovers[className]) return;
              node.hovers[className] = true;

              hookHoverEvent(node, events.on, function() { node.className += ' ' + className; });

              hookHoverEvent(node, events.off, function() { node.className = node.className.replace(new RegExp('\\s+'+className, 'g'),''); });

       }
       function hookHoverEvent(node, type, handler) {

              node.attachEvent(type, handler);
              hoverEvents[hoverEvents.length] = { 
                     node:node, type:type, handler:handler 
              };

       }
       
       function unhookHoverEvents() {
              for(var e,i=0; i<hoverEvents.length; i++) {

                     e = hoverEvents[i]; 
                     e.node.detachEvent(e.type, e.handler);

              }
       }
       
       function getElementsBySelect(rule) {
              var parts, nodes = [doc];

              parts = rule.split(' ');
              for(var i=0; i<parts.length; i++) {

                     nodes = getSelectedNodes(parts[i], nodes);

              } return nodes;
       }
       function getSelectedNodes(select, elements) {

              var result, node, nodes = [];

              var identify = (/\#([a-z0-9_-]+)/i).exec(select);

              if(identify) {
                     var element = doc.getElementById(identify[1]);

                     return element? [element]:nodes;
              }
              
              var classname = (/\.([a-z0-9_-]+)/i).exec(select);

              var tagName = select.replace(/(\.|\#|\:)[a-z0-9_-]+/i, '');

              var classReg = classname? new RegExp('\\b' + classname[1] + '\\b'):false;

              for(var i=0; i<elements.length; i++) {

                     result = tagName? elements[i].all.tags(tagName):elements[i].all; 
                     for(var j=0; j<result.length; j++) {

                            node = result[j];
                            if(classReg && !classReg.test(node.className)) continue;

                            nodes[nodes.length] = node;
                     }
              } 

              
              return nodes;
       }
       </script>


le site qui distribue ce script :

http://www.xs4all.nl/~peterned/csshover.html[/i][/i][/i][/i][/i][/i][/i]
Modifié par keran (11 Jun 2006 - 15:07)
Ok merçi bien

J'ai enfn reussi, et l'effet n'a pas l'air d'être lourd et tout reste conforme a priori... Smiley smile

Merçi beaucoup

Ps : Je suis obligé de laisser leur charabia ? :
<attach event="ondocumentready" handler="parseStylesheets" />
<script>
/**
 *	Whatever:hover - V1.42.060206 - hover & active
 *	------------------------------------------------------------
 *	(c) 2005 - Peter Nederlof
 *	Peterned -  http://www.xs4all.nl/~peterned/
 
 *	License  -  http://creativecommons.org/licenses/LGPL/2.1/
 
 *
 *	Whatever:hover is free software; you can redistribute it and/or
 *	modify it under the terms of the GNU Lesser General Public
 *	License as published by the Free Software Foundation; either
 *	version 2.1 of the License, or (at your option) any later version.
 *
 *	Whatever:hover is distributed in the hope that it will be useful,
 *	but WITHOUT ANY WARRANTY; without even the implied warranty of
 *	MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
 *	Lesser General Public License for more details.
 *
 *	Credits and thanks to:
 *	Arnoud Berendsen, Martin Reurings, Robert Hanson
 *
 *	howto: body { behavior:url("csshover.htc"); }
 *	------------------------------------------------------------
 */


Merçi Smiley biggrin
Modifié par yank (12 Jun 2006 - 09:52)
J'ai un problème équivalent, mais en lieu et place de mettre une image sur une balise <p>, je veux changer la couleur de fond lorsque je passe au-dessus...
J'ai donc ma feuille de style qui ressemble à
#catselector p.category, #catselector p.category_first {
	text-align: center;
	width: 77px;
	float: left;
	font-size: 13px;
	font-weight: bolder;
	padding: 0px;
	padding-top: 1px;
	padding-bottom: 2px;
	margin: 0px;
}
#catselector p.category {
	border-left: 1px solid #CCC;
}
#catselector p:hover {
	background-color: #800000;
	color: #FFF;
}


Visible en ligne ici:
http://www.ethes.org?version=9

Ceci ne marche bien sûr pas avec IE6 (ca serait trop simple). Le style p:hover étant tout bonnement ignoré.

J'ai tenté de résoudre mon problème avec le fichier htc... sans succès... quelqu'un peut-il m'aider?

# .menugauche {
    * font-family : "Trebuchet MS", Arial, Heveltica, sans-serif;
    * font-style : normal;
    * font-size : 0.9em;
    * text-decoration : none;
    * margin : 20px 0 0 20px;
    * list-style-type : none;
    * text-align : left;
    * padding : 0;
}


C'est moi qui sait plus coder du css ou il y a un problème ?

C'est quoi l'intérêt du # tout seul et des * ???

Ce css ne passe pas du tout dans mon validateur
Modifié par Grumelo (22 Jun 2007 - 08:54)
Bonjour,

J'ai un probleme avec le même fichier htc que celuis présenté plus haut.
En fait, en rajoutant des alert, j'ai remarqué que sur IE7, le fhcier était chargé et les fonctions javascript lancées (j'avais rajouté IE7 dans les conditions pour ce test).
Par contre, sur IE6, le fhcier est chargé mais l'événement n'a pas l'air de se faire car même la première fonction n'est pas lancée. Quelqu'un a-t-il une idée ou rencontrer ce probleme auparavant ?

Merci d'avance.

----- RESOLU ---

J'ai changé
<attach event="ondocumentready" handler="parseStylesheets" />

par
<PUBLIC:ATTACH EVENT="ondocumentready" HANDLER="parseStylesheets" />


Bonne soiree
Modifié par Tchinkatchuk (11 Jul 2007 - 19:18)
Que de complication.

Il suffit d'utiliser behavior pour executer une expression du type :


li {
	behavior :expression(addHover(this));
}


Ensuite on définit :

li:hover, li.hover {
	mes styles : mes propriétés
}


Et enfin :

function addHover (el) {
	el.behavior = " "; //Evite au script de tourner en boucle
	el.onmouseenter = function() {
		this.className += ' hover';
	};
	el.onmouseleave = function() {
		this.className.replace(/\bhover\b/,"");
	};
}

Modifié par Shinuza (12 Jul 2007 - 10:53)
Pages :