Changer le ClassName d'une image avec son nom

Recherche :

Mot : Pseudo : Filtrer
Page : 1 2 Page Suivante Page Précédente Bas de page
Auteur	Sujet : Changer le ClassName d'une image avec son nom

darkkrab

Ce code change le ClassName de tous images avec pour nom "lui", mais il ne fonctionne pas sous Netscape/Mozilla, quelqu'un a une idée pour que ça fonctionne.

Code :

<style>
.bbo {border-color:green;}
</style>
<a href="a"><img class="bbo" src="red.gif" ></a>
<a href="a"><img name="lui" class="bbo" src="red.gif"></a>
<a href="a"><img name="lui" class="" src="red.gif" ></a>
<a href="a"><img name="lui" class="" src="red.gif" ></a>
<a href="a"><img name="lui" class="" src="red.gif" ></a>
<a href="a"><img class="" src="red.gif" ></a>
<script>
function imgbor(){
var agg = document.images('lui');
for(var i=agg.length-1; i>=0; --i)
if(agg[i].className.indexOf('') != -1) {
agg[i].className = 'bbo';
}
}
</script>
<a href="javascript:imgbor()">Test</a>

Publicité

gatsusat

déjà c'est pas name qu'on utilise mais ID

et ensuite en code ca donne ca :

var monimage = document.getElementById("lui" );
monimage.className = "Toto";

masklinn

í dag viðrar vel til loftárása

darkkrab a écrit :

Ce code change le ClassName de tous images avec pour nom "lui", mais il ne fonctionne pas sous Netscape/Mozilla, quelqu'un a une idée pour que ça fonctionne.

Code :

<style>
.bbo {border-color:green;}
</style>
<a href="a"><img class="bbo" src="red.gif" ></a>
<a href="a"><img name="lui" class="bbo" src="red.gif"></a>
<a href="a"><img name="lui" class="" src="red.gif" ></a>
<a href="a"><img name="lui" class="" src="red.gif" ></a>
<a href="a"><img name="lui" class="" src="red.gif" ></a>
<a href="a"><img class="" src="red.gif" ></a>
<script>
function imgbor(){
var agg = document.images('lui');
for(var i=agg.length-1; i>=0; --i)
if(agg[i].className.indexOf('') != -1) {
agg[i].className = 'bbo';
}
}
</script>
<a href="javascript:imgbor()">Test</a>

Name a été déprécié sur tous les éléments ne faisant pas partie d'un formulaire, il ne doit plus être utilisé en dehors de cette situation.
Son remplaçant est "id", mais un id doit être unique sur une page, deux éléments ne peuvent pas avoir le même id
J'ai du mal à voir l'intérêt du test de classe vide
Utiliser l'aggrégation (elm.className+=" myClass" ) plutôt que l'écrasement, afin de conserver les classes existantes (un élément donné peut avoir un nombre illimité de classes)
Utiliser indexOf pour déterminer la présence ou non d'une classe donnée, et replace() pour les transferts d'une classe à l'autre
Utiliser les notions d'ascendants/descendants du DOM pour faire ses sélections (par exemple si on a une liste de liens que l'on veut modifier, on peut commencer par sélectionner la liste globale et itérer sur ses enfants au lieu de sélectionner directement les enfants, ça fait moins de code plus stable)

---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody

darkkrab

On peut utiliser NAME ou ID pour une image. Et je ne peux pas simplement utilsier monimage.className = "Toto";, parce que je ne sais pas combien j'ai d'images ayant l'ID ou le NAME (La page est généré en php). Il me faux donc absolument un script qui change tout les images qui ont le même ID/NAME pour que ça fonctionne.

masklinn

í dag viðrar vel til loftárása

darkkrab a écrit :

On peut utiliser NAME [...] pour une image.

Il faut éviter, le HTML 4.01 "name" n'est présent que pour des raisons de compatibilité

Citation :

On peut utiliser ID pour une image.

Il est interdit d'avoir deux éléments avec le même id dans une page, toutes les images doivent donc avoir leur propre ID

Citation :

Et je ne peux pas simplement utilsier monimage.className = "Toto";, parce que je ne sais pas combien j'ai d'images ayant l'ID ou le NAME (La page est généré en php).
Il me faux donc absolument un script qui change tout les images qui ont le même ID/NAME pour que ça fonctionne.

