Bonjour

Je ne connais malheureusement rien du tout au Javascript, j'ai seulement appris le XHTML/CSS/PHP/SQL et me retrouve désormais pris par le temps et ai à réaliser ce site internet.

Tout d'abord, observez mon site :



Mon principal problème est :

- Comment faire pour que, lorsque l'on appuie sur un des boutons rouges, un menu déroulant s'affiche non pas en dessous de celui-ci mais sur la gauche (zone de sous-menu située sous le blason) représenté ici sous la forme de boutons bleus, qui eux-mêmes, une fois cliqués se déroulent en boutons jaunes ? (Et tout ceci, si possible, sans avoir à recharger ou changer la page : je dis bien, si possible). Et bien entendu, lorsque l'on clique sur un autre bouton bleu, les boutons jaunes du précédent s'enlèvent pour laisser place à ceux du nouveau, ainsi que si nous cliquons sur un autre bouton rouge, les boutons du "sous-menu" de gauche s'efface pour laisser place à de nouveaux. A noter que la longueur du sous-menu doit s'adapter à la longueur des boutons compris à l'intérieur de celui-ci (je précise que je souhaite que ce soit mes boutons (des images.png) qui se déroulent dans le sous-menu et qui sont visibles en rouge, et partout d'ailleurs, et non un menu déroulant basique).

Puis, deux autres soucis, plus mineurs :

- Comment faire pour que lorsque l'on passe la souris sur un bouton, celui-ci change d'apparence (avant de cliquer dessus) ? Je précise que j'ai déjà décliné les boutons en 2 formes de sorte à ce que ceci puisse se faire mais je ne connais pas le code CSS ou autre à mettre. J'ai pensé à "display: none" en CSS, mais, non. Je pense que cela requiert, comme le problème précédent, du Javascript.

- Comment faire un lecteur audio personnalisé ?



(je souhaite intégrer dans le block situé en haut à droite ; visible dans la pièce-jointe N°1). Je souhaite juste réaliser 1 picto décliné en 2 : 1 "haut parleur" qui émet du son (comme le haut parleur sur le clavier pour augmenter le son) et un autre qui n'en émet pas (en picto donc, comme le haut parleur qui coupe le son sur le clavier) et à côté une simple écriture "On" "Off" (en réalité, ce sont deux autres boutons, mais juste en écriture). La musique doit s'activer d'elle même lors de l'arrivée sur le site. Donc, c'est au préalable le picto avec haut parleur qui émet du son qui est visible, et, lorsque l'on clique sur celui-ci, il se change en haut parleur qui n'émet pas de son et coupe ainsi la musique. Idem pour "On" et "Off", lorsque l'on appuie sur "Off", cela coupe le son et met l'haut parleur en non émetteur et inversement avec "On" ; cela offre juste deux possibilité de couper ou remettre le son. La fonction ne doit pas "arrêter" (remettre à zéro) le son, mais le mettre en pause, et celui-ci doit être en boucle. Il n'y a qu'une seule chanson proposée. Encore une fois, c'est, je suppose, du Javascript.


Je vous remercie de votre attention.


Sakarov

