Forum d'aide création graphique / [Terminée] 2change aide contre réalisation 3d

tochpa · 26-07-2009 22:52:04

Bonjour,

En échange de quelques connaissances html, css, java...(je débute dans le domaine) ou quelques réponses à mes questions, je vous propose de réaliser ou de vous expliquer comment faire vos créations 2D, 3D, vidéo.
Je suis infographiste/Concepteur 3D/Monteur-truquiste diplômé...mais absolument pas webmaster ou webdesigner
(pour le moment...j'ai bien décidé d'apprendre!!!).

En attendant voici ma première question:

-que dois je mettre dans "<li><a href="#">Lien</a></li>" afin de rediriger le "click" sur une image centrée ou une autre page (jpeg, png, pdf, vidéo)?

ps: merci à young et maude pour ce forum qui va (j'en suis sur, m'apprendre beaucoup).

Maude · 26-07-2009 23:27:59

Bonjour et bienvenue,

Pour rediriger sur une autre page il suffit juste d'indiquer son emplacement :

Code:

<li><a href="#">Lien</a></li>

Par

Code:

<li><a href="http://www.urldelapage.com/">Lien</a></li>

smile

Ps: j'ai déplacée la discussion au bon endroit

tochpa · 26-07-2009 23:39:32

Merci Maude,

du coup je préfère ça:
<li><a href="#">3D</a>
<ul>
<li><a href="#"><img src="http://nsa08.casimages.com/img/2009/07/26/09072611342958057.png" alt="" border="0"/></a></li>

ainsi lorsque l'on passe la souris dessus l'image s'affiche directement sur la page d'acceuil.
Cependant, as-tu une astuce pour la centré par rapport au navigateur?
Car elle s'affiche à partir de l'angle du menu "3D".

Merci pour ce que tu fais...

Maude · 26-07-2009 23:50:02

Pour plus de facilité ce qui serait bien c'est que vous me donniez soit les codes HTML et css, soit un lien pour voir votre site, car sans sa c'est pas évident .

peut-être un :

"margin: 0 auto 0 auto"sur li dans le css

Natsu · 27-07-2009 00:09:31

<center><li><a href="#">3D</a>
<ul>
<li><a href="#"><img src="http://nsa08.casimages.com/img/2009/07/26/09072611342958057.png" alt="" border="0"/></a></li></center>

?

ou

<div align="center"><li><a href="#">3D</a>
<ul>
<li><a href="#"><img src="http://nsa08.casimages.com/img/2009/07/26/09072611342958057.png" alt="" border="0"/></a></li></div>

tochpa · 27-07-2009 10:28:30

Salut,

Maude, je ne vois pas ou placé "margin: 0 auto 0 auto" par rapport à

Code:

<li><a href="#">3D</a>
        <ul>
      <li><a href="#"><img src="http://nsa08.casimages.com/img/2009/07/26/09072611342958057.png" alt="" border="0"/></a></li>

je commence tout simplement avec l'un de vos téléchargement, donc le site est très loin d'être en ligne.

Natsu, merci de tes propositions...cependant elles ne marchent pas car tes codes essayent de centrer la div ou le menu et non pas l'image seul, ainsi ça fait décaler, apparaitre des lignes de code sur la page....

Voici les lignes de code:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>Titre de votre site</title>    
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15" />
<meta http-equiv="content-language" content="fr" />
<link href="style.css"    title="Défaut" rel="stylesheet" type="text/css" media="screen" />
<script type="text/javascript" src="script.js"></script>

</head>
<body>
<div id="conteneur">
<div id="header"></div>
           
<div id="contenu">
<div id="centrer_menu">
<table summary="" class="centre" cellpadding="0" cellspacing="0">
<tr>
<td class="centre"> 

   <ul id="menu">
      <li> <a href="#">Curriculum Vitae</a>
        <ul>
          <li><a href="#"><img src="http://nsa08.casimages.com/img/2009/07/26/090726125639151955.png" alt="" border="0"/></a></li>
          
        </ul>
      </li>
      <li><a href="#">2D</a>
        <ul>
          <li><a href="#">Lien</a></li>
          <li><a href="#">Lien</a></li>
          <li><a href="#">Lien</a></li>
          <li><a href="#">Lien</a></li>
        </ul>
      </li>
    <li><a href="#">3D</a>
        <ul>
       <li><a href="#"><img src="http://nsa08.casimages.com/img/2009/07/26/09072611342958057.png" alt="" border="0"/></a></li>


        </ul>
      </li>
      <li><a href="#">Dessin</a>
        <ul>
          <li><a href="#">lien</a></li>
          <li><a href="#">Lien</a></li>
          <li><a href="#">Lien</a></li>
          <li><a href="#">Lien</a></li>
        </ul>
      </li>
      <li><a href="#">Composition</a>
        <ul>
          <li><a href="#">Lien</a></li>
          <li><a href="#">Lien</a></li>
          <li><a href="#">Lien</a></li>
          <li><a href="#">Lien</a></li>
        </ul>
      </li>
      <li><a href="#">Montage Vidéo</a>
        <ul>
          <li><a href="#">Lien</a></li>
          <li><a href="#">Lien</a></li>
          <li><a href="#">Lien</a></li>
          <li><a href="#">Lien</a></li>
        </ul>
      </li>