Tu donnes des classes à tes images et tu sélectionnes uniquement les images ayant la classe recherchée pour faire tes traitements [:itm]

---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody

darkkrab

J'ai déjà utiliser le même id pour plusieurs éléments, avec une boucle c'est OK. Comment faire "Tu donnes des classes à tes images et tu sélectionnes uniquement les images ayant la classe recherchée pour faire tes traitements"? (Comment appeler une image?)

masklinn

í dag viðrar vel til loftárása

darkkrab a écrit :

J'ai déjà utiliser le même id pour plusieurs éléments, avec une boucle c'est OK.

Non, c'est pas ok, c'est illégal d'après la spec et ça donne un comportement indéfini, avec des conneries pareilles faut pas t'étonner si tu te retrouves avec des bugs plein ton code [:enzan]

Citation :

Comment faire "Tu donnes des classes à tes images et tu sélectionnes uniquement les images ayant la classe recherchée pour faire tes traitements"? (Comment appeler une image?)

[:pingouino]

var tesimagesdeboulet = document.getElementsByTagName('IMG');
for(var i=0; i<tesimagesdeboulet.length; ++i)
if(tesimagesdeboulet[i].className.indexOf("latumetstaclasseboulet" ) != -1) {
// Image avec la classe qui va bien
}

Message édité par masklinn le 13-09-2005 à 10:12:01

---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody

gatsusat

masklinn a écrit :

var tesimagesdeboulet = document.getElementsByTagName('IMG');

[:petrus75]

darkkrab

Les images n'ont pas tous un ClassName au chargement de la page. Cest pourquoi je doit utiliser un ID commun.

Et je ne peux pas utiliser ceci, ça modifie tout les images

Code :

<script>
function imgbor(){
var agg = document.getElementsByTagName('img');
for(var i=0; i<agg.length; ++i)
if(agg[i].className.indexOf("" ) != -1) {
agg[i].className = 'bbo';
}
}
</script>

La question est:
var agg = ?

gatsusat

ben tu apprends à coder

Publicité

darkkrab

Elle est bonne. :-)
Sérieux personne ne connaît un truc.

plainsofpain

Pingouino's lover

tu donnes la meme classe à toutes tes images [:petrus75]

---------------
http://www.alsacreations.com , http://www.openweb.eu.org. Mon CV : http://cv.roane-irkana.net/. Exemple à ne surtout pas suivre : www.worldinternet.be

darkkrab

Exemple: au début tout images sont vertes sauf une qui est jaune, l'utilisateur clique sur un bouton et la moitier des images vertes deviennent bleus. Et je voudrais quavec un autre bouton touts les images redeviennent vertes sauf la jaune qui reste jaune.

Il me faux vraiment un ID commun pour rassembler tous les images qui sont vertes.

gatsusat

on t'a déjà dis qu'un ID c'est unique dans une page puisque la commande getElementById ne renvoi qu'un seul objet au lieu d'un tableau de références

darkkrab

Je sais (je ne débatterai pas), mais comment regrouper un goupe d'images?

xtof_83

Freeride Spirit

ben tu essais de petites combine, fais marcher ton cerveau..

tu nommes tes id comme cela : image1, image2....
les images de 0 à x sont premier groupe...etc

Faut un peu réfléchir man

darkkrab

J'y avait pensé mais je ne sais pas d'avance le nombre d'images que je vais avoir de chaque couleur au chargement de la page. Et je me demandais surtout s'il n'y avait pas une autre syntaxe pour ma variable 'agg' pour que ce sois compatible avec les autres navigateurs.

FlorentG

darkkrab a écrit :

Tout ça se fait avec des classes... L'attribut class permet justement de donner un certain sens à des éléments, afin par exemple de leur donner un style, ou de leur donner un certain comportement via JS, etc.

masklinn

í dag viðrar vel til loftárása

gatsusat a écrit :

[:petrus75]

[:mlc]

Ptin j'en ai marre [:sisicaivrai]
Même le matin chuis pas réveillé

darkkrab a écrit :

Les images n'ont pas tous un ClassName au chargement de la page.

