« Souris sans fil
Firefox, IE, HTML, Frontpage : manuel de l'informaticien en herbe
Recherche logiciel pour extraire de la musique d'un MP3 »

999

  • N3RD
  • Waffou
  • Taxes
  • Messages: 4 227
Let the ruling classes tremble at a communist revolution.
The proletarians have nothing to lose but their chains. They have a world to win.
Working Men of All Countries, Unite! -Marx & Engels, Communist Manifesto (1848)-

Amir

  • Master of the game
  • Modos
  • Joey est-ce que tu aimes les films de gladiateurs?
  • Messages: 3 741
Re : Firefox, IE, HTML, Frontpage, <h> : manuel de l'informaticien en herbe
« Réponse #76, le 3 Août 2005 à 01:37 »Modifié le 3 Août 2005 à 01:40 par ubaj
beuhhhhhhhhhhhhhhhhhhhhhhhh, ça m'arrive tout le temps ça... :sweatdrop:

Bon, je vais taper un peu de code pour illustrer le procédé.
Dans cet exemple, je mettrais 2 liens pour charger du texte un dernier pour une image.

<table>
  <tr>
    <td>
      <table>
        <tr><td><a href="texte1.html" target="conteneur">Texte 1[/url]</td></tr>
        <tr><td><a href="texte2.html" target="conteneur">Texte 2[/url]</td></tr>
        <tr><td><a href="image.jpg" target="conteneur">Image 1[/url]</td></tr>
      </table>
    </td>
    <td><iframe name="conteneur" frameborder="0" width="520" height="315"></iframe></td>
  </tr>
</table>

Le principe est simple une table de 2 colonnes:
  - La première contenant une table pour le menu (3 liens)
  - Une deuxième contenant un conteneur qui permettra d'afficher un contenu (du texte, une image...) lorsque l'on clique sur un lien du menu.



