[RESOLU] Texte vers une image

Bonjour,
vous allez peu être me prendre pour un idiot mais comment mettre une image genre image/puce.gif à la place de du > dans ce script ?
Je vois bien où il faut le placer mais je pense que ça doit être avec le document.createTextNode que ça cloche.

merci d'avance

<script type="text/javascript">
var listMenu = new FSMenu('listMenu', true, 'display', 'block', 'none');
listMenu.animations[listMenu.animations.length] = FSMenu.animFade;
listMenu.animations[listMenu.animations.length] = FSMenu.animSwipeDown;
var arrow = null;
if (document.createElement && document.documentElement)
{
 arrow = document.createElement('span');
 arrow.appendChild(document.createTextNode('>'));
 arrow.className = 'subind';
}
addEvent(window, 'load', new Function('listMenu.activateMenu("listMenuRoot", arrow)'));
</script>

Modifié par jiojio (13 Dec 2006 - 09:11)

Salut,

Tu peux par exemple mettre ton image en background CSS (soit sur le span soit au sein de la classe subind) vu que ça n'a aucune valeur en terme de contenu et supprimer cette ligne :

arrow.appendChild(document.createTextNode('>'));

Modifié par koala64 (11 Dec 2006 - 13:45)

Comme son nom l'indique, [createTextNode] est fait pour créer un noeud 'texte', donc tu ne pourras pas le transformer en 'image'.

Il te faut créer un nouvel élément via [createElement] qui sera l'image que tu veux, et qui sera ajouté en tant qu'enfant du noeud 'arrow'.
Après pour la liste des attributs de ton image, je n'ai plus ça en tête là de suite, mais tu peux les définir au choix dans ton script ou dans ta CSS (mis à part son 'href' bien sûr)…

ouep je crois bien qu'il faut passer par là.
Un ami m'a conseillé de faire comme ça mais je ne vois pas trop où mettre ce code...le javascript n'est pas mon fort malheureusement...

var monimage= document.createElement('img')
monimage.src="chemin/vers/image.gif"
arraow.appendChild(monimage)

jiojio a écrit :
Je ne vois pas trop où mettre ce code…

Tu remplaces simplement

arrow.appendChild(document.createTextNode('>'));

par

arrow.appendChild(monImage);

Et cela donne ceci au final pour la section qui te concerne :

var arrow = null;
[#Orange]var monImage = null;[/#] [#DimGrey]// déclaration de ta variable[/#]
if (document.createElement && document.documentElement)
  {
    arrow = document.createElement('span');[#DimGrey]
        // ici tu procèdes à la création de ton élément "<img … />"
        // et l'attributionde son 'lien'[/#][#Orange]
          monImage = document.createElement('img');
          monImage.src = "/chemin/vers/image.gif";[/#][#DimGrey]
        // et tu ajoute ton élément 'image' à l'élément 'span' créé auparavant[/#][#Orange]
        arrow.appendChild(monImage);[/#]
    arrow.className = 'subind';
  }

Attention, j'ai modifié le nom de ta variable 'monimage' en 'monImage' (juste par habitude et pour te prévenir…).

Sinon tu peux toujours regarder ce tuto http://css.alsacreations.com/Tutoriels-JavaScript/bonnes-pratiques-javascript, et bien entendu google est ton ami

Salut,

Christopher a écrit :

Comme son nom l'indique, [createTextNode] est fait pour créer un noeud 'texte', donc tu ne pourras pas le transformer en 'image'.

Tout à fait mais ce n'est pas ce dont je parlais.
Pourquoi créer une image qui s'insère dans le code HTML (cf code HTML généré par le code que tu proposes, Christopher) alors que cette image n'a rien à y faire ?
J'ai proposé de la mettre en background (CSS) du span... En quoi est-ce gênant ?
Pour accéder au span, on peut soit le faire directement si le span est unique ou si tous sont identiques, soit affecter une classe CSS (ici la classe 'subind') à ce span soit un id. La génération d'un élément image via JS n'a pas lieu d'être ici car cette image n'a pas de sens en terme de contenu... C'est uniquement visuel.

bon en tous les cas ça fonctionne et euh c'est tout ce que je demandais...Enfin je n'utilise pas trop le CSS pour mon site.

Merci

Certes... mais je trouve dommage de générer 4 lignes supplémentaires qui ne servent qu'à dégrader l'ensemble (vu que l'image ne devrait pas faire partie du contenu)...

Tu devrais t'y mettre à CSS; il y a tout ce qu'il faut ici... de bons tutos, de bonnes indications quant aux sources externes et surtout pas mal de monde pour t'aider en cas de difficulté.

La seule chose que tu avais à faire était de créer dans ton css une ligne de ce type :

span.subind { background: #FFF url(dossier/image.png) 0 0 no-repeat; }

Modifié par koala64 (12 Dec 2006 - 14:24)