11548 sujets

JavaScript, DOM et API Web HTML5

Comment mixer ces 2 codes : rollover defilant

Bonjour apres 2jours de recherche j'ai enfin trouvé ce que je voulais comme rollover mais je voudrais y modifier 2choses

_ A la place de la phrase Ta phrase Ici qui saffiche en premier, je voudrais que ce soit direct la 1ere image (precision je vais passer le truc en php ensuite dc cest pour ca que je ne peux pas direct mettre la vignette 1 en dur )

_ 2e chose, que ces 3vignettes saffichent en gd toutes les 10sec par ex automatiquement en bas avec leur texte qui va avec , et que lon puisse également toujours les voir qd on survole

merci de votre aide car j'ai essayé de bidouiller et j'ai pas reussi je ny connais pas gd chose en javascript


Si au moins vous pourriez m'aider pour le 1er pt ce serait deja bcp, que je n'ai plus cette phrase là mais limage et texte dune des vignettes
<!-- DEBUT DU SCRIPT -->
<SCRIPT LANGUAGE="JavaScript">

/******
DEFINITION DES VARIABLE DU SCRIPT
******/
nb_photo_ligne = 3;
numero_photo = 1;

/******
ENREGISTREMENT DES PHOTOS
******/
ejs_vignet = new Array;
ejs_des = new Array;
ejs_big = new Array;

var HazMess=new Array();
ejs_des[0]= 'ima'
ejs_vignet[0]= 'img1petit.jpg'
ejs_big[0]= 'img1Grand.jpg'
ejs_des[1]= 'imag'
ejs_vignet[1]= 'img2petit.jpg'
ejs_big[1]= 'img2Grand.jpg'
ejs_des[2]= 'image'
ejs_vignet[2]= 'image/tbr1.gif'
ejs_big[2]= 'image/tbr1.gif'


/******
FONCTION POUR CHANGER LES PHOTOS
******/
function ChageImage(num)
{
if(document.getElementById)
document.getElementById("ejs_dyn_img").innerHTML = '<IMG SRC="'+ejs_big[num]+'" BORDER=0 HSPACE=5 VSPACE=5 ALT="Cliquez ici pour faire disparaitre"><BR><FONT FACE="Verdana, Arial" SIZE=1>'+ejs_des[num]+'</FONT>';
else
window.open(ejs_big[num],"_blank")
}

/******
FONCTION POUR EFFACER LES PHOTOS
******/
function killImage(num)
{
if(document.getElementById)
document.getElementById("ejs_dyn_img").innerHTML = "Ta phrase Ici";
}

/******
CREATION DU TABLEAU
******/
document.write('<TABLE>')
for(a=0;a<ejs_big.length;a++)
{
if(numero_photo == 1)
document.write('<TR>');
if(numero_photo == ejs_big.length)
document.write('<TD ALIGN=center COLSPAN='+(((ejs_big.length)+1)-numero_photo)+'>');
else
document.write('<TD ALIGN=center>');
document.write('<IMG SRC="'+ejs_vignet[a]+'"width="120" height="98" HSPACE=5 VSPACE=5 ALT="Cliquez ici pour voir en grand" BORDER=0 onMouseover="javascript:ChageImage('+a+')" ></TD>')
if(numero_photo == nb_photo_ligne)
{
document.write('</TR>');
numero_photo=0;
}
numero_photo++;
}
document.write('<TR><TD COLSPAN='+ejs_big.length+' ALIGN=center><DIV ID=ejs_dyn_img>Ta phrase Ici</DIV></TD></TR></TABLE>');
</SCRIPT>

Modifié par NDOBRA (22 Jul 2008 - 03:43)
+1 pour le rollover

Cela dit, faire afficher les vignettes en grand toutes les 10s ne sera pas possible en CSS, donc je jette un oeil au code pour voir quand même.

- Ta fonction killImage n'est jamais appellée, elle sert à quoi ?
- C'est très bien de tester si une propriété/méthode existe avant de l'utiliser, mais... document.getElementById, quel navigateur ne l'interprete pas aujourd'hui ?
- document.write est à éviter, privilégie la construction directe par le DOM
- un tableau pour présenter des photos ? Hmm, bof
- <FONT> ?! Arghhhh
- ta boucle for pourrait gagner en performance réécrite autrement

Enfin bon, pour répondre à ta question première, remplace dans la dernière de ton script
<DIV ID=ejs_dyn_img>Ta phrase Ici</DIV>

par
<DIV ID=ejs_dyn_img><img src="'+ejs_vignet[0]+'" alt="Texte alternatif de ton image" /></DIV>


Pour l'autre question par contre, ton code actuel est bien mal parti pour rajouter cette fonction (ou en tout cas, je n'ai pas le courage, désolé Smiley confused )
Un énormissime merci d'avoir pris le temps de me répondre, ta réponse marche parfaitement je viens de tester.
Pour être honnete avec toi, j'ai mis deux jours à trouver ce script qui nest dc pas de moi, car je suis dun niveau tres faible en java j'ai toujours eu du mal avec ce langage, dc je ne peux pas te repondre exactement. Jai cependant bidouillé quelques trucs pour la présentation ! Pour le killimage que j'ai moi meme supprimé car auparavant qd la souris partait l'image aussi partait.
Pour le tableau effectivement il est fort probable que je le vire.