Apprends le JavaScript (commence par le tutoriel à jour et fini par l'autre).
Pour le lecteur, vas voir le tutoriel sur soundmanager2.

J'ai pas le temps d'apprendre le JS. J'ai déjà appris le XHTML/CSS/PHP/SQL, le JS ce sera pour plus tard, là je ne peux pas. Je n'ai plus le temps !

Je pense que mon problème n'est pas bien compliqué pour un connaisseur en JS.

Un petit script que j'insère via une balise <script> dans mon code et hop, on en parle plus.

J'apprendrai le JS plus tard, mais là, c'est vraiment pas possible, j'ai plus du tout le temps !

Quelqu'un aurait-il la solution ?



Après tout, les forums c'est aussi pour ça, non ? Parce-que, quand je dis "mon problème relève du JS" et que je vois qu'on me répond "apprend le JS" >>> j'aurai pu le deviner tout seul.

Ce genre de commentaire à l'avenir : s'abstenir.

Merci

Citation : SAKAROV

Après tout, les forums c'est aussi pour ça, non ?

C'est là que tu te trompes. Les forums sont là pour t'aider. Pas pour faire le boulot à ta place.

Le principe du site du ZérO c'est de diriger vers les tutos du site du ZérO et de fournir un support aux membres qui les ont suivi ou qui débutent en général. A noter que "débutant" et "néophyte" est différent

Pour ta question, déjà je ne ferais pas deux niveaux de sous-menu entièrement en JS, surtout que visuellement tu les a séparé : c'est plus logique de faire changer de page pour faire apparaître la colonne de gauche, et ça va te simplifier la vie (parce que si non, à dieu le "j'insère via une balise <script> dans mon code et hop, on en parle plus".

En suite pour ton menu de gauche, ça s'appelle un menu accordéon (accordion en anglais). Tu trouveras plein de scripts tout prêts sur Internet. En général on te demande de mettre une class à tes éléments de menu, le script les récupère et comprend la structure du menu.

Certains scripts accordion (tous ?) sont dépendants d'une librairie comme JQery, Mootools ou Prototype pour fonctionner. C'est également un script à insérer. Au final tu pourrais te retrouver avec 100ko de scripts à charger juste pour ton menu.

Et pour ton problème de survole, il suffit d'avoir tes deux états sur une seule image et de modifier la propriété backgroun-position en CSS :ça s'appelle un sprite.

Salut Geoffroy, enfin un qui essaie tout du moins de m'éclairer.

(j'avais dis, pour les autres message du type "mal baisé" : s'abstenir)

Donc oui, peux-tu m'en dire plus sur le sprite ? Quelles sont les propriétés CSS à mettre bckground-image: ... ? Mais comment dire après via le :hover met celle-ci ou celle-là. Je vois pas bien.

En fait, et là je peux le certifier, ce n'est pas dans le cours de matheo sur le CSS. Je vais aller me renseigner sur le net en attendant, pour le "sprite" et pour "l'accordéon".

Merci à toi, geoffrey

Citation : SAKAROV

(j'avais dis, pour les autres message du type "mal baisé" : s'abstenir)

Ma vie sexuelle se porte à merveille. Merci.



Un exemple de script accordeon qui ne dépend d'aucune librairie :

http://www.leigeber.com/2009/03/accordion/

J'ai trouvé un tuto gééénial sur alsacréations (encore^^).

Lien

pour le sprite j'ai pas encore cherché, ce ne devrais pas être trop compliqué...

J'ai réédité mon post initial afin de mettre "Accordéon" (terme que j'ignorai) ; je pense que cela pourra en aider d'autres.

