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
DelepY - 3 oct. 2008 à 13:06
A voir également:
- Problème javascript rollover et tabover
- Telecharger javascript - Télécharger - Langages
- Node.js javascript runtime virus ✓ - Forum Virus
- Javascript echo ✓ - Forum PHP
- Erreur #125 javascript - Forum Mozilla Firefox
- Nombre aléatoire entre 1 et 100 javascript ✓ - Forum Javascript
8 réponses
voilà une page qui marche...
<HTML>
<HEAD>
<TITLE>
décoration inté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écoration inté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>
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 !
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 !
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"
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
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...
Tu verras le code source, ce que donne le tabover et ce que je veux au final...
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..)
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
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
je vais te montrer un extrait de code horrible (le tien)
j'ai rajouter de la tabulation et des commentaire..
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)
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écoration inté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)
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...
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...
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
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
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
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
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
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
