Pages :
(reprise du message précédent)

Voilà donc rien ne change j'ai même désinstallé HTMLPAD2008 sauf que quand je clique sur le js dans windows il me met un message d'erreur comme quoi il ne peut l'ouvrir avec le moteur de script

j'ai donc mis le dossier roll le fichier rollover.js qui a bien une extension js et mon fichier testrollover.html ici en lien
http://nobleconnection.fr/testrollover.html
Le problème vient de ce que tu enregistres tes fichiers en utf-8 avec BOM (d'où l'apparition de ce curieux ). Trouves comment le "décocher" et ça devrait être bon...
c'est bizarre parce je ne les ai pas ces caractères sur IE et Safari uniquement sur FF en plus j'ai fait plusieurs suppressions à la fin mais cela ne fait rien

J'ai réinstallé HTMLPAD2008 et là je lui ai demandé de m'insérer un encodage en utf-8 en plus la page est validée par W3C mais pareil il me met ce message d'avertissement

Bon là je dois m'absenter

merci
a++
Je ne connais pas HTMLPAD2008 mais tu pourrais regarder du côté de PSPAD ou de Komodo Edit (gratuits) qui gèrent ça très bien.
rebonjour,

pourrais-tu me rendre un service se serait d'essayer sur ton pc ou ton navigateur le même exercice test pour savoir si cela fonctionne chez toi en local ou si vraiment cela vient du script ou de mon pc parce que là je commence à désespérer complet Smiley rolleyes .

Le plus énigmatique c'est que sur la page du lien où j'ai repris tout fonctionne dans mes différents navigateurs et chez moi cela ne colle pas lol Smiley murf

Je vais faire un copiez coller complet de leur source avec leur doctype et tout ce qui vas avec et j'éliminerai tout le surplus en gardant uniquement ce qui m'intéresse pour voir si vraiment cela vient de mon entête

a++
En fait c'est inutile de faire un test : il suffit de regarder sur BOM Tester en mettant l'URL de ton fichier JS et la réponse est OUI. Du coup rep="roll/"; devient rep="roll/"; et ça ne peut plus fonctionner Smiley cligne !
Comme le dit Heyoan, le problème de BOM (Byte-Order Mark) concerne surtout le fichier http://nobleconnection.fr/rollover.js . Celui-ci est probablement lu comme commençant par les caractères , et donc tu n'y définis pas la variable rep mais plutôt une variable rep.

Il faut bien penser à enregistrer ton fichier rollover.js en UTF-8 sans BOM.

En passant: je te conseille de supprimer le prologue XML (<?xml version="1.0" encoding="utf-8"?>), qui est inutile et qui fait buguer IE6. Smiley cligne
oui mais excusez-moi Smiley confused je ne connaissais pas le problème avec ces caractères parasites donc voilà

En plus l'éditeur m'a bien proposé en effet d'enregistrer le js en UTF-8 whitout BOM. Mais cela ne fait rien le testeur me dit qu'ils sont toujours là c'est rageant Smiley fache

Mais ces caractères je les avais déjà vus dans la page du site sous Firefox en changeant de codage donc c'est quand je fais ce copier-coller que je les embarque avec non Smiley ohwell
Gil88 a écrit :
Mais ces caractères je les avais déjà vus dans la page du site sous Firefox en changeant de codage donc c'est quand je fais ce copier-coller que je les embarque avec non Smiley ohwell

Ou peut-être en enregistrant les fichiers en Unicode (ou UTF-8, suivant le nom utilisé) avec le bloc-notes de Windows, pas très fiable pour ça.
bon d'accord alors ce que je vais faire c'est de taper le code js dans l'éditeur manuellement tant pis dans un fichier vierge js préalablement enregistrer sous UTF-8 Without BOM et je verrai le résultat.

On est quand même moins embêté avec le CSS que l'on tape ou que l'on colle directement dans le bloc note, en plus beaucoup moins compliqué que le JS.