Le conteneur est une iframe, il faut lui donner un nom (dans mon exemple, c'est conteneur. Sans cela, on ne pourrait pas y faire réference dans les liens) puis tu lui spécifies une taille (width et height) et si le contenu dépasse cette taille tu auras des scrollbars.

Le menu est fait avec de simples liens balise <a, mais comme tu as dû le remarquer, chaque lien a un attribut target où j'ai entré le nom de l'iframe. Cela permet d'indiquer au navigateur que le texte ou l'image à charger est à charger dans l'iframe "conteneur". Pour chaque lien, tu définis dans l'attribut href, l'url de la page html ou de l'image que tu souhaites charger dans l'iframe.


Voilà voilà... J'espère que j'aurais été plus clair ^^


Edit: pour le reste (javascript et autres trucs super rigolos), ce n'est pas vraiment nécessaire. Mais si ça t'intéresse, je peux expliquer vite fait le pourquoi du comment (enfin comment on charge du contenu dans une iframe par javascript, c'est tellement passionant ^^)...

999

  • N3RD
  • Waffou
  • Taxes
  • Messages: 4 227
Re : Firefox, IE, HTML, Frontpage, <h> : manuel de l'informaticien en herbe
« Réponse #77, le 5 Août 2005 à 23:52 »
1000 mercis ubaj! :)
Je viens tout juste de comprendre que par "table" tu voulais dire "tableaux"... :sweatdrop:
Sinon, encore une chtit question!  :rougit:
Comment fait on pour passer du bouton rouge au rose lorsque l'on passe le curseur sur les boutons en bas 'Home,News, New sytem etc..."? sans passer par du flash visiblement... :unsure:
Let the ruling classes tremble at a communist revolution.
The proletarians have nothing to lose but their chains. They have a world to win.
Working Men of All Countries, Unite! -Marx & Engels, Communist Manifesto (1848)-

Amir

  • Master of the game
  • Modos
  • Joey est-ce que tu aimes les films de gladiateurs?
  • Messages: 3 741
Re : Firefox, IE, HTML, Frontpage, <h> : manuel de l'informaticien en herbe
« Réponse #78, le 6 Août 2005 à 01:37 »Modifié le 6 Août 2005 à 01:43 par ubaj
Oui, c'est vrai que mon utilisation du mot table au lieu de tableau n'était pas super...

Revenons à ton autre question, à savoir la gestion de bouton.
Pour cela c'est assez simple, on passe par du javascript (le site de Sega utilise cela pour les boutons "home", "news", etc...) et non pas du Flash (heureusement :sweatdrop:). Pour chaque bouton, il faut que tu fasses 2 images (une pour l'état normal, et une pour l'état "souris dessus") puis on utilise les fonctions javascript Macromédia pour avoir l'effet de roll-over (il doit y avoir des fonctions plus élaborées pour cela sur le net, mais puisque l'on les a sous la main autant en profiter pour l'illustration). C'est un site fait avec Dreamweaver, y a encore plein de trucs crades dans le code (ça va faire plaisir à Renji)^^

Bon, pour illustrer cela, je passe encore par du code ^^ :

<html>
  <head>
    <title>tralalalalala</title>

    <script language="JavaScript">
    <!--
    function MM_swapImgRestore() { //v3.0
      var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a)&&x.oSrc;i++) x.src=x.oSrc;
    }

    function MM_preloadImages() { //v3.0
      var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
      var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
      if (a.indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a;}}
    }

    function MM_findObj(n, d) { //v4.01
      var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
      d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
      if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[n];
      for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers.document);
      if(!x && d.getElementById) x=d.getElementById(n); return x;
    }

    function MM_swapImage() { //v3.0
      var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
      if ((x=MM_findObj(a))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
    }

    //-->
    </script>
  </head>

  <body onLoad="MM_preloadImages('../img/menu/home1.gif', '../img/menu/chara1.gif');">
     <a href="../index.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('home','','../img/menu/home1.gif',1)"><img src="../img/menu/home0.gif" alt="Home" name="home" width="125" height="31" border="0">[/url]
     <a href="../character/akira.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('chara','','../img/menu/chara1.gif',1)"><img src="../img/menu/chara0.gif" alt="Character" name="chara" width="125" height="31" border="0">[/url]
  </body>
</html>


Comment ça marche???

1/ Dans la balise body on a une fonction MM_preloadImages() qui est lancée sur l'événement onLoad. Cela a pour effet de charger toutes les images des boutons quand ils sont à l'état "souris dessus". Cela permet d'éviter que lorsque l'on passe la souris sur le bouton, il y ait un laps de temps dû au chargement de l'image qui donne un effet pas terrible.
2/ On crée des liens (balises <a> classique) mais avec des images entre les balises <a>. Les images sont affichées via une balise <img> toute bête mais il ne faut pas oublier de donner un nom à cet image (nom qui devra être unique et qui servira dans les fonctions javascript) via l'attribut name.
L'effet de roll-over est crée grâce aux événements onMouseOut (souris qui n'est plus sur le lien) et onMouseOver (souris est sur le lien). Pour cela on affecte la fonction MM_swapImgRestore() à l'événément onMouseOut et la fonction MM_swapImage() à l'événément onMouseOver.
  2-1/ La fonction MM_swapImgRestore()  ne nécessite aucun paramètre.
  2-2/ La fonction MM_swapImage() nécessite 4 paramètres
         Par exemple MM_swapImage('home', '' , '../img/menu/home1.gif', 1)
                                                     1       2       3                             4
         Le paramètre 1 correspond au nom de l'image contenue entre les balises <a>
         Le paramètre 2 correspond à ?
         Le paramètre 3 correspond à l'url de l'image qui doit être affichée quand la souris passe sur le lien (url que tu dois normalement avoir mis dans la fonction MM_preloadImages() de la balise <body>).
         Le paramètre 4 correspond à ? (on laisse à 1)

Et voilà, tu devrais avoir les effets de roll-over que tu souhaitais.


