Script greasemonkey [Résolu]

Bonjour,

Est-ce que greasemonkey est vraiment la meilleure solution pour ça?
Je pense que le plug-in stylish est plus adapté pour ce genre de modification.

Il est justement prévu pour modifier les styles des sites visités, permettant de redéfinir tout le css. donc pour modifier une image c'est facile ^^

salut, je pensait prendre greasemonkey, car la plupart des script que j'ai réaliser sont pour greasemonkey,
je fait tout sa pour le site du jeu, donc tout les utilisateurs ne voudrons surement pas télécharger stylish, mais préfèrerais avoir le script directement sur greasemonkey.

petit up

J'ai vu que les style stylish peuvent être aussi télécharger pour greasemonkey, mais alors comment je fait pour modifier les images, (enlever les images du site pour en mettre des personnalisé) ?

Voici un exemple de style pour stylish:

@-moz-document domain(nomdedomaine.fr) {
    /* On cache l'image à changer */
    .conteneur img{ visibility:none!important;}
    .conteneur {
        /* On redéfinit la taille du conteneur de l'image selon l'image à afficher */
        width:100px!important;
        height:75px!important;
        /* On affiche l'image voulue en fond du conteneur de l'image */
        background-image:no-repeat url(http://www.adressedelimage.fr/image.jpg)!important;
    }
}

Sinon avec greasemonkey je ne l'ai jamais fait mais changer l'attribut src de l'image avec DOM doit être assez rapide à faire aussi.

petit UP merci tout de même m@dien.

Bon ben je me suis penché sur greasemonkey.

Il te manquait pas grand chose:

var origine, nouvelle;

origine = document.getElementsByTagName('img');
for (var i = 0; i< origine.length; i++) {
nouvelle = origine[i];
if(nouvelle.getAttribute('src') =='http://www.red-conquest.fr/game/images/map/map_centre.png')
nouvelle.setAttribute('src','http://warchipe.free.fr/map_centre.png');
}

Ce code là fonctionne chez moi.

merci ! et si j'en ai plusieurs sur la page a modifier ? Ca devient plus compliquer ?

Il suffit de mettre un if différent pour chaque image:

var origine, nouvelle;

origine = document.getElementsByTagName('img');
for (var i = 0; i< origine.length; i++) {
   nouvelle = origine[i];
   if(nouvelle.getAttribute('src') =='http://www.red-conquest.fr/game/images/map/map_centre.png')
        nouvelle.setAttribute('src','http://warchipe.free.fr/map_centre.png');
   if(nouvelle.getAttribute('src') =='image2.jpg')
        nouvelle.setAttribute('src','uneAutreImage.png');
   if(nouvelle.getAttribute('src') =='image3.jpg')
        nouvelle.setAttribute('src','uneTroisiemeImage.png');
   ...
}

bonjour, je ne sait pas si c'est moi, mais ca ne marche pas :(
dans cette ligne :

if(nouvelle.getAttribute('src') =='http://www.red-conquest.fr/game/images/map/map_centre.png')


Il faut que je mette l'url de l'image ou simplement le "nom" l'image ? j'ai essayer les deux ca ne marche pas.

Pour que ça fonctionne, il faut que l'url soit EXACTEMENT la même que celle qui a été entrée sur le site.
Donc pour ne pas se tromper, sur la page à modifier, fait [clic droit]->[code source de la page], et copie ce qui est dans l'attribut 'src' de la balise 'img'.

Je pense fortement, à la vue du site, que l'url doit être de la forme 'images/map/map_centre.png­'

Comme je n'ai pas de compte je ne peux pas voir la fameuse image en question.

Bonjour, et encore merci de prendre du temps pour m'aider.
Voici ou j'en suis :

// ==UserScript==
// @name           ImgRempl
// @namespace      *
// @description    remplace les images par des nouvelles
// @include        http://www.red-conquest.com/*
// @include        http://www.red-conquest.fr/*
// ==/UserScript==

var origine, nouvelle;

origine = document.getElementsByTagName('img');
for (var i = 0; i< origine.length; i++) {
   nouvelle = origine[i];
   if(nouvelle.getAttribute('src') =='images/map/map_centre.png')
        nouvelle.setAttribute('src','http://warchipe.free.fr/map_centre.png');
   if(nouvelle.getAttribute('src') =='images/map/map_armurerie.png')
        nouvelle.setAttribute('src','http://warchipe.free.fr/map_armurerie.png');
   if(nouvelle.getAttribute('src') =='images/map/map_avant_poste.png')
        nouvelle.setAttribute('src','http://warchipe.free.fr/map_avant_poste.png');
   if(nouvelle.getAttribute('src') =='images/map/map_avant_poste2.png')
        nouvelle.setAttribute('src','http://warchipe.free.fr/map_avant_poste2.png');
   if(nouvelle.getAttribute('src') =='images/map/map_hangar.png')
        nouvelle.setAttribute('src','http://warchipe.free.fr/map_hangar.png');
}

c'est bien comme ceci ?
ça ne marche encore pas :( pourtant c'est bien comme ceci que les liens sont dans le code source !

exemple :

<div id="centre" style="height: 55px; width: 36px; position: absolute; z-index: 5; left: 330px; top: 176px; background-image: url(images/map/map_centre.png);"></div>

C'est peut être par ce que c'est en "background" ??? et non en "src" ?

Tout à fait.
Une balise <img> n'est pas traitée de la même manière que la propriété background d'une balise.

Du coup ça va être beaucoup plus difficile.
le code va paraître plus simple mais pour changer toutes les images ça va être compliqué.

Pour changer une image il faut la ligne de code:

document.getElementById('centre').style.background = "url(http://warchipe.free.fr/map_centre.png)";

Ca paraît simple comme ça mais:
le getElementBiId('centre') va chercher la balise ayant l'ID centre. dans ton cas c'est le div qui nous intéresse.

Pour les autres images, il faut chercher l'ID de la balise qui porte la propriété background.
Essaye avec cette méthode.

Si certaines balises n'ont pas d'ID (ce que je redoute), fait le moi savoir.

sa va être simplement :

(exemple) :

// ==UserScript==
// @name           ImgRempl
// @namespace      *
// @description    remplace les image par de nouvelle
// @include        http://www.red-conquest.com/*
// @include        http://www.red-conquest.fr/*
// ==/UserScript==

document.getElementById('centre').style.background = "url(http://warchipe.free.fr/map_centre.png)";
document.getElementById('hangar').style.background = "url(http://warchipe.free.fr/map_hangar.png)";

etc ....

????

Oui, si la balise qui a comme fond l'image du hangar a l'id id="hangar". sans ça, ça ne marchera pas.

Comme je l'ai dit plus tôt, le document.getElementById('hangar') va chercher la balise ayant l'ID id="hangar".
La suite, .style.background = "url(http://warchipe.free.fr/map_centre.png)";, ne fait qu'attribuer un nouveau background à l'objet.

La difficulté est donc de trouver la balise.
Soit par getElementById(), soit par une autre méthode plus complexe.
Tellement complexe que je ne peux pas te l'expliquer simplement, ça reviendrait à écrire un tuto pour chercher une node avec DOM en javascript, à coups de getElementsByTagName et de ruse...

ca marche mais il y a des souci. en fait quand on arrive sur le jeux, une fois connecter l'url est:

http://red-conquest.fr/game ou http://red-conquest.fr/game/
la, mais images marchent :D
mais quand on clique ailleurs, et que on revient a l'acceuil, l'url devient :
http://red-conquest.fr/game/#

et la mes images n'apparaissent pas ...
je l'ai bien préciser pourtant voici mon code :

// ==UserScript==
// @name           ImgRempl
// @namespace      *
// @description    remplace les images par des nouvelles !
// @include        http://www.red-conquest.com/*
// @include        http://www.red-conquest.com/game/*
// @include        http://www.red-conquest.com/game/#
// @include        http://www.red-conquest.fr/*
// @include        http://www.red-conquest.fr/game/*
// @include        http://www.red-conquest.fr/game/#
// ==/UserScript==

document.getElementById('centre').style.background = "url(http://warchipe.free.fr/map_centre.png)";
document.getElementById('hangar').style.background = "url(http://warchipe.free.fr/map_hangar.png)";
document.getElementById('garage').style.background = "url(http://warchipe.free.fr/map_garage.png)";
document.getElementById('poste_de_garde').style.background = "url(http://warchipe.free.fr/map_avant_poste3.png)";
document.getElementById('gymnase').style.background = "url(http://warchipe.free.fr/map_garage.png)";
document.getElementById('infirmerie').style.background = "url(http://warchipe.free.fr/map_avant_poste.png)";
document.getElementById('dortoir').style.background = "url(http://warchipe.free.fr/map_garage.png)";
document.getElementById('armurerie').style.background = "url(http://warchipe.free.fr/map_armurerie.png)";
document.getElementById('raffinerie').style.background = "url(http://warchipe.free.fr/map_raffinerie.png)";
document.getElementById('electrique').style.background = "url(http://warchipe.free.fr/map_elec.png)";
document.getElementById('usine').style.background = "url(http://warchipe.free.fr/map_usine.png)";
document.getElementById('recherche').style.background = "url(http://warchipe.free.fr/map_recherche.png)";
document.getElementById('permission').style.background = "url(http://warchipe.free.fr/fleche.png)";

J'ai essayer plusieurs choses ...

Vérifie sur les page où ça ne marche pas que les blocs ont bien les même ID.

Je pense que ce n'est pas une erreur de javascript mais un mauvais paramétrage de greasemonkey.
Essaye d'inclure les adresses en *red-conquest.fr*, ça évitera peut-être des problèmes de "www." existant ou pas.

et sur les pages où ça ne marche pas, fait un [clic droit]->[informations sur la page] pour avoir l'adresse exacte de la page, pour voir si ça correspond bien à l'un de tes schéma d'adresse.
S'il n'y a pas [informations sur la page], fait [clic droit]->[ce cadre]->[information sur ce cadre], si jamais le site utilise des iframes.

A ce niveau je ne peux plus faire grand chose, il faut bidouiller pour trouver le bon schéma d'adresse pour greasemonkey

Les bloc on les même ID, et dans le parametrage de greasemonkey, j'ai utiliser ceci en lien :

// ==UserScript== 
// @name           ImgRempl 
// @namespace      By WafWaf |Y.M 2009 
// @description    remplace les images par des nouvelles ! 
// @author         WafWaf,
// @include        http://www.red-conquest.com/* 
// @include        http://www.red-conquest.com/game/* 
// @include        http://www.red-conquest.com/game/# 
// @include        http://www.red-conquest.fr/* 
// @include        http://www.red-conquest.fr/game/* 
// @include        http://www.red-conquest.fr/game/# 
// @include        http://red-conquest.com/* 
// @include        http://red-conquest.com/game/* 
// @include        http://red-conquest.com/game/# 
// @include        http://red-conquest.fr/* 
// @include        http://red-conquest.fr/game/* 
// @include        http://red-conquest.fr/game/# 
// ==/UserScript==

quand je suis sur :
http://www.red-conquest.fr/game/ (donc a l'accueil quand je me connecte), sa marche, et ensuit quand il y a le : # ( http://www.red-conquest.fr/game/# ) ca ne marche plus.

j'ai également essayer :

// ==UserScript== 
// @name           ImgRempl 
// @namespace      By WafWaf |Y.M 2009 
// @description    remplace les images par des nouvelles ! 
// @author         WafWaf, 
// @include        [http://]*.red-conquest.*/game/* 

// ==/UserScript==

Bon j'ai fini par m'inscrire pour voir ce que ça donnait.

le fait est que ça marche bien... la première fois.
La faute à l'Ajax!
et là dessus je suis pas assez calé en javascript et évènements pour pouvoir trouver une solution facile pour régler le problème.

http://www.red-conquest.fr/* suffit à ce que ça marche sur tout le site. mais attention à bien le rentrer dans "gérer les styles"

Le problème vient du fait que le code ne se déclenche qu'au chargement de la page.
Et ajax ne rachaichit qu'une partie, donc le code n'est pas relancé après. ce n'est pas le '#' qui pose problème.