Si quelqu'un a le courage de maider pour ce defilement ca maiderait bcp aussi et je lui en serais bcp reconnaissant, car cela permettrait de faire un vrai bandeau dinfos pour les news principales de mon site alors que là sinon les 2autres ne seraient qu'en vignettes et cest pas dit que le visiteur passe dessus avec la souris.
ou alors ce script qui change le texte toutes les 10sec mais là aussi j'ai essayé de le fusionner à mon precedent et ca ne marche pas ca fait plus rien
si quelqu'un peut m'aider ce serait sympa merci car il me reste plus que ça pour mon site à faire


<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document sans nom</title>



<style>
<!--

#tickertape{
position:relative;

layer-background-color:black;
width:490;
height:10;
}

#subtickertape{
background-color:black;
position:absolute;
border: 1px solid black;
width:400;
height:12;

}

.subtickertapefont{
font:bold 10px Arial;
text-decoration:none;
color:white;
}

.subtickertapefont a{
color:white;
text-decoration:none;
}
-->

</style>
</head>

<body onload="if (document.all||document.layers) {regenerate2();update()}">


<div id="tickertape">
      <div id="subtickertape" class="subtickertapefont">Chargement...</div>
      </div>
      
      <script language="JavaScript1.2">
      
   
      //la vitesse par défaut est de 4,5 secondes. Vous pouvez modifier cette valeur, si désiré.
      var speed=8500
      
      var news=new Array()
      news[0]="<center><a href='http://www.script-masters.com/'>Plusieurs dizaines de JavaScript à utiliser librement!</a></center>"
      news[1]="<center><a href='http://www.script-masters.com/'>Tout les conseils pour réaliser votre page!</a></center>"
      news[2]="<center><a href='http://www.editeurjavascript.com/partenaires/concours.php?id=fafaworld'>Des centaines de javascripts sur le moteur de l'Editeur JavaScript!</a></center>"
      news[3]="<center><a href='http://www.script-masters.com/'>Vous ne savez pas éditer vos metatag? Consultez mon générateur!</a></center>"
      //vous pouvez allonger ou restreindre cette liste de messages, au choix
      
      i=0
      if (document.all)
      tickerobject=document.all.subtickertape.style
      else
      tickerobject=document.tickertape.document
      function regenerate(){
      window.location.reload()
      }
      function regenerate2(){
      if (document.layers)
      setTimeout("window.onresize=regenerate",450)
      }
      
      function update(){
      BgFade(0xff,0xff,0xff, 0x00,0x00,0x00,10);
      if (document.layers){
      document.tickertape.document.subtickertape.document.write('<span class="subtickertapefont">'+news[i]+'</span>')
      document.tickertape.document.subtickertape.document.close()
      }
      else
      document.all.subtickertape.innerHTML=news[i]
      
      if (i<news.length-1)
      i++
      else
      i=0
      setTimeout("update()",speed)
      }
      
      function BgFade(red1, grn1, blu1, red2,
      grn2, blu2, steps) {
      sred = red1; sgrn = grn1; sblu = blu1;
      ered = red2; egrn = grn2; eblu = blu2;
      inc = steps;
      step = 0;
      RunFader();
      }
      function RunFader() {
      var epct = step/inc;
      var spct = 1 - epct;
      if (document.layers)
      tickerobject.bgColor =
      Math.floor(sred * spct + ered *
      epct)*256*256 +
      Math.floor(sgrn * spct + egrn * epct)*256 +
      Math.floor(sblu * spct + eblu * epct);
      else
      tickerobject.backgroundColor=
      Math.floor(sred * spct + ered *
      epct)*256*256 +
      Math.floor(sgrn * spct + egrn * epct)*256 +
      Math.floor(sblu * spct + eblu * epct);
      if ( step < inc ) {
      setTimeout('RunFader()',50);
      }
      step++;
      }
      
      </script>
</html>
[/i][/i]
J'ai trouvé aussi ce code plus court que celui juste au dessus, qui fait une rotation aussi mais impossible à mixer avec le premier , si l'on peut maider ce serait vraiment sympa merci

<script language="JavaScript"> 

<!--Javascript issu de Script Masters--> 
<!--  http://www.script-masters.com/-->  

var beforeMsg = "<center>";//Vous pouvez ici modifier la police ou bien encore ajouter un lien 
var afterMsg = "</center>";//fermer ici les balises ouverte dans la precedente variable 

var msgRotateSpeed = 5000; // Temps entre chaque message 

/* 
Ajoutez ici les textes qui défileront 
*/ 
var textStr = new Array(); 
textStr[0] = " <h3>Des photos ou des infos?</h3>"; 
textStr[1] = "a me faire parvenir?"; 
textStr[2] = "contactez moi!"; 

if (document.layers) { 
document.write('<ilayer id="NS4message" height=25 width=100%><layer id="NS4message2" height=25 width=100%></layer></ilayer>') 
temp = 'document.NS4message.document.NS4message2.document.write(beforeMsg + textStr[i++] + afterMsg);'+ 
'document.NS4message.document.NS4message2.document.close()'; 
} 
else if (document.getElementById) { 
document.write(beforeMsg + '<div id="message" style="position:relative;"></div>' + afterMsg); 
temp = 'document.getElementById("message").innerHTML = textStr[i++];'; 
} 
else if (document.all) { 
document.write(beforeMsg + '<div id="message" style="position:relative;"></div>' + afterMsg); 
temp = 'message.innerHTML = textStr[i++];'; 
} 

var i = 0; 

function msgRotate() { 
eval(temp); 
if (i == textStr.length) i = 0; 
setTimeout("msgRotate()", msgRotateSpeed); 
} 

window.onload = msgRotate; 

</script>
Sujet clos
Aller à