Je déconseille d'utiliser les fonctions macromédia, j'ai jeté un oeil dessus et c'est assez space surtout pour la fonction MM_swapImage. J'ai l'impression qu'ils ont fait en sorte que l'effet de roll-over sur lien puisse affecter plusieurs images en même temps (utilisation d'une boucle) et certains paramètres de la fonction (2 et 4) n'ont pas l'air d'être utilisés (j'ai peut être loupé un truc??).
Je crois que Renji a des fonctions mieux foutues. Donc, si il veut bien nous les faire partager ça serait pas de refus (j'avoue avoir un peu la flemme de rechercher un truc bien foutu sur la toile ce soir)? :D

En tout cas, ça peut te donner un aperçu de ce qu'il faut faire (et au pire si le Renji ne veut pas partager son code  :harhar:, je ferai une ch'tite recherche demain).


Edit : Triple9, tu m'oblige à écrire des tartines (qui a dit incompréhensible?). Moi qui voulait ne pas faire de posts de plus de 4 mots... :mdr:

kgeg

  • Naturellement riche en fibres
  • Waffou
  • Il en perd sa moumoutte le mamouth !
  • Messages: 6 183
Re: POUBELLE , dépotoire et touti quanti
« Réponse #79, le 6 Août 2005 à 08:56 »
^^'

Alors niveau code j'ai 2, 3 solutions...

Tout d'abord en javascript tout simple... ca me permet de faire une fonction roll-over simple ou un peu plus compliqué genre changer l'état de 2 images au lieu d'une...

voilà le script :

<SCRIPT type=text/javascript>
<!--

idOldTitre="VIDE"
// IMAGES ROLLOVER MENUS DU HAUT
M01a=new Image();
M01a.src="medias/ope0505/menu/m01.gif";
M01b=new Image();
M01b.src="medias/ope0505/menu/m01b.gif";
M02a=new Image();
M02a.src="medias/ope0505/menu/m02.gif";
M02b=new Image();
M02b.src="medias/ope0505/menu/m02b.gif";
M03a=new Image();
M03a.src="medias/ope0505/menu/m03.gif";
M03b=new Image();
M03b.src="medias/ope0505/menu/m03b.gif";
M04a=new Image();
M04a.src="medias/ope0505/menu/m04.gif";
M04b=new Image();
M04b.src="medias/ope0505/menu/m04b.gif";
M05a=new Image();
M05a.src="medias/ope0505/menu/m05.gif";
M05b=new Image();
M05b.src="medias/ope0505/menu/m05b.gif";
M06a=new Image();
M06a.src="medias/ope0505/menu/m06.gif";
M06b=new Image();
M06b.src="medias/ope0505/menu/m06b.gif";
M07a=new Image();
M07a.src="medias/shared/menuhome/m07.gif";
M07b=new Image();
M07b.src="medias/shared/menuhome/m07-b.gif";
M08a=new Image();
M08a.src="medias/shared/menuhome/m08.gif";
M08b=new Image();
M08b.src="medias/shared/menuhome/m08-b.gif";
M09a=new Image();
M09a.src="medias/shared/menuhome/m17.gif";
M09b=new Image();
M09b.src="medias/shared/menuhome/m17-b.gif";
function act(idTitre)
{
     if (idTitre != 'VIDE'){
   document['M'+idTitre].src=eval('M'+idTitre+'b.src');
  }       
}
function inact(idTitre){
     if (idTitre != 'VIDE'){
          document['M'+idTitre].src=eval('M'+idTitre+'a.src');
     }
}
function passIN(idTitre) {
    if (document.images)
    {
 act(idTitre);
         inact(idOldTitre);
    }
}
function passOUT(idTitre) {
    if (document.images)
    {
     inact(idTitre);
 act(idOldTitre);
    }
}
function init(idTitre){
    if (document.images)
    {
     idOldTitre=idTitre;
 act(idOldTitre);
    }
}

//-->
</SCRIPT>

Ca c'est le script pour un rollover simple...

pour un double :


