Salut salut, comme l'indique le titre, getElementById, ne fonctionne que pour une seule div, hors j'ai besoin de changer le fond de plusieurs div ayant l'id : haut_box, comment dois-je m'y prendre ?
Normalement un id est unique vous ne devriez pas avoir plusieurs div avec le même id. Je vous suggère d'utiliser plutôt l'attribut name pour faire ce que vous voulez. Ensuite en Javascript il faudra utiliser getElementsByTagName à la place.
function boxfunction(){
bla bla bla
}
function box2function(){
bla bla bla
}
window.onload = function(){
var divs = document.getElementsByTagName("div");
for(var i=0, len=divs.length;i < len; i++){
if(divs[i].className=="box"){boxfunction()}
else if(divs[i].className=="box2"){box2function()}
}
};
Je sais bien mais bon...
Ce que j'ai fait c'est que j'ai changé toutes mes div de <div id="haut_box"> </div> en <div id="haut_box" class="haut_box"> </div>
Et ensuite je fais un getElementsByClassName('haut_box') mais ça ne fonctionne toujours pas...
Une solution est donc de créer ta propre fonction getElementsByClassName() :
function getElementsByClassName(className)
{
//On récupère tous les éléments
var allElements = document.getElementsByTagName('*'),
returnElements = [];
//On parcourt donc tous les éléments
for(var i=0, l=allElements.length; i<l; i++)
{
//On récupère et parcourt les classes de l'élément parcouru
var classes = allElements[i].className.split(' ');
for(var j=0, l2=classes.length; j<l2; j++)
{
/* Si une des classes correspond à celle voulue,
on ajoute l'élément dans notre tableau à retourner */
if(className == classes[j])
{
returnElements.push(allElements[i]);
break;
}
}
}
return returnElements;
}
et je l'ai ensuite appelé avec getElementsByClassName('haut_box'), ça ne fonctionne pas, mes divs ayant la classe haut_box ne changent pas de background
onchange doit s'écrire tout en minuscules selon les recommandations (enfin il me semble, j'ai un doute tout d'un coup...)
Pas de javascript: ! C'est inutile, moche... Bref, c'est très très pas bien !
Si tu regardes bien, la fonction qu'on a construit "ensemble" est une simple fonction, elle n'appartient pas à document : il faut l'appeler comme une simple fonction du coup !
Visiblement, tu utilises une iframe, il faut donc modifier le code de "notre" fonction en conséquences.
Si tu regardes "notre" fonction (j'ose espérer que tu as essayé de la comprendre, j'ai essayé de la commenter au mieux !), tu vois qu'elle retourne un tableau. La façon dont tu utilises ce tableau n'est pas correcte.
Pour onChange, ça marche aussi bien avec la majuscule que sans...
J'ai enlevé javascript:
Oui biensûr j'ai essayé de la comprendre, j'en ai compris qu'à la base tu récupères "tout" ensuite en fonction du nombre de caractères de tout ce qui a été trouvé, tu fais le re-tri dans ce qui a été demandé par la fonction (className) pour ensuite afficher que ce que je demande à la fonction, sinon, ce qui m'a permis de comprendre c'est les for et l'incrémentation, le reste je comprend rien vu que mon domaine à moi c'est HTML/CSS, php/MySQL... Et que for et l'incrémentation, c'est aussi en php
Pour onChange, ça marche aussi bien avec la majuscule que sans...
Ce n'est pas parce que ça marche que c'est propre .
En ce qui concerne la fonction, en effet on récupère tous les éléments de la page. document.getElementsByTagName() renvoie une NodeList, mais on peut l'utiliser comme un simple tableau : allElements.length contient donc le total d'éléments trouvés.
for(vari=0,l=allElements.length;i<l;i++) permet donc de parcourir un à un chacun des éléments qu'on a récupérés, rien à voir avec des chaînes de caractères !
La propriété className d'un élément est une chaîne de caractères contenant, grosso modo, l'attribut class de l'élément en question.
En clair, pour <divclass="toto"/> la propriété className contiendra toto, pour <divclass="toto tata tutu"/> elle contiendra toto tata tutu.
D'où la nécessité d'utiliser la méthode split(). Celle-ci permet de transformer une chaîne de caractère en un tableau, donc les cases sont délimitées par le caractère passé en paramètre : dans notre fonction un espace.
Comme notre fonction doit récupérer les éléments qui ont la classe donnée, nous devons donc parcourir chacune des classes qu'on a récupérées. Si l'un d'elle correspond, on l'ajoute dans un tableau (avec la méthode push()). Un tableau est en effet nécessaire, car plusieurs éléments peuvent avoir la même classe, notre fonction doit donc pouvoir en retourner plusieurs !
Étant donné qu'on récupère un tableau en utilisant cette fonction, il faut le parcourir comme un tableau, avec un for, comme on l'a déjà fait deux fois à l'intérieur de notre fonction:
var elements = getElementsByClassName('haut_box');
for(var i=0, l=elements.length; i<l; i++)
{
//Tu fais ce que tu veux avec l'élément parcouru
elements[i].style.color='red';
}
Après, d'après ton exemple, tu utilises une iFrame, il te faudra donc remplacer la ligne :
Pour onChange, ça marche aussi bien avec la majuscule que sans...
Tu as raison ca marche mais selon le DOM on doit l'ecrire en minuscule. Il est toujours bien de prendre les bonnes habitudes...
KorHosik => Tu oublies de verifier dans ta fonction.
function getElementsByClassName(className,iframe)
{
//On récupère tous les éléments
var allElements = iframe ? iframe.document.getElementsByTagName('*') : document.getElementsByTagName('*'),
returnElements = [];
//On parcourt donc tous les éléments
for(var i=0, l=allElements.length; i<l; i++)
{
//si l'element HTML a une class
if(allElements[i].className!=null){
//On récupère et parcourt les classes de l'élément parcouru
var classes = allElements[i].className.split(' ');
for(var j=0, l2=classes.length; j<l2; j++)
{
/* Si une des classes correspond à celle voulue,
on ajoute l'élément dans notre tableau à retourner */
if(className == classes[j])
{
returnElements.push(allElements[i]);
break;
}
}
}
}
return returnElements;
}
J'ai rajouter le fait de recuperer tous les elements de l'iframe ou du document selon le choix de l'utilisateur.
Et j'ai verifier qu on a bien une class dans l'element HTML avant de rajouter la class au tableau.
function changebg(img,class){
//on recupere le 1er iframe de la page
var iframe = document.getElementsByTagName("iframe")[0];
//on utilise notre fonction pour recuperer un tableau de tous les elements contenant la class souhaiter
var classes = getElementsByClassgName(class,iframe);
//on modifie les elements recuperer dans le tableau
for(var i=0, len = classes.length; i < len; i++){
classes[i].style.backgroundImage=url(img);
}
}
J'ai essayé de comprendre les nouveaux codes, je les ai chargés dans <head>, ça fonctionne toujours pas... Je suis tout de même un peu perdu dans ces fonctions, c'est toujours aussi compliqué le JavaScript ? Ça me donne vraiment pas envi d'apprendre, pourtant il faudrait vraiment que je m'y mette parce que là ça me met dans des gallères...
C'est possible d'avoir les deux fonctions plus détaillés, comment les mettre dans la page...
Pourquoi Firefox 5 ne prend pas getElementsByClass, alors le créateur du JavaScript travaille chez Mozilla...
PS : J'ai un autre petit problème, je voudrais changer tout les href de mes liens à l'interieur de mon iframe, que tout les href soit : href="#", j'ai essayé ça dans la balise iframe :
Pour ton premier souci...
Dans un fichier javascript qui sera attacher au html dans le head a l'aide de la balise
<script type="text/javascript" src="/scripts/monjs.js" /></script>
Bien sur l'attribut src c'est a toi de mettre ton lien vers le fichier, ici ce n'est qu un exemple
function getElementsByClassName(className,iframe)
{
//On récupère tous les éléments
var allElements = iframe ? iframe.document.getElementsByTagName('*') : document.getElementsByTagName('*'),
returnElements = [];
//On parcourt donc tous les éléments
for(var i=0, l=allElements.length; i<l; i++)
{
//si l'element HTML a une class
if(allElements[i].className!=null){
//On récupère et parcourt les classes de l'élément parcouru
var classes = allElements[i].className.split(' ');
for(var j=0, l2=classes.length; j<l2; j++)
{
/* Si une des classes correspond à celle voulue,
on ajoute l'élément dans notre tableau à retourner */
if(className == classes[j])
{
returnElements.push(allElements[i]);
break;
}
}
}
}
return returnElements;
}
function changebg(img,class){
//on recupere le 1er iframe de la page
var iframe = document.getElementsByTagName("iframe")[0];
//on utilise notre fonction pour recuperer un tableau de tous les elements contenant la class souhaiter
var classes = getElementsByClassgName(class,iframe);
//on modifie les elements recuperer dans le tableau
for(var i=0, len = classes.length; i < len; i++){
classes[i].style.backgroundImage=url(img);
}
}
getElementsByTagName[0] correspond au premier lien
getElementsByTagName[1] correspond au deuxieme lien
getElementsByTagName[2] correspond au troisieme lien
il faut donc faire ue boucle pour modifier tes href:
var iframe = document.getElementById("iframePreview");
function changeHrefValue(value,iframe){
var a = iframe ? iframe.document.getElementsByTagName('a') : document.getElementsByTagName('a');
for(var i=0,len=a.length; i < len; i++){
a[i].href="#";
}
}
Il reste cependant navrant d'utiliser jQuery pour un simple problème de sélection par classes, qui peut se faire très bien en JavaScript pur comme on l'a vu plus haut...
C'est certes une solution, mais c'est comme utiliser un bazooka contre une mouche .
Rien ne fonctionne, j'ai tout essayé, il y avait même une erreur dans le script changeHrefvalue qui pointait sur l'id de l'iframe, hors l'iframe avait juste name="iframePreview"...
Qu'est-ce qu'on peut faire d'autre ? À moins que vous en ayez marre de m'aider, j'comprendrai...
Apres plusieurs debbugage une recherche de 10 secondes sur recuperation de l'iframe on a un script fonctionnel (testé crossbrowser!) Enveloppe de l'iframe:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns='http://www.w3.org/1999/xhtml'>
<head>
<title>Enveloppe de l'iframe</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<script type="text/javascript" src="scripts.js"></script>
</head>
<body onload="changeHrefValue('#','iframePreview')">
<p>Ci dessous un iframe:</p>
<iframe id="iframePreview" src="iframe.html" border="0" onmouseover="changebg('154756273.jpg','haut_box');changeCursor('crosshair','iframePreview')"></iframe>
</body>
</html>
Iframe test:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns='http://www.w3.org/1999/xhtml'>
<head>
<title>Iframe</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
</head>
<body>
<p class="haut_box">Ceci est <a href="http://www.google.com" title="Google">mon iframe</a></p>
<p>Dans cette page il y a des <a href="http://www.yahoo.com" title="Yahoo">liens</a></p>
<p class="haut_box">Ces <a href="http://www.walla.com" title="Walla">liens</a> sont des <a href="http://www.facebook.com" title="Facebook">liens</a> de test</p>
</body>
</html>
et le javascript qui va avec:
function changeCursor(cursorName,iframeID){
var iframe = iframeID ? document.getElementById(iframeID) : null;
iframe = iframe.contentWindow.document || iframe.contentDocument;
var body = iframe!=null ? iframe.body : document.body;
body.style.cursor=cursorName;
}
function changeHrefValue(value,iframeID){
var iframe = iframeID ? document.getElementById(iframeID) : null;
iframe = iframe.contentWindow.document || iframe.contentDocument;
var a = iframe!=null ? iframe.getElementsByTagName('a') : document.getElementsByTagName('a');
for(var i=0,len=a.length; i < len; i++){
a[i].href=value;
}
}
function getElementsByClassName(className,iframe)
{
//On récupère tous les éléments
var allElements = iframe ? iframe.getElementsByTagName('*') : document.getElementsByTagName('*'),
returnElements = [];
//On parcourt donc tous les éléments
for(var i=0, l=allElements.length; i<l; i++)
{
//si l'element HTML a une class
if(allElements[i].className!=null){
//On récupère et parcourt les classes de l'élément parcouru
var classes = allElements[i].className.split(' ');
for(var j=0, l2=classes.length; j<l2; j++)
{
/* Si une des classes correspond à celle voulue,
on ajoute l'élément dans notre tableau à retourner */
if(className == classes[j])
{
returnElements.push(allElements[i]);
break;
}
}
}
}
return returnElements;
}
function changebg(img,classe){
//on recupere le 1er iframe de la page
var iframe = document.getElementsByTagName("iframe")[0];
iframe = iframe.contentWindow.document || iframe.contentDocument;
//on utilise notre fonction pour recuperer un tableau de tous les elements contenant la class souhaiter
var classes = getElementsByClassName(classe,iframe);
//on modifie les elements recuperer dans le tableau
for(var i=0, len = classes.length; i < len; i++){
classes[i].style.backgroundImage="url("+img+")";
}
}
Je suis sur qu on peut mieux faire mais c'est un bon debut...
Le message qui suit est une réponse automatique activée par un membre de l'équipe de modération. Les réponses automatiques leur permettent d'éviter d'avoir à répéter de nombreuses fois la même chose, ce qui leur fait gagner du temps et leur permet de s'occuper des sujets qui méritent plus d'attention. Nous sommes néanmoins ouverts et si vous avez une question ou une remarque, n'hésitez pas à contacter la personne en question par Message Privé. Pour plus d'informations, nous vous invitons à lire les règles générales du forum
Avant de poster un message, vérifiez la date du sujet dans lequel vous comptiez intervenir.
Si le dernier message sur le sujet date de plus de deux mois, mieux vaut ne pas répondre. En effet, le déterrage d'un sujet nuit au bon fonctionnement du forum, et l'informatique pouvant grandement changer en quelques mois il n'est donc que rarement pertinent de déterrer un vieux sujet.
Au lieu de déterrer un sujet il est préférable :
soit de contacter directement le membre voulu par messagerie privée en cliquant sur son pseudonyme pour accéder à sa page profil, puis sur le lien "Ecrire un message"
soit de créer un nouveau sujet décrivant votre propre contexte
ne pas répondre à un déterrage et le signaler à la modération
Pas d'aide concernant le code par MP, le forum est là pour ça :)