PS : j'ai téléchargé Komodo Edit j'essaierai avec aussi
Modifié par Gil88 (30 Jul 2008 - 09:30)
Regardez-voir svp en collant le script dans Komodo Edit il souligne la dernière accolade avec un message d'avertissement
ben ouai j'aurais pu continuer comme çà pendant 10 ans vous savez transformé en squelette sur ma tombe il serait marqué "mort en voulant s'abrutir à faire fonctionner des rollovers" Smiley lol Smiley lol Smiley lol

nan jrigole Smiley biggrin

nan mais là j'avais bien demandé hier d'essayer sans aucune rancune à toi Heyoan Smiley cligne Smiley cligne - Florent V. tu me sauves je commençais à douter quand même, j'ai même fait un nettoyage complet de l'ordi par sécurité Smiley rolleyes

mais alors je comprends pas quand on regarde leur page cela fonctionne et quand on veut l'essayer cela ne marche pas Smiley rolleyes Smiley rolleyes Smiley rolleyes
ils ont peut-être omis de coller une ligne dans le script affiché dans la page web ?

Est-ce que par exemple le fait d'avoir encoder leur page en iso-8859-15 et d'afficher un fichier source en js qui normalement doit être enregistré en UTF-8 ait une incidence quelconque lors du copier-coller ?

je mets le code pour examen
rep = "roll/" // Répertoire exclusif des images du rollover
pref = "ov_"  // préfixe des images de remplacement.

function initRollover() [b]{[/b]
src1=src2=el=0;imageOver=[];
im=document.getElementsByTagName('img');if(!im)return;
for(var i=0; i < im.length; ++i) [b]{[/b] //images inverses exclues
  if(im[i].src.indexOf(rep)!=-1 && im[i].src.indexOf(rep+pref)==-1) 
[b] { [/b]
  
    // Charge les images de remplacement :
    imageOver[i]=new Image();
    imageOver[i].src=im[i].src.replace(rep,rep+pref)
    [b] } [/b]
 [b] } [/b]
 addEvent(D,"mouseover",chg_img) 
 addEvent(D,"mouseout",retabli_img) 
[b]}[/b]

function chg_img(e)  [b]{[/b]
el=window.Event?e.target:event.srcElement;
if(el.tagName=="IMG" && el.src.indexOf(rep)!=-1 && el.src.indexOf(rep+pref)==-1)
[b]{[/b]  //image à inverser?
  src1=el.src;el.src=el.src.replace(rep,rep+pref)
  [b]}[/b]
[b]}[/b]

function retabli_img() [b]{[/b] if(src1)el.src=src1;src1=0 [b]}[/b]

function addEvent(obj,evType,fn,capt)[b]{[/b] // ajoute un événement sans écraser l'éxistant.
if(obj.addEventListener) [b]{[/b] obj.addEventListener(evType,fn,capt);return true; [b]}[/b] // NS6+
else if(obj.attachEvent)obj.attachEvent("on"+evType,fn) // IE 5+
else [b]{[/b] return false; [b]}[/b]
[b]}[/b] 

// initialisation 
addEvent(window,"load",initRollover) 
[/i][/i][/i][/i][/i]
Modifié par Gil88 (30 Jul 2008 - 18:49)
Vous voyez comme le javascript est beaucoup plus saoulant que le CSS j'ai trouvé le fichier CSS qui était dans la source de la page web pour les rollovers hé bien là cela fonctionne nickel et sans grossissement comparé au premier fichier.

dans le head ou dans un fichier CSS

<!-- style du rollover css --> 
<style type="text/css">
#liens{background:top left no-repeat;}
#liens a{display:block;width:100%;height:100%;color:#000;}

/* préchargement de l'image2 */
#lien1 {width:110px;height:32px;}
#lien1 a {background-image:url(roll/bouton1.gif)}
#lien1 a:hover{background-image:url(roll/ov_bouton1.gif)}

