Problème javascript rollover et tabover

Résolu/Fermé

Tracker42 Messages postés 75 Date d'inscription vendredi 13 juin 2008 Statut Membre Dernière intervention 26 février 2021 - 1 oct. 2008 à 20:07
DelepY - 3 oct. 2008 à 13:06

Bonjour,
J'ai un petit souci sur un script. Je veux créer un tableau comportant une image et dessous deux mots différents dans deux cases différentes avec une fonction de rollover faisant changer l'image du dessus (chaque mot entraînant l'apparition d'une image différente), jusque là, tout va bien.
Je veux que le texte change aussi, donc une fonction de tabover, le fond de la case et le texte changeant de couleur lorsque l'on passe dessus, là aussi tout va bien.
Mais c'est de mettre l'ensemble des deux qui ne va plus...la fonction tabover ne marche pas et je n'arrive pas à savoir d'où celà provient.

Voici le code:
<HEAD>

<SCRIPT LANGUAGE="JavaScript">
function rollover_tjs(nvo,site par richard)

function load() {if (document.images) {this.length=load.arguments.length;for (var i=0;i<this.length;i++)
{this[i+1]=new Image(); this[i+1].src=load.arguments[i];}
}
function preload() {var temp=new load("nvo3.central.jpg","nvo3.droite.jpg","nvo3.gauche.jpg")}

preload()

</SCRIPT>

<STYLE>
.tabnormal{background-color:black; color:#CCCCFF; font-weight:bold}
.tabover{background-color:black; color:#FFFFFF; font-weight:bold}
</STYLE>
</HEAD>

<BODY>

<center>

<TABLE border=0 cellpadding=3 cellspacing=0 style="border-width:0px;border-style:solid;border-color:black">
<<TH COLSPAN=3 class="tabnormal" onmouseover="this.className='tabover'" onmouseout="this.className='tabnormal'">
<IMG id=nvo name=nvo src="nvo3.central.jpg"></TR>

<TR>
<TD width=200>
<A href="#" onmouseover="rollover_tjs('nvo','nvo3.gauche.jpg')"
onmouseout="rollover_tjs('nvo','nvo3.central.jpg')"><class="tabnormal"
onmouseover="this.className='tabover'" onmouseout="this.className='tabnormal'">Décoration intérieure</A></TD

<TD width=200
<A href="#" onmouseover="rollover_tjs('nvo','nvo3.droite.jpg')"
onmouseout="rollover_tjs('nvo','nvo3.central.jpg')">Conseil en image</A></TD></TR><BR>

</TD>

</TR>
</TABLE>
</BODY>

Merci de l'aide

A voir également:

Problème javascript rollover et tabover
Telecharger javascript - Télécharger - Langages
Javascript void 0 c'est quoi ✓ - Forum Réseaux sociaux
Javascript echo ✓ - Forum PHP
Nombre aléatoire entre 1 et 100 javascript ✓ - Forum Javascript
Exercice calculatrice en javascript ✓ - Forum Javascript

8 réponses

Réponse 1 / 8

DelepY
2 oct. 2008 à 21:21

voilà une page qui marche...

<HTML>
 <HEAD>
   <TITLE>
     d&eacute;coration int&eacute;rieure lyon - home relooking
     - personal relooking - home staging
   </TITLE>
   <SCRIPT LANGUAGE="JavaScript">
	
	//cache toutes les images "nov3" sauf celle demander
	function afficherNVO3(nomNVO3)
	{	var images= document.images;
		for(var i=0; i<images.length; i++)
		{	var img= images[i].src.split('/').slice(-1)[0].split('.');
			if(img[0]=='nvo3')
			{	if(img[1]==nomNVO3)
					images[i].className= '';
				else
					images[i].className= 'invisible';
			}
		}
	}
	
	//ouvre le lien contenu dessous l'appelant de cette methode
	function suivreLien(tag)
	{	var a= tag.getElementsByTagName('A')[0];
		location= a.href
	}
   </SCRIPT>
   
   <STYLE>
	/* les liens ont leurs propre style, donc il faut aussi les modifier...*/
	.tabnormal, .tabnormal A
	{	background-color:black;
		color:#CCCCFF;
		font-weight:bold
	}
	.tabover, .tabover A
	{	background-color:red;
		color:blue;
		font-weight:bold
	}
	.invisible
	{	visibility:hidden;
		position:absolute;
		top:0; left:0;
	}
   </STYLE>
   
 </HEAD>


 <META http-equiv=Page-Enter content=revealTrans(Duration=2.0,Transition=2)>
 <META http-equiv=Site-Enter content=revealTrans(Duration=1.0,Transition=3)>
 <META http-equiv=Site-Exit content=revealTrans(Duration=1.0,Transition=3)>

 <BODY bgProperties=fixed bgColor= "#FFFFFF" background="Fond versus style.JPG">
   
   <IMG ALIGN=left valign=middle SRC="VSSV2.gif" alt="Versus style,.">
   
   <BR><BR><BR><BR><BR>
   <center>
     <FONT FACE="neuropol" SIZE='5' COLOR="red">
       Tableau avec modification de l'image en passant sur le texte
     </FONT>
     <center>	
       <TABLE border=0 cellpadding=3 cellspacing=0
           style="border-width:2px;border-style:solid;border-color:yellow"
        >
         <TR>
           <TH COLSPAN=3>
             <!-- cette méthode de rollover change l'image plus rapidement que la tienne.. -->
             <IMG src="http://permisbateauauvergne.com/nvo3.central.jpg">
             <IMG src="http://permisbateauauvergne.com/nvo3.gauche.jpg" class="invisible">
             <IMG src="http://permisbateauauvergne.com/nvo3.droite.jpg" class="invisible">
           </TH>
         </TR>
         <TR>
           <TD width=415 align=center class="tabnormal"
               onmouseover="afficherNVO3('gauche'); this.className='tabover'"
               onmouseout="afficherNVO3('central'); this.className='tabnormal'"
               onclick="suivreLien(this)"
            >
             <A href="#">
               D&eacute;coration int&eacute;rieure
             </A>
           </TD>
           <TD width=415 align=center class="tabnormal"
               onmouseover="afficherNVO3('droite'); this.className='tabover'""
               onmouseout="afficherNVO3('central'); this.className='tabnormal'""
               onclick="suivreLien(this)"
            >
             <A href="#">
               Conseil en image
             </A>
           </TD>
         </TR>
       </TABLE>
     </center>
  </BODY>
</HTML>

Réponse 2 / 8

DelepY
1 oct. 2008 à 22:54

c'est la 1er fois que je vois une page HTML qui n'est pas à fond javascript sur le rellover (comme DreamWeaver), et pas à font CSS2 (<style>:hover</style> pas compatible sur tous les naviguateurs d'avant!!)

par contre, la méthode "rollover_tjs" n'as pas de définition !! sa serais l'équivalant d'un rellover fait en javascript?

il manque la moiter des caractères dans ton code !!
(je cherche où s'ouvre le 1er <TR>.. surement avant le <TH> !!?)
essaye de suivre la norme XHTML...

je ne connait pas la balise <class= > !!?
il te manque des fermetures de guillemet !!

utilise

sur CCM pour garder la forme du text original

j'ai toujours repérer 1 petit temps de retard sur le getElementById('nvo').src=(new Image()).src
c'est sur qu'une affectation direct getElementById('img1').src='url' est plus lente..
moi, j'utilise le style='visibility:hidden', qui par un script, je le passe en 'visible'.. c'est le plus rapide que j'ai vu..
(selon la config du navigateur, il ne vas pas revoir l'entête* de l'image pour voir si elle à était modifié)

sur ton code,
ta 1ere Cellule(TH) fait changer l'Image
ta 2nds Cellule(TD) fait changer l'Image du TH(lien1), ou le texte "Décoration intérieure"(lien2)
ta 3ème Cellule(TD) dait changer l'Image du TH

et toi, tu veux changer l'Image (du TH) et le lien que tu pointe ?
onmouseover=" rollover_tjs('nvo','nvo3.gauche.jpg'); this.className='tabover' "

ou autre chose que je n'ai pas compris !

Réponse 3 / 8

DelepY
2 oct. 2008 à 18:45

comme je voulais le dire : essaye de mettre ton code dans les balise <_code_> <_/code_> (sans les underscores "_")

tu as écrie <TABLE ...><<TH ..><IMG ...></TR><TR>...
IE auto-corrige ton code.. mais certain navigateur planterons...
essaye plutôt : <table ...><TR><th ..><img ...></TH></tr><tr>...

c'est quoi un tabover ? c'est quoi que tu veux changé ?
§0:"Je veux que le texte change aussi,"
§2:"faire changer l'arborescence du texte"

Tracker42 Messages postés 75 Date d'inscription vendredi 13 juin 2008 Statut Membre Dernière intervention 26 février 2021 4
2 oct. 2008 à 18:52

Tu comprendras mieux en allant sur la page créée à cette adresse: http://permisbateauauvergne.com/deco.html
Tu verras le code source, ce que donne le tabover et ce que je veux au final...

Réponse 4 / 8

DelepY
2 oct. 2008 à 18:54

je vois le problème sur ta page :
en fait, tu veux l'addition des 2 effets.. sa doit étre simple..

1- le mousover des cellules d'en bas doit :
- changer l'image (nvo)
- changer le font de la cellule actuel (this)
(- mais garder le lien intacts (1er table))

2- un mouseout des cellules d'en bas doit
- remettre l'image par défaut (nvo)
- remettre le font de la cellule actuel(this) transparent

3- le clic sur le lien ouvre la page suivante
(et pourquoi pas un clic sur la cellule aussi ?)

j'y revient... (avec du code..)

Tracker42 Messages postés 75 Date d'inscription vendredi 13 juin 2008 Statut Membre Dernière intervention 26 février 2021 4
2 oct. 2008 à 19:01

exactement. Comme quoi un schéma vaut mieux qu'un long discours....

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

Posez votre question

Réponse 5 / 8

DelepY
2 oct. 2008 à 21:56

je vais te montrer un extrait de code horrible (le tien)

j'ai rajouter de la tabulation et des commentaire..

...
     <FONT FACE="Neuropol" SIZE='-1' COLOR="#CCCCFF">
       <center>	
         
         <TABLE border=0 cellpadding=3 cellspacing=0
             style="border-width:2px;border-style:solid;border-color:yellow"
          >
             <TH COLSPAN=3>   <!-- tu n'as pas ouvert le TR -->
               <IMG id=nvo name=nvo src="nvo3.central.jpg">
           </TR>   <!-- tu n'as pas fermer le TH -->
           <TR>
             <TD width=415 align=center>
               <A href="#"
                   onmouseover="rollover_tjs('nvo','nvo3.gauche.jpg')"
                   onmouseout="rollover_tjs('nvo','nvo3.central.jpg')"
                >
                 D&eacute;coration int&eacute;rieure
               </A>
             </TD>
         <BR><BR> <!-- sa ce met dans un TD ou hors de TABLE -->
         
             <TD width=415 align=center>
               <A href="#"
                   onmouseover="rollover_tjs('nvo','nvo3.droite.jpg')"
                   onmouseout="rollover_tjs('nvo','nvo3.central.jpg')"
                >
                 Conseil en image
               </A>
             </TD>
           </TR>
         <BR> <!-- sa ce met dans un TD ou hors de TABLE -->
     
     </FONT> <!-- tu n'as pas encore fermer TABLE et CENTER -->
             </TD>   <!-- déjà fait -->
           </TR>   <!-- déjà fait -->
         </TABLE>
         </TABLE>   <!-- déjà fait -->
       <!-- c'est là que tu doit fermer CENTER puis FONT.. -->
     <BR><BR><BR><BR><BR>
     <FONT FACE="neuropol" SIZE='5' COLOR="red">
...

t'utilise quoi pour faire ces pages !!?

info:
TR= TableRow = les ligne du tableau
TH= TableHead = les entête du tableau (= cellule de données avec mise en forme plus importante)
TD= TableData = les cellules du tableau (contenant les données)

Réponse 6 / 8

DelepY
3 oct. 2008 à 13:06

moi aussi j'ai tout appris en autodidacte...

HTML:<html>; CSS:<style>; JavaScript:<script>; PHP:<?php ?>; VBS:(wscript); HTA:<html>; ...

http://www.delepy.fr.st ... (ce n'est pas pour le design, mais pour le code...)
une petite note html, suit le lien "pages voilà" (en bas de page), il y a la liste des balises...

par contre, ne confont pas JavaScript et Java :
le Java (de Sun) est un autre langage de programmation :
où l'on peut faire des applications(window) ou des applets(internet client) ou même des servlets(internet server) ...
(..comme l'ASP dotNET de microsoft..)

pour le Java, j'ai préféré faire une formation AFPA...

Réponse 7 / 8

Tracker42 Messages postés 75 Date d'inscription vendredi 13 juin 2008 Statut Membre Dernière intervention 26 février 2021 4
2 oct. 2008 à 17:42

En fait je fais fréquemment des pages html mêlant les différents langages sans qu'ils soient exclusifs...

C'est bizarre qu'il manque des guillemets tout marche bien comme j'expliquais quand je veux soit faire changer l'image, soit faire changer l'arborescence du texte. C'est juste lorsque je veux faire les deux à la fois que ça ne va pas.

---------------------------------------------------------------------------------------
! !
! !
! IMAGE NVO !
! !
! !
! !
---------------------------------------------------------------------------------------
! ! !
! Décoration intérieure ! Conseil en Image !
! ! !
---------------------------------------------------------------------------------------

Par ce qu'un dessin vaut parfois mieux qu'un long discours: je vais te mettre une page en ligne, c'est plus simple avec les deux types d'images séparées et une regroupée, tu verras mon problème.

http://permisbateauauvergne.com/deco.html

Réponse 8 / 8

Tracker42 Messages postés 75 Date d'inscription vendredi 13 juin 2008 Statut Membre Dernière intervention 26 février 2021 4
3 oct. 2008 à 11:33

Oh je t'aime toi!! lol merci beaucoup je vais tenter de comprendre...tenter j'ai dit.

En fait je suis un pur néophyte, je ne connais rien à rien et j'essaie d'apprendre sur le tas donc cela ne m'étonne pas que mon code soit horrible... si tu m'avais dit que c'était un chez d'oeuvre, je ne t'aurais pas cru de toute façon...lol
Je n'utilise aucun logiciel style dreamweaver ou autre, je crée mes pages sur le notepad de windows, et je vois ce que ça donne. C'est en me baladant sur internet que je regarde les codes sources pour comprendre l'architecture html d'un site.
L'inconvénient: c'est chiant.
L'avantage: quand un site déconne, je sais d'où ça vient contrairement à d'autres qui utilisent DW...

J'achète des bouquins aussi pour comprendre le langage java mais je t'avoue que j'ai un peu de mal...à la base je suis juriste, pas informaticien.

J'essaie de dépanner une copine qui monte sa boîte en lui créant son site, perso au début, elle verra après pour en créer un pro. Je te mettrai les liens du site définitif, tu verras si je suis bon élève comme ça ;)

Pourrais-je éventuellement t'embêter encore si j'ai d'autres soucis? je suis en train de créer un autre site pour moi cette fois, plus chiant encore...c'est un genre de test en ligne où les gens doivent répondre, juste de préférence et là j'ai un pb pour créer un système qui corrige...enfin je t'expliquerai ça.

Encore merci!!!! ;D

Discussions similaires

Javascript Arrondi à 2 chiffres après la virgule

java script error in the main process

afficher un tableau JS en HTML

Nodejs.exe est-ce un virus

[Javascript] Tables de Multiplication

Discussions similaires

Newsletters