</ul>
</td>
</tr>
</table>
    
</div>
<div class="texte">
<p>consectetuer adipiscing elit.</p>     <br /> 
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
Quisque id tortor. Etiam ante nunc, gravida sed, vehicula quis, venenatis vitae, nisl. <br />  <br />
Nunc a leo. Proin in odio. Nullam dapibus augue et lectus lobortis porta. Praesent sit amet felis sed libero suscipit ullamcorper. 
Phasellus orci metus, bibendum in, commodo a, auctor ut, pede. Vestibulum rhoncus vehicula sapien. Curabitur tortor. 
<br /><br />
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
Quisque id tortor. Etiam ante nunc, gravida sed, vehicula quis, venenatis vitae, nisl. 
Nunc a leo. Proin in odio. Nullam dapibus augue et lectus lobortis porta. Praesent sit amet felis sed libero suscipit ullamcorper.
Quisque id tortor. Etiam ante nunc, gravida sed, vehicula quis, venenatis vitae, nisl.     <br /><br />
Nunc a leo. Proin in odio. Nullam dapibus augue et lectus lobortis porta. Praesent sit amet felis sed libero suscipit ullamcorper. 
Phasellus orci metus, bibendum in, commodo a, auctor ut, pede. Vestibulum rhoncus vehicula sapien. Curabitur tortor. 
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
Quisque id tortor. Etiam ante nunc, gravida sed, vehicula quis, venenatis vitae, nisl. <br /><br />
Nunc a leo. Proin in odio. Nullam dapibus augue et lectus lobortis porta. Praesent sit amet felis sed libero suscipit ullamcorper. 
Phasellus orci metus, bibendum in, commodo a, auctor ut, pede. Vestibulum rhoncus vehicula sapien.
<a href="#">Curabitur tortor. </a>
<div style="text-align: right"> <a href="#header"><img src="images/haut.jpg" alt=""/></a>    </div>
</div>
</div>
         
                    

<div id="pied">
<!-- Ne pas retirer sans autorisation écrite comme indiqué dans nos conditions d'utilisation! -->
<a class="copyright" href="http://www.kitgraphiquegratuit.org" onclick="window.open(this.href); return false;" title="Kit Graphique et template gratuit" ></a></div></div>
<!-- Ne pas retirer sans autorisation écrite comme indiqué dans nos conditions d'utilisation! -->

</body>
</html>