Attention, ton tuto alsacreations se base justement sur JQuery. Le lien posté par Sakarov est juste 10 fois mieux vu que apparemment le script ne pèse que 1.2ko (enfin peut-être une fois compressé parce que c'est vraiment peu).

Si non pour le sprite y'a rien de compliqué ! Tu as une image avec ton bouton en haut et ton bouton survolé en bas, tu utilises ce background pour ton lien, et pour l'état :hover tu ajoutes simplement un background-position top de la hauteur de ton bouton pour décaler le background.

HMMM, EUH, GEOFFREY, J AI RIEN COMPRIS

Citation : Geoffrey.

Si non pour le sprite y'a rien de compliqué ! Tu as une image avec ton bouton en haut et ton bouton survolé en bas, tu utilises ce background pour ton lien, et pour l'état :hover tu ajoutes simplement un background-position top de la hauteur de ton bouton pour décaler le background.

Je vois à peu près le truc que tu essaies d'me dire... mais, pas très exactement dsl

Pourrais-tu, je te prie, me donner un bref exemple dans un code ??



Sinon, tout autre chose, je pense avoir mal codé mon menu en haut, le "main menu" (les boutons rouges). Ca fonctionne, mais j'pense que j'm'y suis pris un peu moyennement...

j'ai fait cela :

.bouton_presentation_unselected

{
   position: absolute;
   margin-top: -1.50%;
   height: 90%;
   weight: 75%;
   margin-left: -49.70%;
   border: 0;
}

.bouton_skills_unselected

{
   position: absolute;
   margin-top: -1.50%;
   height: 90%;
   weight: 75%;
   margin-left: -33.075%;
   border: 0;
}

.bouton_experiences_unselected

{
   position: absolute;
   margin-top: -1.50%;
   height: 90%;
   weight: 75%;
   margin-left: -16.52%;
   border: 0;
}

.bouton_library_unselected

{
   position: absolute;
   margin-top: -1.50%;
   height: 90%;
   weight: 75%;
   margin-left: 0.1%;
   border: 0;
}

.bouton_hobbies_unselected

{
   position: absolute;
   margin-top: -1.50%;
   height: 90%;
   weight: 75%;
   margin-left: 16.7%;
   border: 0;
}

.bouton_projects_unselected

{
   position: absolute;
   margin-top: -1.50%;
   height: 90%;
   weight: 75%;
   margin-left: 33.355%;
   border: 0;
}

Bien entendu, là pour le moment (vu que j'ai pas tout compris pour le problème que Geoffrey aborde dans le 2nd paragraphe de son post, à savoir le bouton qui change de background lorsqu'on passe la souris dessus) il n'y a que les bouton "unselected" (non sélectionné, quoi ), après, quand j'aurai compris comment faire le "sprite", je mettrai en + dans le CSS des .bouton_selected cette fois, vu que ce sera les images des boutons "survolés" par la souris qui seront cliquables.

cherche encore à rollover css, image switching, background-position... y'a absolument rien de compliqué.

Au fait, le xhtml de ces boutons (rouges) de mon main_menu :

<div id="block_main_menu">

<p><img src="bouton_presentation_unselected.png" alt="bouton_presentation_unselected" class="bouton_presentation_unselected"/></p>
<p><img src="bouton_skills_unselected.png" alt="bouton_skills_unselected" class="bouton_skills_unselected"/></p>
<p><img src="bouton_experiences_unselected.png" alt="bouton_experiences_unselected" class="bouton_experiences_unselected"/></p>
<p><img src="bouton_library_unselected.png" alt="bouton_library_unselected" class="bouton_library_unselected"/></p>
<p><img src="bouton_hobbies_unselected.png" alt="bouton_hobbies_unselected" class="bouton_hobbies_unselected"/></p>
<p><img src="bouton_projects_unselected.png" alt="bouton_projects_unselected" class="bouton_projects_unselected"/></p>


</div>

Je ne devrais pas établir une liste horizontale plutôt ? J'ai remarqué que c'est ce qu'ont fait tous les sites (le sdz par ex.) avec un span, une liste. Mais je vois pas trop comment le faire avec des images (car je rappelle que tous mes boutons sont des images).

merci

Effectivement, faut pas du tout faire comme ça. Ton site n'est pas accessible et pas référençable en l'état.

Il te faut des liens, donc des balises a, avec un attribut href menant vers tes pages (même dans ton menu JS. Utilise return false pour ne pas changer de page) et avec un attribut alt qui dit exactement la même chose que l'intitulé des boutons sur tes images, si tu utilises des images.

T'as pas envie que ta page "expérience" soit référencée comme "bouton_experience_unselected" sur Gogole ou qu'un aveugle lise "bouton_experience_unselected" quand il demande à sa synthèse la site des liens (d'ailleurs en l'état aucun des deux ne renverraient de résultat... vu que tu n'as aucun lien).

Après oui, bien-sûr, c'est mieux de faire une liste vu qu'il s'agit d'une liste de liens et pas de paragraphes (!), mais c'est pas ton problème le plus urgent.

Après pour ton problème de rollover c'est clair que ça ne peut pas fonctionner : tu n'utilises pas de background, mais tu devrais, c'est bête de faire des images pour écrire du texte dans une typo aussi sobre.

La meilleure solution c'est donc de faire un truc du genre,

<ul id="main_menu">
   <li><a href="page.html">titre</a></li>
   <li><a href="page.html">titre</a></li>
   <li><a href="page.html">titre</a></li>
   <li><a href="page.html">titre</a></li>
   <li><a href="page.html">titre</a></li>
</ul>

de faire une seule image avec une cellule rouge, verte jaune et bleue dessus et de la mettre en background de tes liens avec une position différente selon l'état du lien ou sa class. Tu peux t'en sortir avec un seul png de 1ko plutôt que de faire 13 requêtes pour 13 fichiers de 400 octets, donc c'est pas "juste" accessible et référençable mais pratique et optimisé.

Citation : Geoffrey-Zéro

Le lien posté par Sakarov est juste 10 fois mieux vu que apparemment le script ne pèse que 1.2ko (enfin peut-être une fois compressé parce que c'est vraiment peu).

Plop. Moi c'est Golmote

glups

Y moyen de faire des images survolées directement dans dreamweaver

DW çaymal.

lol, je me passe des logiciels Adobe merci.

je pense qu'ici, on passe tous par un petit éditeur tout bidon mais au final plus puissant

Au fait, quelqu'un aurait un tuto intéressant sur SPIP ?