<script>
if(document.images){
C01a=new Image();
C01a.src="../../Medias/Presentation/Cases/C3.gif";
C01b=new Image();
C01b.src="../../Medias/Presentation/Cases/C3_B.gif";

C02a=new Image();
C02a.src="../../Medias/Presentation/Cases/C1.gif";
C02b=new Image();
C02b.src="../../Medias/Presentation/Cases/C1_B.gif";

C03a=new Image();
C03a.src="../../Medias/Presentation/Cases/C2.gif";
C03b=new Image();
C03b.src="../../Medias/Presentation/Cases/C2_B.gif";

C04a=new Image();
C04a.src="../../Medias/Presentation/Cases/C4.gif";
C04b=new Image();
C04b.src="../../Medias/Presentation/Cases/C4_B.gif";


T01a=new Image();
T01a.src="../../Medias/Presentation/Menu/P1.gif";
T01b=new Image();
T01b.src="../../Medias/Presentation/Menu/P1_B.gif";

T02a=new Image();
T02a.src="../../Medias/Presentation/Menu/P2.gif";
T02b=new Image();
T02b.src="../../Medias/Presentation/Menu/P2_B.gif";

T03a=new Image();
T03a.src="../../Medias/Presentation/Menu/P3.gif";
T03b=new Image();
T03b.src="../../Medias/Presentation/Menu/P3_B.gif";

T04a=new Image();
T04a.src="../../Medias/Presentation/Menu/P4.gif";
T04b=new Image();
T04b.src="../../Medias/Presentation/Menu/P4_B.gif";

}

function act(idTitre)
{
       if (idTitre != 'VIDE'){   
         document['C'+idTitre].src=eval('C'+idTitre+'b.src');
         document['T'+idTitre].src=eval('T'+idTitre+'b.src');
      }                 
}

function inact(idTitre){
       if (idTitre != 'VIDE'){
             document['C'+idTitre].src=eval('C'+idTitre+'a.src');
            document['T'+idTitre].src=eval('T'+idTitre+'a.src');
       }
}   

function passIN(idTitre) {
    if (document.images)
    {
      inact(idOldTitre);
      act(idTitre);
      
    }
}

function passOUT(idTitre) {
    if (document.images)
    {
       inact(idTitre);
      act(idOldTitre);
    }
}
</script>

Après au niveau de mon code :

<a href="page.html" onMouseOver="passIN('01')" onMouseOut="passOUT('01')" alt="Acc&egrave;dez &agrave; la page">


Et voilà 01 appellant la fonction C01 du script ET T01 du script on change donc 2 images ;) et pour le premier script c'est la même chose

Après tu peux aussi le faire avec des css mais j'ai plus le truc en tête donc je mettrais à jour un peu plus tard, le principe était juste de "déplacer" une seule image contenant les états de roll over dans un div...
Vous n'avez aucune passion.

Nico

  • Waffou
  • I'm an IBF Fada and you ?
  • Messages: 3 215
Re : Firefox, IE, HTML, Frontpage, <h> : manuel de l'informaticien en herbe
« Réponse #80, le 9 Août 2005 à 13:17 »
Cela faisait deux ans que Macromedia n'avait pas renouvelé sa gamme de logiciels de cette manière. De nouvelles versions de Deamweaver, Flash, Fireworks, ainsi que de  Contribute et FlashPaper sont ainsi réunies au sein de Studio 8. Stephen Elop, PSG de Macromedia, a annoncé que cette version de Studio constituait un saut important en termes de performances. Au menu des nouveautés, on pourra ainsi trouver un support plus étendu des CSS dans Dreamweaver, l'intégration du glisser/déposer XML ou encore l'apparition du Flash Video.

A propos du Flash justement, la version 8 intégrera un certain nombre d'améliorations comme de nouveaux effets graphiques, un meilleur support des scripts ainsi qu'une intégration avec les outils les plus courants d'édition et d'encodage vidéo. Cette nouvelle version permettra également de tester du contenu pour les appareils mobiles. En Asie en effet, plus de 70 modèles d'appareils utilisent la version Lite du Flash Player.