T'as qu'à en mettre une [:mlc]

Citation :

Cest pourquoi je doit utiliser un ID commun.

C'est
in
ter
dit

interdit
pas autorisé
pas droit
mal
bouh
berk

DEUX ELEMENTS D'UNE MÊME PAGE NE PEUVENT PAS PORTER LE MÊME ID

---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody

darkkrab

Dans l'exemple vert égale pas de class. Mais le problème c'est qu'il y a d'autres images sans class. Je sais qu'il y a quand même un moyen, mais le vrai problème va survenir quand tous les images vont se voir octroyer la même class, il n'y aura plus moyen de les différencier.

darkkrab

J'ai une question pour masklinn.

Je sais que tu a raison pour les ID, mais je cherche un moyen. Et au fait il est ou le problème avec NAME?

souk

Tourist

tu peux leur attribuer plusieurs classes hein si tu veux [:petrus75]

xtof_83

Freeride Spirit

Moi je dis ton affaire est mal ficelé, bosse un peu plus et trouve quelque chose de plus concordant...

gatsusat

Code :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<style>
.verte {
background:green;
}
.jaune{
background:yellow;
}
.bleue{
background:blue;
}
</style>
<script>
function QQBleus() {
var MesImages = document.getElementById("mesimages" ).getElementsByTagName("IMG" );
for (var i=0; i<MesImages.length-1;i++){
if (MesImages[i].getAttribute("bleu","false" )=="possible" )
MesImages[i].className = "bleue";
}
}
function TousVerts() {
var MesImages = document.getElementById("mesimages" ).getElementsByTagName("IMG" );
for (var i=0; i<MesImages.length-1;i++){
if (MesImages[i].className.toLowerCase().indexOf("jaune" )==-1)
MesImages[i].className = "verte";
}
}
</script>
</head>
<body>
<div id="mesimages">
<a href="a"><img class="verte" src="red.gif" ></a>
<a href="a"><img name="lui" class="verte" src="red.gif" bleu="possible"></a>
<a href="a"><img name="lui" class="verte" src="red.gif" bleu="possible"></a>
<a href="a"><img name="lui" class="verte" src="red.gif" bleu="possible"></a>
<a href="a"><img name="lui" class="verte" src="red.gif" ></a>
<a href="a"><img class="jaune" src="red.gif" ></a>
</div>
<form>
<input type="button" value="Quelques Bleus" onclick="QQBleus()">
<input type="button" value="Tous Vert" onclick="TousVerts()">
</form>
</body>
</html>

c'est pas parfait hein ! mais c'est juste pour montrer au monsieur ce qu'on peut faire de nos jours

masklinn

í dag viðrar vel til loftárása

darkkrab a écrit :

J'ai une question pour masklinn.

Je sais que tu a raison pour les ID, mais je cherche un moyen. Et au fait il est ou le problème avec NAME?

Parce que "name" a été déprécié sur les images ça veut dire qu'on est plus censés l'utiliser [:spamafote]

Je vois pas trop ce que t'as contre les classes [:petrus75]

---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody

darkkrab

La dernière image ne change pas.

Code :

<style>
.bbo {border-color:green;}
</style>
<a href="a"><img class="bbo" src="red.gif" ></a>
<a href="a"><img class="bbo" src="red.gif" bleu="possible"></a>
<a href="a"><img class="" src="red.gif" bleu="possible"></a>
<a href="a"><img class="" src="red.gif" bleu="possible"></a>
<a href="a"><img class="" src="red.gif"></a>
<a href="a"><img class="" src="red.gif" bleu="possible"></a>
<script>
function imgbor() {
var agg = document.getElementsByTagName("img" );
for (var i=0; i<agg.length-1;i++){
if (agg[i].getAttribute("bleu","false" )=="possible" )
agg[i].className = "bbo";
}
}
</script>
<a href="javascript:imgbor()">Test</a>

darkkrab

Mon acienne boucle fontionne.
Merci Gatsusat pour le getAttribute.

Et j'ai rien contre les classes.

gm_superstar

Appelez-moi Super

Pour récupérer tous les éléments qui ont une même classe :