Ainsi il y a seulement deux liens complétés par des images qui apparaissent lorsque l'on passe la souris dessus, sans être centré....mais a vrai dire, j'aurais souhaité que l'on click sur le lien (cv, 2D, 3D...) et que l'on soit redirigé sur une autre page de même fond que l'acceuil avec l'image voulu centrée. (sans parler de la musique et des animations flash que j'aimerais y placer...on verra plus tard)

Natsu · 27-07-2009 12:52:46

pour les images centré <ul align="center'>

tochpa · 27-07-2009 12:53:54

Merci natsu...je test...

tochpa · 27-07-2009 12:55:07

Et non ça marche pas non plus...j'ai fait ça:

<li><a href="#">3D</a>
<ul align="center'>
<li><a href="#"><img src="http://nsa08.casimages.com/img/2009/07/26/09072611342958057.png" alt="" border="0"/></a></li>

Natsu · 27-07-2009 17:10:35

ben essaye de voir avec <ul style="position: relative; left: 32px"> tu laisse comme sa et les px de left tu change et tu pe rajouté ossi bottom, top, right

tochpa · 27-07-2009 17:59:26

Merci natsu...j'ai trouvé une solution:

j'ai créer de nouvelle page pour chaque menu. et lorsque tu click dessus l'image apparait centrée.
Affaire résolue!!! (jusqu'a ma prochaine question...)

Le probleme que j'ai rencontré était de ne pas savoir comment creer une autre page...il suffisait de creer de nouveaux index et de remplacer le "#" par le nom du nouvel index.html

Ainsi le site se construit vitesse grand V.

les prochaine difficultés:
-intégrer du son et de l'animation .swf

merci encore et a bientôt

Young · 27-07-2009 19:12:18

Salut!
Pour intégrer du son, je conseille l'iframe:

Code:

<iframe src="son.mp3" style="border:0;width:auto;height:auto;"></iframe>

Pour les animations .swf, les balises suivantes feront l'affaire:

Code:

<object type="application/x-shockwave-flash" data="ton_animation.swf" width="280" height="100">
    <param name="movie" value="ton_animation.swf" />
    <param name="wmode" value="transparent" />
</object>

Voila wink .

tochpa · 27-07-2009 22:06:53

Super merci beaucoup pour ces codes, cependant deux problèmes:

-en ce qui concerne le son, le lecteur apparait avec un carré blanc derrière la barre de lecture...
Comment faire pour que ce carré blanc soit transparent?

-en ce qui concerne la vidéo, j'ai pas de barre de lecture et c'est très embêtant car la vidéo ce déclenche toute seule...
et je compte bien en mettre plusieurs sur la même page.

Grâce à vous le site commence vraiment a prendre forme...il me restera plus qu'a l'animer en flash...

puis je passerais à la mise en ligne!!! (encore quelques heures, voir jours de prise de tête... smile )

Natsu · 27-07-2009 22:51:45

pour la music juste a mettre sa

Code:

<div style="display: none"><iframe src="son.mp3" style="border:0;width:auto;height:auto;"></iframe></div>

Dernière modification par Natsu (27-07-2009 22:52:12)

tochpa · 28-07-2009 08:34:18

Salut,

Désolé natsu, mais ton code ne fonctionne pas: lorsque je le mets, il n 'y a plus de lecteur et plus de son...
j'essaye avec ça:

<iframe src="son.mp3" style="border:0;width:auto;height:auto;background-color:transparent"></iframe></div>

mais ça ne fonctionne pas...
toujours ce rectangle blanc derriere la barre du lecteur!!!

webadmin-crea · 28-07-2009 08:48:57

Bonjour
je pense pas que se sois la meilleur idée de faire une iframe ...

Utilise plutôt un lecteur flash : http://www.alsacreations.fr/dewplayer
Explication pour bien le configurer : http://www.blup.fr/2005/02/16/

Personnellement je 'utilise je suis entierrement satisfais ...

Corentin

tochpa · 28-07-2009 09:04:52

Super corentin,

Merci pour le coup de main...Effectivement c'est parfait!!! tout fonctionne du premier coup et on peu le personnaliser à souhait (couleur, autoplay,...)

As-tu une technique pour intégrer une vidéo .swf en ayant une barre de lecture....car j'ai intégrer une vidéo .swf, cependant la vidéo se lance toute seule et impossible de naviguer sur celle-ci (pas de barre de controle).

pour le moment mon code est comme ça:

<object type="application/x-shockwave-flash" data="nom de ma vidéo.swf" width="320" height="240">
<param name="movie" value="nom de ma vidéo.swf" />
<param name="wmode" value="transparent" />
</object>

webadmin-crea · 28-07-2009 09:40:03

Bonjour à toi

Alors pour les vidéos soit tu le fais héberger chez youtube etc ...
Ou tu pet utiliser sa : http://www.longtailvideo.com/players/jw-flv-player/ (jamais tester don a voir)
Pense à convertir ta video en flv ...

BOnne Chance !!!

Corentin

Dernière modification par webadmin-crea (28-07-2009 09:42:43)

tochpa · 28-07-2009 10:12:43

merci pour le lien, cependant malgré multiple teste...impossible de faire apparaitre le lecteur avec la vidéo.
j'ai télécharger le pack et installé comme demandé (Transfert du player.swf et swfobject.js fichier ZIP dans votre site Web), ...puis j'ai pris le code html en remplaçant le nom de fichier vidéo flv par le mien...mais rien ne fonctionne...

Voici le code que j'ai collé dans ma page:

<script type="text/javascript" src="http://www.jeroenwijering.com/embed/swfobject.js"></script>

<div id="player">This text will be replaced</div>

<script type="text/javascript">
var so = new SWFObject('/jw/embed/player.swf','mpl','470','320','9');
so.addParam('allowscriptaccess','always');
so.addParam('allowfullscreen','true');
so.addParam('flashvars','&duration=34&file=file:///C:/DocumentsandSettings/tochpa/Bureau/site/preview.flv&controlbar=over&dock=false');
so.write('player');
</script>

si jamais quelqu'un a une solution...

tochpa · 28-07-2009 11:19:25

c'est bon j'ai trouvé la réponse ici:

http://www.beldjilali.fr.nf/creation.php?id=159

un super lecteur très simple a installer et bien expliqué...(un collègue concepteur 3D...)

de nouvelles questions:

-Peut-on créer une page d'accueil avant celle du premier index?
(souvent ces pages on une barre de chargement, lorsque le site est fait en flash)
ou est-on obligé de commencer par l'index en page d'accueil?

-comment faire en sorte que le son ne soit pas réinitialisé lorsque l'on change de page???

ps:grace à vous le site avance a grand pas

webadmin-crea · 28-07-2009 11:30:54

Bonjour

Merci pour le lien sa peut servir !!!

La premier page est obligatoirement index sinon tu pe faire index ; index_1 ; index_2 etc ...

Pour le son je sais pas trop ...

Ps : avis personnel evite de metre du son sur tout les pages ...

Corentin

tochpa · 28-07-2009 11:36:22

bah, j'aimerais mettre un seul son pour tout le site, mais de façon continue même lorsque l'on change de page...avec le lecteur qui suit pour pouvoir l'arrêter...

je vais faire des recherches...

tochpa · 28-07-2009 11:39:07

au passage, pas mal du tout ton site...

webadmin-crea · 28-07-2009 11:56:38

OK pour mon site je suis entrain de faire une version 3
http://ns10.freeheberg.com/~titin4/v3

Merci des compliment

Young · 28-07-2009 13:27:06

Salut!
Pour que le son ne s'arrête pas, tu peux ouvrir une nouvelle fenêtre qui contiendra le lecteur et uniquement le lecteur wink .

#1 26-07-2009 22:52:04

[Terminée] 2change aide contre réalisation 3d

#2 26-07-2009 23:27:59

Re: [Terminée] 2change aide contre réalisation 3d

Code:

Code:

#3 26-07-2009 23:39:32

Re: [Terminée] 2change aide contre réalisation 3d

#4 26-07-2009 23:50:02

Re: [Terminée] 2change aide contre réalisation 3d

#5 27-07-2009 00:09:31

Re: [Terminée] 2change aide contre réalisation 3d

#6 27-07-2009 10:28:30

Re: [Terminée] 2change aide contre réalisation 3d

Code:

Code:

#7 27-07-2009 12:52:46

Re: [Terminée] 2change aide contre réalisation 3d

#8 27-07-2009 12:53:54

Re: [Terminée] 2change aide contre réalisation 3d

#9 27-07-2009 12:55:07

Re: [Terminée] 2change aide contre réalisation 3d

#10 27-07-2009 17:10:35

Re: [Terminée] 2change aide contre réalisation 3d

#11 27-07-2009 17:59:26

Re: [Terminée] 2change aide contre réalisation 3d

#12 27-07-2009 19:12:18

Re: [Terminée] 2change aide contre réalisation 3d

Code:

Code:

#13 27-07-2009 22:06:53

Re: [Terminée] 2change aide contre réalisation 3d

#14 27-07-2009 22:51:45

Re: [Terminée] 2change aide contre réalisation 3d

Code:

#15 28-07-2009 08:34:18

Re: [Terminée] 2change aide contre réalisation 3d

#16 28-07-2009 08:48:57

Re: [Terminée] 2change aide contre réalisation 3d

#17 28-07-2009 09:04:52

Re: [Terminée] 2change aide contre réalisation 3d

#18 28-07-2009 09:40:03

Re: [Terminée] 2change aide contre réalisation 3d

#19 28-07-2009 10:12:43

Re: [Terminée] 2change aide contre réalisation 3d

#20 28-07-2009 11:19:25

Re: [Terminée] 2change aide contre réalisation 3d

#21 28-07-2009 11:30:54

Re: [Terminée] 2change aide contre réalisation 3d

#22 28-07-2009 11:36:22

Re: [Terminée] 2change aide contre réalisation 3d

#23 28-07-2009 11:39:07

Re: [Terminée] 2change aide contre réalisation 3d

#24 28-07-2009 11:56:38

Re: [Terminée] 2change aide contre réalisation 3d

#25 28-07-2009 13:27:06

Re: [Terminée] 2change aide contre réalisation 3d

Pied de page des forums