#lien2 {width:118px;height:32px;}
#lien2 a {background-image:url(roll/bouton2.gif)}
#lien2 a:hover{background-image:url(roll/ov_bouton2.gif)}

#lien3 {width:92px;height:32px;}
#lien3 a {background-image:url(roll/bouton3.gif)}
#lien3 a:hover{background-image:url(roll/ov_bouton3.gif)}

#lien4 {width:125px;height:32px;}
#lien4 a {background-image:url(roll/bouton4.gif)}
#lien4 a:hover{background-image:url(roll/ov_bouton4.gif)}

#lien5 {width:454px;height:32px;}
#lien5 a {background-image:url(roll/bouton5.gif)}
#lien5 a:hover{background-image:url(roll/ov_bouton5.gif)}


dans le body cela correspond ici

<div id="liens">
<table >
<td id="lien1"><a href="#"></a></td>
<td id="lien2"><a href="#"></a></td>
<td id="lien3"><a href="#"></a></td>
<td id="lien4"><a href="#"></a></td>
</table>


mais j'ai remplacé background-image par background pour chaque image car j'avais un problème de décalage de la 2ième image qui était en plus repétée.

Donc pour quoi se compliquer avec du JS quand le CSS est beaucoup plus simple tant dans le fonctionnement que dans le langage Smiley biggrin

Voilà ma foi si vous arrivez à trouver le bug du JS je vous tire mon chapeau.

comme je dois revoir mon site pour le faire en CSS complet c'est un langage avec l'XHTML que je vais privilégier.

En tout cas merci pour votre aide et vos interventions.

Bien cordialement

et un grand merci aussi à l'auteur http://moncastel.9online.fr/ pour ses exemples
Gil Smiley biggrin Smiley cligne
Modifié par Gil88 (30 Jul 2008 - 18:50)
Florent V. a écrit :
Arf, j'arrive pas à faire marcher le script non plus...
Effectivement l'auteur du site en question a placé une déclaration essentielle dans un autre fichier JS. Smiley rolleyes

Il suffit de rajouter au début de rollover.js
var D=document;
Merci beaucoup et chapeau Smiley clapclap Smiley clapclap Smiley clapclap

Je viens de rectifier et cela fonctionne...
mais juste 2 questions pourquoi faire du JS dans ces cas là car les rollovers ne peuvent plus fonctionner aussi si l'internaute lui prend l'envie de désactiver ou d'interdire Javascript dans les options du navigateur ? est-ce que si le script est en php fonctionne-t-il toujours malgré la désactivation dans les options ?

Edit : haaa à moins d'encapsuler du JS dans un include sous un fichier Php ...nan Smiley smile Smiley smile
Modifié par Gil88 (01 Aug 2008 - 16:07)
Gil88 a écrit :

Edit : haaa à moins d'encapsuler du JS dans un include sous un fichier Php ...nan Smiley smile Smiley smile

Nan Smiley langue ! PHP est un langage serveur (voir cet article) et est donc exécuté avant la génération du code html, css et Javascript qui est lui un langage client (exécuté au niveau du navigateur).

Du coup cela répond à ta deuxième question puisqu'on ne peut pas faire un script de rollover en PHP (tout se passe au niveau du navigateur et l'exécution du PHP est déjà terminée).

Sinon tu as raison : si le JS est désactivé le rollover ne fonctionnera pas. Mais tu es bien obligé de faire comme cela puisque contrairement au tuto dans lequel l'image est en background et est uniquement décorative, tu utilises des images qui contiennent une information (par exemple Accueil). Dans le premier cas, si les images sont désactivées tu as toujours le texte présent dans la page, dans le deuxième cas c'est le contenu du alt de l'image qui permettra de conserver l'information...

Pour faire des essais, je t'invite a utiliser Firefox avec l'extension webdeveloper.
Pages :