begin process at 2012 05 29 14:06:37
  Trouver un code source :
 
dans
 
Accueil > Forum > 

Javascript / DHTML / Ajax

 > 

JavaScript et le navigateur

 > 

Autre

 > 

Javascript et image


Derniers messages déposésPoser une question dans le forum ou lancer une discussion

Javascript et image

samedi 5 février 2011 à 12:08:44 | Javascript et image

Sinsitrus

Bonjour,

J'ai ce bout de code et je voudrais remplace les + et - par des images :

Code Javascript :
function toggle(obj) {
var sibling=(obj.nextSibling.nodeType==3)? obj.nextSibling.nextSibling : obj.nextSibling;
if(sibling.style.display=='' || sibling.style.display=='block') {
sibling.style.display='none'; obj.firstChild.firstChild.data="+";}
else {sibling.style.display='block'; obj.firstChild.firstChild.data='-';}}
function initCollapse() {var oDT=document.getElementById('content').getElementsByTagName('dt');
for (var i=0; i < oDT.length; i++){
oDT[i].onclick=function() {toggle(this)};
var oSpan=document.createElement('span');
var sign=document.createTextNode("+");
oSpan.appendChild(sign);
oDT[i].insertBefore(oSpan, oDT[i].firstChild);
oSpan.style.fontFamily='monospace';
oSpan.style.paddingRight='0.5em';
oDT[i].style.cursor='pointer';
toggle(oDT[i]);}
oDT=null;}
window.onload=function() {if(document.getElementById && document.createElement) {initCollapse();}}


Sur ce code :
Code Javascript :
sibling.style.display='none'; obj.firstChild.firstChild.data="+";}


Puis ce code :
Code Javascript :
else {sibling.style.display='block'; obj.firstChild.firstChild.data='-';}}


Pouvez-vous m'aider svp ?

Merci

----------
OS : Windows XP SP3 et Vista 32
Platforme : VB 6.0 + SP6
Ok VB6.0 c'est pas net !
samedi 5 février 2011 à 12:38:59 | Re : Javascript et image

kazma

Administrateur CodeS-SourceS
j'ai modifier le code les signes plus et moins on ete remplace par des image que j'ai nome plus.jpg et moins.jpg essai pour voir

Code Javascript :

function toggle(obj) {

var sibling=(obj.nextSibling.nodeType==3)? obj.nextSibling.nextSibling : obj.nextSibling;
if(sibling.style.display=='' || sibling.style.display=='block') {
sibling.style.display='none'; obj.firstChild.firstChild.src="plus.jpg";}
else {sibling.style.display='block'; obj.firstChild.firstChild.src='moins.jpg';}}


function initCollapse() {

var oDT=document.getElementById('content').getElementsByTagName('dt');
for (var i=0; i < oDT.length; i++){
oDT[i].onclick=function() {toggle(this)};
var oImage=document.createElement('img');
oImg.src='plus.jpg';
oDT[i].insertBefore(oImg, oDT[i].firstChild);
oDT[i].style.cursor='pointer';
toggle(oDT[i]);}
oDT=null;}
window.onload=function() {if(document.getElementById && document.createElement) {initCollapse();}}
samedi 5 février 2011 à 12:48:55 | Re : Javascript et image

Sinsitrus

Merci Kazma pour ta réponse rapide mais non ça ne fonctionne pas.
Le menu n'est plus rétractable et l'image ne se voit pas... :s
samedi 5 février 2011 à 15:04:40 | Re : Javascript et image

kazma

Administrateur CodeS-SourceS
il y avait une erreur essai de nouveau

[code=js]function toggle(obj) {

var sibling=(obj.nextSibling.nodeType==3)? obj.nextSibling.nextSibling : obj.nextSibling;
if(sibling.style.display=='' || sibling.style.display=='block') {
sibling.style.display='none'; obj.firstChild.firstChild.src='plus.jpg';}
else {sibling.style.display='block'; obj.firstChild.firstChild.src='moins.jpg';}}


function initCollapse() {

var oDT=document.getElementById('content').getElementsByTagName('dt');
for (var i=0; i < oDT.length; i++){
oDT[i].onclick=function() {toggle(this)};
var oImg=document.createElement('img');
oImg.src='plus.jpg';
oDT[i].insertBefore(oImg, oDT[i].firstChild);
oDT[i].style.cursor='pointer';
toggle(oDT[i]);}
oDT=null;}
window.onload=initCollapse;
samedi 5 février 2011 à 15:23:06 | Re : Javascript et image

Sinsitrus

