Sujet Précédent Sujet Suivant

Cellule cliquable

Résolu
magicsmacks Messages postés 128 Date d'inscription mercredi 21 mai 2003 Statut Membre Dernière intervention 8 avril 2008 - 24 mars 2007 à 19:09
stfou Messages postés 450 Date d'inscription samedi 16 avril 2005 Statut Membre Dernière intervention 18 avril 2007 - 25 mars 2007 à 19:25
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+""'> "+menuTexte[pass]+" </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]

11 réponses

Réponse 1 / 11
stfou Messages postés 450 Date d'inscription samedi 16 avril 2005 Statut Membre Dernière intervention 18 avril 2007 3
25 mars 2007 à 17:48
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 CELLPADING=0 CELLSPACING=0 BORDER=0 WIDTH=100% HEIGHT=100%>'+(menuhz?'----
':''))

for(pass=0;pass<menuTexte.length;pass+=1) {
document.write((menuhz?"":"----
")+", </td>"+menuTexte[pass]+", , \")
}
document.write('
</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;
}

<hr /><hr />
Stfou
3
Réponse 2 / 11
stfou Messages postés 450 Date d'inscription samedi 16 avril 2005 Statut Membre Dernière intervention 18 avril 2007 3
24 mars 2007 à 21:45
Bonsoir
Le problème vient du css, background.src n'existe pas, tu dois faire : background="url(menu\/onglet2.jpg)"

<hr />
Stfou
0
Réponse 3 / 11
magicsmacks Messages postés 128 Date d'inscription mercredi 21 mai 2003 Statut Membre Dernière intervention 8 avril 2008
24 mars 2007 à 21:58
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]
0
Réponse 4 / 11
magicsmacks Messages postés 128 Date d'inscription mercredi 21 mai 2003 Statut Membre Dernière intervention 8 avril 2008
24 mars 2007 à 21:59
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]
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 11
stfou Messages postés 450 Date d'inscription samedi 16 avril 2005 Statut Membre Dernière intervention 18 avril 2007 3
24 mars 2007 à 22:22
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>

<hr />
<hr />
Stfou
<hr />
0
Réponse 6 / 11
magicsmacks Messages postés 128 Date d'inscription mercredi 21 mai 2003 Statut Membre Dernière intervention 8 avril 2008
24 mars 2007 à 23:27
merci beaucoup STFOU

MAGICSMACKS[:p]
0
Réponse 7 / 11
magicsmacks Messages postés 128 Date d'inscription mercredi 21 mai 2003 Statut Membre Dernière intervention 8 avril 2008
25 mars 2007 à 14:51
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+"")'
> "+menuTexte[pass]+" </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]
0
Réponse 8 / 11
stfou Messages postés 450 Date d'inscription samedi 16 avril 2005 Statut Membre Dernière intervention 18 avril 2007 3
25 mars 2007 à 16:57
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.

<hr /><hr />
Stfou
<hr />
0
Réponse 9 / 11
magicsmacks Messages postés 128 Date d'inscription mercredi 21 mai 2003 Statut Membre Dernière intervention 8 avril 2008
25 mars 2007 à 17:32
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 CELLPADING=0
CELLSPACING=0 BORDER=0 WIDTH=100%
HEIGHT=100%>'+(menuhz?'----
':''))

for(pass=0;pass<menuTexte.length;pass+=1) {

document.write((menuhz?"":"----
")+", </td>"+menuTexte[pass]+", , \")

}

document.write('
</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]
0
Réponse 10 / 11
magicsmacks Messages postés 128 Date d'inscription mercredi 21 mai 2003 Statut Membre Dernière intervention 8 avril 2008
25 mars 2007 à 19:21
Merci infiniment STFOU ca marche super !

MAGICSMACKS[:p]
0
Réponse 11 / 11
stfou Messages postés 450 Date d'inscription samedi 16 avril 2005 Statut Membre Dernière intervention 18 avril 2007 3
25 mars 2007 à 19:25
Derien

<hr /><hr />
Stfou
0

Discussions similaires

un bouton cliquable qu'une fois
cs_minibus -
bibi_81 -

3 réponses
zone cliquable
lucibat -
mzelleflash -

1 réponse
Calendrier cliquable
Broadcaster -
souhayla12 -

2 réponses
Zone Cliquable
Dylan42300 -
jack -

1 réponse
Couleur de fond d'une cellule excel
lorre0041 -
isophie -

7 réponses
Rejoignez-nous