Vous trouverez plus d'informations sur Studio 8 en vous rendant sur cette page.

Source : PCinpact

  • Une personne qui n'a jamais commis d'erreurs n'a jamais tenté d'innover. - Albert Einstein

  • La terre n'est pas un don de nos parents, ce sont nos enfants qui nous la prêtent...

kgeg

  • Naturellement riche en fibres
  • Waffou
  • Il en perd sa moumoutte le mamouth !
  • Messages: 6 183
Re: POUBELLE , dépotoire et touti quanti
« Réponse #81, le 9 Août 2005 à 13:59 »
Oui bon enfin une bonne nouvelle, adobe ayant racheté macromerdia on va enfin avoir flash qui serra plus un support vidéo que web ( rappellons que flash c'est pas du web car il nécessite l'installation un plug-ins puis bon flash c'est bien pour faire des dvd pis s'tout  ) si ca continue comme ca et un développement adobe sûrement du svg, qui date depuis un bout de temps lui et jamais pris au sérieux...

Enfin ce passage m'a bien fait rire
Citation
Travaillez en sachant que vos projets Studio s'intégreront aux technologies, aux plates-formes, aux systèmes d'exploitation et aux standards les plus récents grâce à la prise en charge de CSS, XML et Flash Player 8.
Un standard étant la base, je vois mal comment il peut être récent ^^'
Vous n'avez aucune passion.

Matt

  • Nebula Bondage Chain®
  • Getbackers ! L'anime encore mieux que le Meikai !
  • Messages: 1 168
Glazourected !

Kianouch

  • Admin
  • Messages: 12 746

Matt

  • Nebula Bondage Chain®
  • Getbackers ! L'anime encore mieux que le Meikai !
  • Messages: 1 168
Glazourected !

kgeg

  • Naturellement riche en fibres
  • Waffou
  • Il en perd sa moumoutte le mamouth !
  • Messages: 6 183
Re: POUBELLE , dépotoire et touti quanti
« Réponse #85, le 9 Août 2005 à 14:10 »
Citation de Glazoubil le 9 Août 2005 à 14:04
heu ben windows peut être considéré comme un standard par exemple, non ?
windows c'est un standard de codahe html ?  :sweatdrop:

Pour moi quand on parle de standard oueb c'est dans la façon de coder, bref le standard c'est le bon vieux code qui passe sur tous les navigateurs et pas les trucs bidouillés à la mordmoilezob©,  bref du standard récent je trouve ca contradictoire...
Vous n'avez aucune passion.

Matt

  • Nebula Bondage Chain®
  • Getbackers ! L'anime encore mieux que le Meikai !
  • Messages: 1 168
Re : Firefox, IE, HTML, Frontpage, <h> : manuel de l'informaticien en herbe
« Réponse #86, le 9 Août 2005 à 14:19 »
ah oki ! Non bien sûr pour windows je parlais d'os standard, pour donner un exemple et dire que c'est pas forcément contradictoire, même si à première vu ça l'est ! J'avais plus compris standard web dans le sens de trucs récents ou anciens mais utilisés par beaucoup de monde...

Mais là y'a que pour flash 8 que c'est contradictoire : c'est le seul qui refusera de fonctionner sur une machine ou il n'y aura que windows d'installé, par rapport aux xml/css et autres qui peuvent être pondues au notepad...
Glazourected !

FinalBahamut

  • Troll n' roll, go go go ^_^
  • Waffou
  • Messages: 5 699


... et Omni me fit pourvoyeur en anus fruités :classe:

Matt

  • Nebula Bondage Chain®
  • Getbackers ! L'anime encore mieux que le Meikai !
  • Messages: 1 168
Glazourected !

Amir

  • Master of the game
  • Modos
  • Joey est-ce que tu aimes les films de gladiateurs?
  • Messages: 3 741
« Souris sans fil
Recherche logiciel pour extraire de la musique d'un MP3 »