Il affiche la première image, lorsque je clique dessus la même image reste et non pas le moins.png
Ensuite sur les 3 titres que j'ai, seul le premier affiche l'image et est rétracté, par contre les 2 autres sont détracté et aucune image ne s'affiche...

Merci pour ton aide
samedi 5 février 2011 à 18:22:40 | Re : Javascript et image

kazma

Administrateur CodeS-SourceS
Réponse acceptée !
c'est peut etre a cause des firstchild et du fait qu'il s'agisse d'une image et plus d'un span il a un firstchild en trop

retire les parties en bleue

function toggle(obj) {

var sibling=(obj.nextSibling.nodeType==3)? obj.nextSibling.nextSibling : obj.nextSibling;
if(sibling.style.display=='' || sibling.style.display=='block') {
sibling.style.display='none'; obj.firstChild.firstChild.src='plus.jpg';}
else {sibling.style.display='block'; obj.firstChild.firstChild.src='moins.jpg';}}


samedi 5 février 2011 à 19:23:09 | Re : Javascript et image

Sinsitrus

Merci infiniment Kazma, ça fonctionne bien que l'image est un peux décalée vers le haut... va falloir remédier à cela sinon ça ne sera pas esthétique...
peux t-on arranger ca dans le même code stp ?
dimanche 6 février 2011 à 18:01:26 | Re : Javascript et image

kazma

Administrateur CodeS-SourceS
pour modifier la position je pense que en rajoutant des marge sa etre devrait bon pour sa il faudra rajouter des lignes dans la fonction initcollapse dans la fonction j'ai mis 10px pour l'exemple c'est donc a regle selon les besoins


function initCollapse() {

var oDT=document.getElementById('content').getElementsByTagName('dt');
for (var i=0; i < oDT.length; i++){
oDT[i].onclick=function() {toggle(this)};
var oImg=document.createElement('img');
oImg.src='plus.jpg';
oImg.style.marginTop='10px';
oDT[i].insertBefore(oImg, oDT[i].firstChild);
oDT[i].style.cursor='pointer';
toggle(oDT[i]);}
oDT=null;}



Cette discussion est classée dans : code, style, obj, firstchild, odt


Répondre à ce message

Sujets en rapport avec ce message

Changer un style [ par initnocsib ] Bonjour,Je suis sûr que je fais une erreur énorme mais... je trouve pas.Le code ci-dessous ne fonctionne qu'à moitié :Le mouseover passe le texte en r afficher un text [ par tonyjim ] Bonjour à tous ;) désolé si je ne post pas à la bonne place [^^choc] voila, j'utilise une fonction javascript pour faire afficher un text sur click Liste de Formulaire sans Bouton "Submit" [ par yank76 ] Bonjour, Je suis en train de travailler sur un style switcher à base de php. Pour le moment j'ai remplacé le bouton "submit" par une image ... Ce que Objet.style.top me retourne 0 [ par tibob51 ] Bonjour,Je suis débutant en java (je galère pas mal même), et sur ce morceaux de code je n'arrive pas a comprendre pourquoi ma ariable posi est égale onclick desactiver la fonction onemouseover [ par demnatis ] Bonjour a tous,je n'ai trouvé rien de precis concernant le script que je souhaite réaliser: ni sur ce site, ni sur google.Je cherche a desactiver la f rollvover sur img [ par gesualda ] Bonjour à tous,j'ai testé ce code pour faire un rollover sur une image ..Tous fonctionne jusqu'au block4, et ensuite il ne donne aucune erreur, mais n Changer feuille de style selon navigateur [ par hugo7 ] Bonjour à tous cela fait 2-3 jours que je cherche une solution à cette question :Comment changer la feuille de style au chargement de la page en fonct Code Javascript ne fonctionnant pas sur IE [ par flashdumpf ] Bonjour, je suis débutant en JavaScript et j'ai récemment réalisé le script suivant. Seulement je constate qu'il ne fonctionne que sous Firefox, d'où lien affichant texte et supprime le précédent s'il y a(Javascript) [ par vincenzodelarossa ] Bonjour à tous. Petit soucis dans mes conditions mon script est: function Swap( div_){ var Obj = document.getElementById( div_); if( Obj) getElementById problème (style) [ par arbilus ] Bonjour, pouvez-vous m'expliquer pourquoi cela ne fonctionne pas (l'iframe n'est pas à 1px ) : [code=js] function h1(){ document.getElementById('


Nos sponsors


Sondage...

CalendriCode

Mai 2012
LMMJVSD
 123456
78910111213
14151617181920
21222324252627
28293031   

Consulter la suite du CalendriCode

A découvrir



 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils.
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 0,780 sec (3)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales