Scrollbar en image

docteurvander · 23 Mars 2007

Bonjour à tous!
Je suis en train de développer un site perso. Je rencontre un problème sur une page en particulier:
http://www.docteurvander.info/dossier.php
Dans l'encadré "dossier" s'affiche un texte et en dessous, dans le "post-it", s'affiche la liste des dossiers (leur titre). Pour l'instant il n'y en a que deux mais il va bien falloir que je trouve un moyen de placer un ascenseur pour dérouler la liste (avec une div en overflow dans ma CSS).
Mon problème: je voudrais que ma scrollbar soit faite à partir d'une image pour que ça colle avec le design de la page. Cela a été fait sur ce site par exemple: http://www.angryblue.com/main.shtml. J'ai cherché partout sur le web mais je n'ai rien trouvé à part un moyen de changer la couleur des ascenseurs... mais je trouve ça bof d'autant plus que ça ne marche pas avec tout les navigateurs.
Bref, si quelqu'un a une idée je suis preneur...

Merci d'avance!!!!
PS: ma CSS ne passe que sous IE pour l'instant malheureusement... soyez indulgents!.. :roll:

e-kiwi · 23 Mars 2007

alors il va falloir le faire en javascript ou flash (beurk)

exemple : http://www.dyn-web.com/dhtml/scroll/

Seraph · 23 Mars 2007

Super joli en tout cas ton site!

opale-cia · 23 Mars 2007

docteurvander a dit:
Cela a été fait sur ce site par exemple: http://www.angryblue.com/main.shtml.

tu donnes la réponse dans ta question... regarde comment fonctionne le script dans la source d'angryblue, tu verras que c'est du javascript.
D'ailleurs c'est sympatique comme effet.

docteurvander · 23 Mars 2007

e-kiwi ->> ARGH!... it's in english!... Merci beaucoup pour cette piste en tout cas! je vais essayer d'y comprendre quelque chose...

Seraph ->> Merci!

opale-cia ->> J'ai bien regardé la source de la page mais je n'ai pas compris comment cela avait été fait... je n'ai, par exemple trouvé aucun lien vers l'image des flèches... enfin bref, je vais tester le lien d'e-kiwi et je reviendrai très probablement vers vous si ça ne marche pas.... :roll:

Merci pour votre réactivité en tout cas!!

opale-cia · 23 Mars 2007

docteurvander a dit:
opale-cia ->> J'ai bien regardé la source de la page mais je n'ai pas compris comment cela avait été fait... je n'ai, par exemple trouvé aucun lien vers l'image des flèches... enfin bref, je vais tester le lien d'e-kiwi et je reviendrai très probablement vers vous si ça ne marche pas....

suffit de chercher un peu... les fleches n'existent pas en tant que tel, elle font parti du fond, regarde ce point la :

Code:

<td valign="top" class="body"><img src="images/LeftPage1.jpg" width="425" height="140" alt="" border="0"><br><img src="images/LeftPage2.jpg" width="425" height="115" alt="" border="0"><br><img src="images/LeftPage3.jpg" width="425" height="130" alt="" border="0"><br><img src="images/LeftPage4.jpg" width="425" height="79" alt="" border="0"></td>

L'espèce d'empreinte digitale se trouve ici :

Code:

<!-- div laying above scrollbar for netscape 6 protection | change: top + left + width + height -->
<span id="ruler" style="position: absolute; top: 195px; left: 374px; width: 25px; height: 37px; z-index: 4;"></span>

et le script, qui est libre et date de 2001 est la http://www.angryblue.com/angryblue_scroll.js

// Made by geeeet[at]ghtml.com
// Keep these two lines and you're free to use this code

Avec ça tu devrais t'en sortir

Leonick · 23 Mars 2007

docteurvander a dit:
PS: ma CSS ne passe que sous IE pour l'instant malheureusement... soyez indulgents!.. :roll:

p't'être à cause de problèmes de validation. Du genre <body> mis après un <div> :roll:
Sinon, je trouve le texte assez compact. Il faudrait agrandir un peu la police et aérer les paragraphes.
Sinon, jolie présentation

docteurvander · 2 Avril 2007

Ha ben voilà, j'y suis arrivé! Donc merci pour votre aide et vos commentaires!
... Bon par contre... C'est un tel bordel dans mes balises que finalement je n'arrive pas à l'intégrer dans la page que je voulais... (autrement, dans mes pages de test, qui ne font pas appelle à mon "template", ca fonctionne)...
Enfin ce n'est qu'une question de temps puisque j'ai capté comment ça marchait.
Encore merci et à bientot!