begin process at 2012 05 28 23:45:56
  Trouver un code source :
 
dans
 
Accueil > Forum > 

Javascript / DHTML / Ajax

 > 

CSS

 > 

Général

 > 

Cellule cliquable


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

Cellule cliquable

samedi 24 mars 2007 à 19:09:02 | Cellule cliquable

magicsmacks

Bonjour,

Voilà pour des onglets j'utilise un script à partir de cellule cliquable.
Au survol de la souris je demandais à changer la couleur de fond de la cellule tout marchait nickel. Voici une partie de mon code :
document.write((menuhz?"":"<tr>")+"<td width=\""+taille1+"\" background=\""+image1+"\"></td><TD background=\""+image2+"\" ALIGN=center onMouseDown='location.href=\""+menuLink[pass]+"\"' onMouseOver='this.style.background=\""+bgcolor2+"\"' onMouseOut='this.style.background=\""+bgcolor+"\"'><FONT SIZE=2 FACE=Verdana><B>"+menuTexte[pass]+"</B></FONT></TD><td width=\""+taille2+"\" background=\""+image3+"\"></td>")
Maintenant pour faire évoluer un peu mon site j'ai voulu faire cela avec des images à la place de couleur d'arrière plan,
J'ai donc modifié une partie du code par :
onMouseOver='this.style.background.src=\"menu/onglet2.jpg\"'
Le problème est que maintenant il n'y a plus de réaction au passage de la souris.
J'ai bien vérifié que mon image était bien à l'emplacement spécifié...
Pouvez-vous m'aider svp?
Merci d'avance

MAGICSMACKS[:p]
samedi 24 mars 2007 à 21:45:05 | Re : Cellule cliquable

stfou

Membre Club
Bonsoir
Le problème vient du css, background.src n'existe pas, tu dois faire : background="url(menu\/onglet2.jpg)"


Stfou
samedi 24 mars 2007 à 21:58:07 | Re : Cellule cliquable

magicsmacks

Merci beaucoup Stfou ca marche nickel !
Est-il possible de spécifier une autre cellule d'un tableau ? C'est à dire quand on survole une cellule que ce soit une autre cellule qui change d'apparence?
Merci d'avance

MAGICSMACKS[:p]
samedi 24 mars 2007 à 21:59:13 | Re : Cellule cliquable

magicsmacks

Je suppose que c'est this.style qu'il faut que je modifie mais je ne sais pas par quoi le remplacer.
Merci d'avance

MAGICSMACKS[:p]
samedi 24 mars 2007 à 22:22:35 | Re : Cellule cliquable

stfou

Membre Club
Bonsoir, tu dois mettre un id sur tes cellules :
<td id="cellule1"> par exemple.
ensuite quand une cellule est survolée, tu fais <td onmouseover="select('cellule1')" on mouseout="unselect('cellule1')">
<script>
function select(id)
{
document.getElementById(id).style.background="url(fichier.bmp)";
}

