Retour à Forum de site web

Images de changer d'auto

  • DarkHeavensAngel
  • Born
  • Born
  • No Avatar
  • Inscription: Avr 29, 2012
  • Messages: 4
  • Status: Offline

Message Avril 29th, 2012, 10:56 pm

Je vient de commencer l'apprentissage HTML et a été récemment présenté à la page CSS. Je me demandais s'il existait un moyen d'avoir auto changer les images à l'aide de CSS codage. Je sais que sur l'utilisation de JavaScript, mais j'ai appris pas JavaScript avant. S'il y a un chemin à l'aide de CSS, veuillez publier du code et des explications simples pour les lignes de code. S'il est impossible à l'aide de CSS, puis expliquer JavaScript avec plus de détails. Im vraiment juste un débutant et pas la moindre idée de JavaScript. Merci beaucoup!
  • Anonymous
  • Bot
  • No Avatar
  • Inscription: 25 Feb 2008
  • Messages: ?
  • Loc: Ozzuland
  • Status: Online

Message Avril 29th, 2012, 10:56 pm

  • Satwant
  • Graduate
  • Graduate
  • Avatar de l’utilisateur
  • Inscription: Déc 27, 2010
  • Messages: 126
  • Loc: Bangalore
  • Status: Offline

Message Avril 30th, 2012, 2:03 am

Ce n'est pas vraiment une question de CSS et vous devez chercher un script faire ce que vous voulez comme CSS ne peut pas faire de changements de comportement comme ça.