http://www.dylanschiemann.com/blog [...] 0306041638
http://www.glazman.org/weblog/newa [...] #s95287073

---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog

gatsusat

var agg = document.getElementsByTagName("img" ); <=== c'est pas en MAJUSCULE que IMG doit etre ?

je crois car sinon ca foire tout

FlorentG

gatsusat a écrit :

var agg = document.getElementsByTagName("img" ); <=== c'est pas en MAJUSCULE que IMG doit etre ?

je crois car sinon ca foire tout

Ca dépend si t'es en HTML ou en XHTML, non ? [:johneh]

gatsusat

/me is going to do some tests

FlorentG

Oublie pas avec des pages XHTML d'utiliser les deux types MIME possibles

gatsusat

Code :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<script>
window.onload = function(){
var mesA = document.getElementsByTagName("a" );
alert(mesA.length);
}
</script>
</head>
<body>
<a href="toto">pouet</a>
<a href="toto">prout</a>
</body>
</html>

avec ce code HTML
sous IE
a minuscule : Ca marche
A majuscule : ca marche
sous FF
a minuscule : Ca marche
A majuscule : ca marche

Code :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>
</title>
<script type="text/javascript">
//<![CDATA[
window.onload = function(){
var mesA = document.getElementsByTagName("a" );
alert(mesA.length);
}
//]]>
</script>
</head>
<body>
<a href="toto">pouet</a> <a href="toto">prout</a>
</body>
</html>

avec ce code en XHTML
sous IE
a minuscule : Ca marche
A majuscule : ca marche
sous FF
a minuscule : Ca marche
A majuscule : ca marche

Message édité par gatsusat le 13-09-2005 à 10:56:46

gatsusat

FlorentG a écrit :

Oublie pas avec des pages XHTML d'utiliser les deux types MIME possibles

types Mime ??? hu ??

can you explain more for me please Mister FlorentG

edit: c'est bon j'ai pigé : type text/html ou type text/xml, tu peux faire le test pour moi, sur les deux types mimes ??? je suis au taf et j'ai po d'apache ni php sous la main

ma fonction renvoi 2 si c'est bon et 0 si c'est faut (avec un alert bourrin)

Message édité par gatsusat le 13-09-2005 à 10:59:16

FlorentG

Ca marche quelque soit la casse du A

masklinn

í dag viðrar vel til loftárása

FlorentG a écrit :

Ca dépend si t'es en HTML ou en XHTML, non ? [:johneh]

en application/xhtml+xml c'est impérativement en minuscules, en text/html il est plus prudent de le mettre en majuscules (IE, entre autres, a parfois des comportements bizarres)

---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody

FlorentG

masklinn a écrit :

en application/xhtml+xml c'est impérativement en minuscules

Alors ce con de FireFox fait n'importe quoi [:johneh]

masklinn

í dag viðrar vel til loftárása

[:petrus dei]

---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody

xtof_83

Freeride Spirit

FlorentG a écrit :

Alors ce con de FireFox fait n'importe quoi [:johneh]

:non: Euh là tu sort... :hello:

FlorentG

masklinn a écrit :

[:petrus dei]

Ca fonctionne bien : [:johneh]

<?php
header('Content-Type: application/xhtml+xml; charset=utf-8');
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript">
//<![CDATA[
window.onload = function(){
var mesA = document.getElementsByTagName("A" );
alert(mesA.length);
}
//]]>
</script>
</head>
<body>
<a href="toto">pouet</a> <a href="toto">prout</a>
</body>
</html>

Publicité

Page : 1 2

Page Suivante

Page Précédente

Haut de page

FORUM HardWare.fr

Programmation

HTML/CSS

Changer le ClassName d'une image avec son nom

Sujets relatifs
empêcher le chargement d'une image dans le cache du navigateur	Envoyer des paramètres à une image ?
cadre et image	[résolu] Changement d'image lors d'un clic
Lire un fichier image en java	Changer l'affichage d'une page lorsqu'un utilisateur se loggue
"traitement" d'image	[aide] popup image javascript ?!
ACCESS insérer une image dans un formulaire	Changer une page HTML après un temps donné
Plus de sujets relatifs à : Changer le ClassName d'une image avec son nom

Page générée en 0.146 secondes