function unselect(id)
{
document.getElementById(id).style.background="url(fichier2.bmp)";

<script>


mnu.bmpstefou.bmp

Stfou
samedi 24 mars 2007 à 23:27:18 | Re : Cellule cliquable

magicsmacks

merci beaucoup STFOU

MAGICSMACKS[:p]
dimanche 25 mars 2007 à 14:51:57 | Re : Cellule cliquable

magicsmacks

Bonjour,

Suite aux conseils de STFOU j'ai adpaté mes codes.
En fait il s'agit d'un code visant à rendre cliquable des onglets se trouvant dans un tableau. Chaque onglet est composé de 3 cellules.
En fait le problème est que j'aimerais qu'au survol de la souris les 3 cellules changent d'apparence en même temps.
J'ai donc appliqué les conseils de STFOU mais je pense avoir commis une erreur de syntaxe que je ne retrouve pas.
Quelqu'un pourrait-il m'aider svp?
Merci Voici mon code :
for(pass=0;pass<menuTexte.length;pass+=1)
document.write((menuhz?"":"<tr>")+"<td id=\"cellule1["+pass+"]\" width=\""+taille1+"\" background=\""+image1+"\"></td><TD id=\"cellule2["+pass+"]\" background=\""+image2+"\" ALIGN=center onMouseDown='location.href=\""+menuLink[pass]+"\"' onmouseover='select(\""+pass+"\")' on mouseout='unselect(\""+pass+"\")' ><FONT SIZE=2 FACE=Verdana><B>"+menuTexte[pass]+"</B></FONT></TD><td id=\"cellule3["+pass+"]\" width=\""+taille2+"\" background=\""+image3+"\"></td>")

document.write('</tr></TABLE></TD></TR></TABLE>')
</SCRIPT><SCRIPT>
function select(id)
{
document.getElementById(cellule1["+id+"]).style.background="url(menu\/onglet2.jpg)";
document.getElementById(cellule2["+id+"]).style.background="url(menu\/onglet2.jpg)";
document.getElementById(cellule3["+id+"]).style.background="url(menu\/onglet2.jpg)";
}

function unselect(id)
{
document.getElementById(cellule1["+id+"]).style.background="+bgcolor+";
document.getElementById(cellule2["+id+"]).style.background="+bgcolor+";
document.getElementById(cellule3["+id+"]).style.background="+bgcolor+";
}
</SCRIPT>
Le menu s'affiche bien les images cliquables mais je n'ai aucune réponse des cellules.
Merci de votre aide

MAGICSMACKS[:p]
dimanche 25 mars 2007 à 16:57:53 | Re : Cellule cliquable

stfou

Membre Club
Bonjour.

1.>Ce n'est pas cellule1["+id+"], mais cellule1[id];

2.>Ce n'est pas "+bgcolor+", mais bgcolor tout court.

3.>Plutot que d'echapper chaque guillemet, commence par  '   au lieu de   "  . ainsi tu aura beaucoup moins de caractères a échapper.

4.>Ou sont les accolades dans la boucle for ?

5.>J'espère que tu as défini plus haut les variables menuTexte, cellule1, cellule2, cellule3 en tant que Tableau, et que tu as défini la variable bgcolor en tant que chaine de caractère au format : "black" ou "rgb(0,0,0)";

Bonne chance.


mnu.bmpstefou.bmp
Stfou
dimanche 25 mars 2007 à 17:32:00 | Re : Cellule cliquable

magicsmacks

Merci STOUF mais doit y avoir un autre truc qui cloche :
J'ai modifié pour le 1 et pour le 2
J'ai rajouté les accolades
Voici mon code entier, pour le 5 je pense que c'est bon au niveau des définitions.
Je ne comprends pas pourquoi ca ne marche toujours pas...
<SCRIPT>
menuTexte=new Array();
menuLink=new Array();
menuTexte[0]= 'Composition du bureau';
menuLink[0]= 'juniors.php';
menuTexte[1]= 'Informations';
menuLink[1]= 'infos.php';
menuhz  = 1          //1:menu horizontal  0:menu vertical
bgcolor ='white';  //Couleur arrière
bgcolor2='#969696';  //Couleur arrière surbrillance
bgcolor3='white';  //Couleur bordure
bgcolor4='#ffffff';  //Couleur texte
image1 ='menu/gauche.jpg';
image2 ='menu/onglet.jpg';
image3 ='menu/droite.JPG';
image4 ='menu/onglet2.jpg';
largeur = 760
hauteur = 18
i       = 0
taille1= 3
taille2= 4
cellule1=new Array();
cellule2=new Array();
cellule3=new Array();
document.write('<style>');
document.write('.ejsmenu {color:'+bgcolor4+'; cursor:hand;}') //default
document.write('</style>')
document.write('<TABLE bgcolor=white BORDER=0 CELLPADDING=0 CELLSPACING=0 WIDTH='+(menuhz?largeur:largeur) +' HEIGHT='+hauteur+'><TR><TD><TABLE CELLPADING=0 CELLSPACING=0 BORDER=0 WIDTH=100% HEIGHT=100%>'+(menuhz?'<tr>':''))

for(pass=0;pass<menuTexte.length;pass+=1) {
document.write((menuhz?"":"<tr>")+"<td id=\"cellule1["+pass+"]\" width=\""+taille1+"\" background=\""+image1+"\"></td><TD id=\"cellule2["+pass+"]\" background=\""+image2+"\" ALIGN=center onMouseDown='location.href=\""+menuLink[pass]+"\"' onmouseover='select("+pass+")' on mouseout='unselect("+pass+")' ><FONT SIZE=2 FACE=Verdana><B>"+menuTexte[pass]+"</B></FONT></TD><td id=\"cellule3["+pass+"]\" width=\""+taille2+"\" background=\""+image3+"\"></td>")
}
document.write('</tr></TABLE></TD></TR></TABLE>')
</SCRIPT><SCRIPT>
function select(id)
{
document.getElementById(cellule1[id]).style.background=url("onglet2.jpg");
document.getElementById(cellule2[id]).style.background=url("onglet2.jpg");
document.getElementById(cellule3[id]).style.background=url("onglet2.jpg");
}

function unselect(id)
{
document.getElementById(cellule1[id]).style.background="bgcolor";
document.getElementById(cellule2[id]).style.background="bgcolor";
document.getElementById(cellule3[id]).style.background="bgcolor";
}
</SCRIPT>

Merci de ta patience STOUF

MAGICSMACKS[:p]
dimanche 25 mars 2007 à 17:48:13 | Re : Cellule cliquable

stfou

Membre Club
Réponse acceptée !
menuTexte=new Array();
menuLink=new Array();
menuTexte[0]= 'Composition du bureau';
menuLink[0]= 'juniors.php';
menuTexte[1]= 'Informations';
menuLink[1]= 'infos.php';
menuhz  = 1          //1:menu horizontal  0:menu vertical
bgcolor ='white';  //Couleur arrière
bgcolor2='#969696';  //Couleur arrière surbrillance
bgcolor3='white';  //Couleur bordure
bgcolor4='#ffffff';  //Couleur texte
image1 ='menu/gauche.jpg';
image2 ='menu/onglet.jpg';
image3 ='menu/droite.JPG';
image4 ='menu/onglet2.jpg';
largeur = 760
hauteur = 18
i = 0
taille1= 3
taille2= 4
cellule1=new Array();
cellule2=new Array();
cellule3=new Array();
document.write('<style>');
document.write('.ejsmenu {color:'+bgcolor4+'; cursor:hand;}') //default
document.write('</style>')
document.write('<TABLE bgcolor=white BORDER=0 CELLPADDING=0 CELLSPACING=0 WIDTH='+(menuhz?largeur:largeur) +' HEIGHT='+hauteur+'><TR><TD><TABLE CELLPADING=0 CELLSPACING=0 BORDER=0 WIDTH=100% HEIGHT=100%>'+(menuhz?'<tr>':''))

for(pass=0;pass<menuTexte.length;pass+=1) {
document.write((menuhz?"":"<tr>")+"<td id=\"cellule1["+pass+"]\" width=\""+taille1+"\" background=\""+image1+"\"></td><TD id=\"cellule2["+pass+"]\" background=\""+image2+"\" ALIGN=center onMouseDown='location.href=\""+menuLink[pass]+"\"' onmouseover='select("+pass+")' on mouseout='unselect("+pass+")' ><FONT SIZE=2 FACE=Verdana><B>"+menuTexte[pass]+"</B></FONT></TD><td id=\"cellule3["+pass+"]\" width=\""+taille2+"\" background=\""+image3+"\"></td>")
}
document.write('</tr></TABLE></TD></TR></TABLE>')
</SCRIPT><SCRIPT>
function select(id)
{
document.getElementById("cellule1["+id+"]").style.background="url(onglet2.jpg)";
document.getElementById("cellule2["+id+"]").style.background="url(onglet2.jpg)";
document.getElementById("cellule3["+id+"]").style.background="url(onglet2.jpg)";
}

function unselect(id)
{
document.getElementById("cellule1["+id+"]").style.background=bgcolor;
document.getElementById("cellule2["+id+"]").style.background=bgcolor;
document.getElementById("cellule3["+id+"]").style.background=bgcolor;
}



mnu.bmpstefou.bmp
Stfou

1 2

Cette discussion est classée dans : couleur, cellule, souris, partie, cliquable


Répondre à ce message

Sujets en rapport avec ce message

changer de couleur la cellule quand la souris vient et part [ par Stephane ] salut a tousvoila je connais pas trop javascript, alors je me sert des sources qu'il y a, mais y a un truc qu'il n'y est pas :Comment peut on changer Java / Changement de couleur d'un texte au survol d'une cellule [ par mogui2004 ] Bonjour à tous,voilà, je débute en programmation, et après recherches sur le forum, je n'ai pas trouvé mon bonheur... Je cherche à changer la couleur couleur du texte d'une cellule ou la couleur du fond d'une cellule d'une table [ par rabdane ] J'aimerais avoir un javascript qui change la couleur du texte d'une cellule ou la couleur du fond d'une cellule d'une table appelé TABLE1.cette table Changement de couleur d'une colonne au passage de la souris [ par Ma2004 ] Hello à tous !Ma question est la suivante:Comment fait on pour changer simplement la couleur d'un (dans un tableau donc) lorsque la souris passe dess Cellule change couleur onMouseOver ... [ par Hector78 ] Hello !J'ai un problème concernant la mise en forme conditionnelle de tableaux, en javascript.Je voudrais réaliser un tableau me permettant de mettre Couleur d'une cellule d'un tableau html [ par ypothier ] Est-ce que quelqu'un pourrai m'aider. J'ai un tableau HTML bien simple. Mais j'aimerai être capable de modifier la class à laquel il appartient dans u Texte changeant de couleur lors du survol souris [ par abdonabil ] bonjour,je veux un petit script qui permetra de changer la couleur d'un texte lors du survol du pointeur , sachant que ce texte est un lien.merci d'av couleur cellule varie selon valeurs texte [ par jpdeion ] Bonour,voila je débute, dans un tableau html avec des données textes (nombres importées avec ASP ou PHP (je sais déjà faire cette partie)...je voudrai detection couleur [ par dockblue ] bonjour voila mon probleme dans une page web j'insere des graphiques ( des courbes mathematiques) au format jpg, est il possible en passant la souris Clic et changement de couleur cellule [ par guiguimac ] bonjour,j'airemai que la cellule d'un tableau HTML change de couleur lorsque je clic dessus ...merci de votre aide !guiguimac


Nos sponsors


Sondage...

Comparez les prix

CalendriCode

Mai 2012
LMMJVSD
 123456
78910111213
14151617181920
21222324252627
28293031   

Consulter la suite du CalendriCode

Photothèque

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 : 1,669 sec (3)

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