Consultez cet exemple de code pour modifier des images avec javascript
HTML Code: [ Select ]
< !DOCTYPE html >
<html>
<head>
test de <title> changement IMG </title>
< script type = « text/javascript » >
image var = new Array (« path1 », « chemin2 », « chemin3 ») ;
var timeout = {} ;
fonction stopIt() {
clearTimeout(timeout) ;
}
fonction chnageimage(dvX) {
var dvi = document & #46;getElementById(dvX) ;
Si (! dvi & #46, comte || dvi & #46, comte == image & #46, longueur)
DVI & #46 ; count = 0 ;
DVI & #46 ; src = image & #91; dvi & #46, comte & #93 ;
DVI & #46 ; alt = image & #91; dvi & #46, comte & #93 ;
DVI & #46 ; count = dvi & #46 ; count + 1 ;
timeout=setTimeout(chnageimage("+dvX+"),200) ;
}
</script>
</head>
<body>
<div> < img src = « t1 » alt = « test1 » id = « changeur » / >< / div >
<div> < bouton onclick="chnageimage("changer") » > Start </button> </div>
<div> < bouton onclick="stopIt() » > Stop </button> </div>
</body>
</html>
 
  1. < !DOCTYPE html >
  2. <html>
  3. <head>
  4. test de <title> changement IMG </title>
  5. < script type = « text/javascript » >
  6. image var = new Array (« path1 », « chemin2 », « chemin3 ») ;
  7. var timeout = {} ;
  8. fonction stopIt() {
  9. clearTimeout(timeout) ;
  10. }
  11. fonction chnageimage(dvX) {
  12. var dvi = document & #46;getElementById(dvX) ;
  13. Si (! dvi & #46, comte || dvi & #46, comte == image & #46, longueur)
  14. DVI & #46 ; count = 0 ;
  15. DVI & #46 ; src = image & #91; dvi & #46, comte & #93 ;
  16. DVI & #46 ; alt = image & #91; dvi & #46, comte & #93 ;
  17. DVI & #46 ; count = dvi & #46 ; count + 1 ;
  18. timeout=setTimeout(chnageimage("+dvX+"),200) ;
  19. }
  20. </script>
  21. </head>
  22. <body>
  23. <div> < img src = « t1 » alt = « test1 » id = « changeur » / >< / div >
  24. <div> < bouton onclick="chnageimage("changer") » > Start </button> </div>
  25. <div> < bouton onclick="stopIt() » > Stop </button> </div>
  26. </body>
  27. </html>
  28.  
Thank You
Satwant Singh Hundal
http://www.mrhundal.com
  • DarkHeavensAngel
  • Born
  • Born
  • No Avatar
  • Inscription: Avr 29, 2012
  • Messages: 4
  • Status: Offline

Message Avril 30th, 2012, 4:20 pm

Oh, OK. Merci pour l'exemple !:D
  • sarafina
  • Born
  • Born
  • No Avatar
  • Inscription: Mai 10, 2012
  • Messages: 4
  • Status: Offline

Message Mai 10th, 2012, 11:58 pm

C'est formidable. Pouvez vous me dire où définir la durée de chaque image de montre, et comment ?
Merci !
  • Satwant
  • Graduate
  • Graduate
  • Avatar de l’utilisateur
  • Inscription: Déc 27, 2010
  • Messages: 126
  • Loc: Bangalore
  • Status: Offline

Message Mai 11th, 2012, 10:33 pm

Le deuxième paramètre fonctions setTimeout. Nous spécifions en millisecondes.

JAVASCRIPT Code: [ Select ]
timeout=setTimeout('chnageimage("'+dvX+'")',200);
 
  1. timeout=setTimeout('chnageimage("'+dvX+'")',200);
  2.  
Thank You
Satwant Singh Hundal
http://www.mrhundal.com
  • sarafina
  • Born
  • Born
  • No Avatar
  • Inscription: Mai 10, 2012
  • Messages: 4
  • Status: Offline

Message Mai 12th, 2012, 9:28 am

AHH, c'est ce que m'a lancé au large. 200 ne rimaient à rien pour moi ! Merci beaucoup!
  • sarafina
  • Born
  • Born
  • No Avatar
  • Inscription: Mai 10, 2012
  • Messages: 4
  • Status: Offline

Message Mai 12th, 2012, 11:45 am

OK, je déteste être une douleur, mais....

Comment obtenez-vous ce script à exécuter automatiquement lorsque la page s'ouvre, vs avoir à cliquer sur ce bouton Démarrer ? Im pensant qu'il a quelque chose à voir avec onload, mais je ne sais pas comment faire pour modifier la section de tout le corps.

Merci!!!
  • Satwant
  • Graduate
  • Graduate
  • Avatar de l’utilisateur
  • Inscription: Déc 27, 2010
  • Messages: 126
  • Loc: Bangalore
  • Status: Offline

Message Mai 13th, 2012, 11:57 am

Cela aidera à

HTML Code: [ Select ]
< body onload="chnageimage("changer")" >
 
  1. < body onload="chnageimage("changer")" >
  2.  


Juste faire un appel de fonction, et il sera sur.
Thank You
Satwant Singh Hundal
http://www.mrhundal.com
  • sarafina
  • Born
  • Born
  • No Avatar
  • Inscription: Mai 10, 2012
  • Messages: 4
  • Status: Offline

Message Mai 15th, 2012, 10:17 pm

Merci. J'ai essayé de mettre qui en et il ne fonctionne pas. En fait, la déclaration de corps disparaît juste !

Heres ce que j'ai, pouvez vous me dire quelle Im faire mal ? Je ne sais pas le script du tout. Pouvez vous dire??:)

< script type = « text/javascript » > / / < ![CDATA [
image var = new Array ("/skin/frontend/default/default/images/frontgroup.jpg",
"/ media/Testimonials/suuthe_testimonial_5.png",
"/ media/Testimonials/gift_set_suuthe_325.png") ;
var timeout = {} ;
fonction stopIt() {
clearTimeout(timeout) ;
}
fonction changeimage(dvX) {
var dvi=document.getElementById(dvX) ;
Si (! dvi.count || dvi.count == image.length)
DVI.Count=0 ;
DVI.src=image[DVI.Count] ;
DVI.Alt=image[DVI.Count] ;
DVI.Count=DVI.Count+1 ;
timeout=setTimeout(changeimage("+dvX+"),3500) ;
}
/ /]] >< /script >
< body onload="changeimage("changer")" >
  • Satwant
  • Graduate
  • Graduate
  • Avatar de l’utilisateur
  • Inscription: Déc 27, 2010
  • Messages: 126
  • Loc: Bangalore
  • Status: Offline

Message Mai 16th, 2012, 12:48 am

Hey

J'ai vérifier et trouvé que cette chose fonctionne. Peut être que vous oubliez définir une balise de <IMG> dans la section <body>. Ce script a besoin d'une balise de <img> avec l'id « changer ».

HTML Code: [ Select ]
<html>
<head>
test de <title> changement IMG </title>
< script type = « text/javascript » > / / <! & #91 ;CDATA & #91 ;
image var = new Array ("/ peau/frontend/défaut/défaut/images/frontgroup & #46 ; jpg »,
« / médias/témoignages/suuthe_testimonial_5 & #46 ; png ",
« / médias/témoignages/gift_set_suuthe_325 & #46 ; png ") ;
var timeout = {} ;
fonction stopIt() {
clearTimeout(timeout) ;
}
fonction changeimage(dvX) {
var dvi = document & #46;getElementById(dvX) ;
Si (! dvi & #46, comte || dvi & #46, comte == image & #46, longueur)
DVI & #46 ; count = 0 ;
DVI & #46 ; src = image & #91; dvi & #46, comte & #93 ;
DVI & #46 ; alt = image & #91; dvi & #46, comte & #93 ;
DVI & #46 ; count = dvi & #46 ; count + 1 ;
timeout=setTimeout(changeimage("+dvX+"),3500) ;
}
/ / & #93; & #93 ; >< /script >
</head>
< body onload="changeimage("changer")" >
<div> < img src = « t1 » alt = « test1 » id = « changeur » / >< / div >
</body>
</html>
 
  1. <html>
  2. <head>
  3. test de <title> changement IMG </title>
  4. < script type = « text/javascript » > / / <! & #91 ;CDATA & #91 ;
  5. image var = new Array ("/ peau/frontend/défaut/défaut/images/frontgroup & #46 ; jpg »,
  6. « / médias/témoignages/suuthe_testimonial_5 & #46 ; png ",
  7. « / médias/témoignages/gift_set_suuthe_325 & #46 ; png ") ;
  8. var timeout = {} ;
  9. fonction stopIt() {
  10. clearTimeout(timeout) ;
  11. }
  12. fonction changeimage(dvX) {
  13. var dvi = document & #46;getElementById(dvX) ;
  14. Si (! dvi & #46, comte || dvi & #46, comte == image & #46, longueur)
  15. DVI & #46 ; count = 0 ;
  16. DVI & #46 ; src = image & #91; dvi & #46, comte & #93 ;
  17. DVI & #46 ; alt = image & #91; dvi & #46, comte & #93 ;
  18. DVI & #46 ; count = dvi & #46 ; count + 1 ;
  19. timeout=setTimeout(changeimage("+dvX+"),3500) ;
  20. }
  21. / / & #93; & #93 ; >< /script >
  22. </head>
  23. < body onload="changeimage("changer")" >
  24. <div> < img src = « t1 » alt = « test1 » id = « changeur » / >< / div >
  25. </body>
  26. </html>
  27.  
Thank You
Satwant Singh Hundal
http://www.mrhundal.com
  • ultimate11
  • Student
  • Student
  • No Avatar
  • Inscription: Fév 02, 2011
  • Messages: 86
  • Status: Offline

Message Mai 16th, 2012, 11:20 pm

comment appliquer si les images sont à la base de données php/mysql...
  • Satwant
  • Graduate
  • Graduate
  • Avatar de l’utilisateur
  • Inscription: Déc 27, 2010
  • Messages: 126
  • Loc: Bangalore
  • Status: Offline

Message Mai 17th, 2012, 2:37 am

Il travaillera avec petite modification si vous peuplez les valeurs de PHP

PHP Code: [ Select ]
/ / make tableau image comme
image var = new Array() ;
<? php
/ / Démarrer une boucle ici pour obtenir le chemin de l'image
? >
image & #46, pousser (<? php echo $image_path_variable? >) ;
<? php
//End boucle ici
? >
 
  1. / / make tableau image comme
  2. image var = new Array() ;
  3. <? php
  4. / / Démarrer une boucle ici pour obtenir le chemin de l'image
  5. ? >
  6. image & #46, pousser (<? php echo $image_path_variable? >) ;
  7. <? php
  8. //End boucle ici
  9. ? >
  10.  
Thank You
Satwant Singh Hundal
http://www.mrhundal.com

Page 1 sur 1

Afficher de l'information

  • Total des messages de ce sujet: 12 messages
  • Utilisateurs parcourant ce forum: Aucun utilisateur enregistré et 260 invités
  • Vous ne pouvez pas poster de nouveaux sujets
  • Vous ne pouvez pas répondre aux sujets
  • Vous ne pouvez pas éditer vos messages
  • Vous ne pouvez pas supprimer vos messages
  • Vous ne pouvez pas joindre des fichiers
 
 

© 2011 Unmelted, LLC. Ozzu® est une marque déposée de Unmelted, LLC