WebSite X5Help Center

 
M. Philippe
M. Philippe
User

Comment créer une image déroulante?  fr

Auteur : M. Philippe
Visité 2588, Followers 2, Partagé 0  
Mots-clés :: déroulante,image

Bonjour @ tous,

Savez comment créer une image qui se déroule sur la gauche ou la droite au passage de la souris? Je voudrais insérer des images de faible largeur,verticalement, sur ma page d'accueil et que lorsqu'on passe la souris dessus, l'image se déroule sur la gauche, laissant apparaître l'image entière. Plusieurs images seraient créées côte à côte de cette façon.

Merci aux futurs répondeurs et experts que vous êtes.

@ bientôt Phil

Posté le
15 RéPONSES - 1 CORRECT
JiPeR 48
JiPeR 48
Moderator

Salut Philippe, je suis bien embêté pour t'aider car mon ordi principal est "bien" planté depuis deux jours et je n'ai pas encore réussi à le relancer (j'y bosse....). Là j'écris sur un portable tout neuf sur lequel je n'ai pas encore installé les produits Incomedia (ni le reste d'ailleurs (rire)).

Il existe, je crois, des scripts qui permettent de faire ça (pour des menus genre accordéon en vertical qui se développe vers la droite ou la gauche... qui devraient pouvoir s'adapter à des images simples (?)) mais je n'ai pas en mémoire.

Si Mimoune ou Bernard passent par là, ils devraient pouvoir nous éclairer... en attendant que je retrouve tous mes petits (merci d'avance les modos...Wink.)

Bonne continuation en attendant, ...J.P.

Lire plus
Posté le de JiPeR 48
M. Philippe
M. Philippe
User
Auteur

Merci Jiper, en espérant que puisse rapidement retrouver tes petits!!!!

Lire plus
Posté le de M. Philippe
Andrea M.
Andrea M.
User

Bonjour,

je me permet un petit message en passant: avez-vous essayé de mettre les images dans un objet texte et d'activer la fonction rollover?

Si vous ne cherchez rien de très élaboré cela pourrait peut être vous convenir.

Bonne continuation

Lire plus
Posté le de Andrea M.
M. Philippe
M. Philippe
User
Auteur

bsr crazy boy,

je vais essayer ce que vous me préconisez!!

je ne manquerais pas de poster si cela fonctionne.

merci

Lire plus
Posté le de M. Philippe
Andrea M.
Andrea M.
User

Bonsoir,

je viens d'essayer et chez moi aucun soucis. A vous de voir selon vos envies: défilement vertical, horizontal, continu ou unique...

A bientôt

Lire plus
Posté le de Andrea M.
M. Philippe
M. Philippe
User
Auteur

merci,

j'ai donc juste à insérer une image à la place d'un texte et après ?

serait il possible d'avoir la manip à réaliser?

merci merci crazy,

bonne soirée

phil 

Lire plus
Posté le de M. Philippe
G. SAM
G. SAM
User

Bonjour, si c'est cela que vous recherchez, voici un script que j'utilise souvant, fonctionne a merveille à mettre dans le body ou vous le souhaitez dans la page :

<SCRIPT LANGUAGE="JavaScript1.2"><!-- Begin //largeur du curseur (en pixels) var sliderwidth=700 //hauteur du curseur (Netscape) var sliderheight=200 //vitesse de défilement var slidespeed=4

//les images var leftrightslide=new Array() var finalslide=''

leftrightslide[0]='<img src="images/pref1.jpg" border=1></a>' leftrightslide[1]='<img src="images/pref2.jpg" border=1></a>' leftrightslide[2]='<img src="images/pref3.jpg" border=1></a>' leftrightslide[3]='<img src="images/pref4.jpg" border=1></a>' leftrightslide[4]='<img src="images/pref5.jpg" border=1></a>' leftrightslide[5]='<img src="images/pref6.jpg" border=1></a>' leftrightslide[6]='<img src="images/pref7.jpg" border=1></a>' leftrightslide[7]='<img src="images/pref8.jpg" border=1></a>' leftrightslide[8]='<img src="images/pref9.jpg" border=1></a>' leftrightslide[9]='<img src="images/pref10.jpg" border=1></a>' leftrightslide[10]='<img src="images/pref11.jpg" border=1></a>'

/* dynamicdrive.com */ ///////Ne rien modifier sous cette ligne////////////////////////////////////

var copyspeed=slidespeed for (i=0;i<leftrightslide.length;i++) finalslide=finalslide+leftrightslide[i]+"  "

if (document.all){ [removed]('<marquee id="ieslider" scrollAmount=0 style="width:'+sliderwidth+'">'+finalslide+'</marquee>') ieslider.onmouseover=new Function("ieslider.scrollAmount=0") ieslider.onmouseout=new Function("if (document.readyState=='complete') ieslider.scrollAmount=slidespeed") }

function regenerate(){ [removed].reload() } function regenerate2(){ if (document.layers){ document.ns_slider01.visibility="show" setTimeout("window.onresize=regenerate",450) intializeleftrightslide() } if (document.all) ieslider.scrollAmount=slidespeed }

function intializeleftrightslide(){ document.ns_slider01.document.ns_slider02.[removed]('<nobr>'+finalslide+'</nobr>') document. ns_slider01.document.ns_slider02.document.close() thelength=document.ns_slider01.document.ns_slider02.document.width scrollslide() }

function scrollslide(){ if (document.ns_slider01.document.ns_slider02.left>=thelength*(-1)){ document.ns_slider01.document.ns_slider02.left-=slidespeed setTimeout("scrollslide()",100) } else{ document.ns_slider01.document.ns_slider02.left=sliderwidth scrollslide() } } window.onload=regenerate2

// End --></SCRIPT>

Lire plus
Posté le de G. SAM
M. Philippe
M. Philippe
User
Auteur

oulala tout ce charabia pour moi!!! et au final ça donnerait quoi? où puis je voir le résultat?

Merci pour ton aide Ganem.EmbarassedSealed

@ ++++

phil

Lire plus
Posté le de M. Philippe
M. Philippe
M. Philippe
User
Auteur

Pour Crazy!

salut j'ai essayé de faire comme tu m'as dit mais l'image ne fait que bouger de droite à gauche avec le roll over. Ce que je veux c'est que l'image se déplie en quelque sorte lorsque je clique dessus vers la droite ou la gauche.

Merci @ ++++

phil

Lire plus
Posté le de M. Philippe
Andrea M.
Andrea M.
User

A pardon, ce n'est pas ce que j'avais saisi!

Pour un effet un peu complexe de ce type, mieux vaut s'orienter vers des scripts tout faits.

Certains s'achètent sur le net, comme sur ce site: http://codecanyon.net/item/jquery-slider-evolution/270714?sso?WT.ac=search_item&WT.seg_1=search_item&WT.z_author=aeroalquimia

Cette page mène sur un slider assez connu. Beaucoup d'autres existent. Des solutions gratuites également, mais avec une aide moins poussée pour l'installation.

Sur le site que j'ai indiqué, il suffit de parler 3 mots d'anglais et le vendeur explique tout pour installer correctement le script acheté!

Lire plus
Posté le de Andrea M.
M. Philippe
M. Philippe
User
Auteur

Bonjour, voici ce que j'ai trouvé et qui correspond exactement à ce que je veux! mais avec un défilement sur la gauche au lieu de vers le haut.....

le site n'est pas terrible mais bon; voici l'adresse: http://www.lacrampeauxdoigts.com/?p=6624

avis aux amateurs de codes et de nouvelles techniques.

merci et @ bientôt

phil

Lire plus
Posté le de M. Philippe
M. Philippe
M. Philippe
User
Auteur

mais non mais non!!!!!

Les logos marqués face book, twetter etc et les autres présents sous les images de la figurine (pas les photos de la figurine...;) 

Je sais pas si mon message initial a été correctement compris par tout le monde. il est bien marqué "lorsqu'on passe la souris dessus, l'image se déroule sur la gauche, laissant apparaître l'image entière"

dans le cas présent l'image se déroule vers le haut....

Merci et bonne soirée @ tous

phil

Lire plus
Posté le de M. Philippe
JiPeR 48
JiPeR 48
Moderator

Et oui on était à côté de la plaque car ta demande n'était (franchement) pas claire Laughing

Les boutons "logos" qui montent au passage de la souris sont fait à partir de "Shareaholic" qu'on peut voir ici :

http://www.shareaholic.com/publishers/sharing/

et je ne vois vraiment pas comment adapter ce type de présentation à des images, ni comment les faire bouger dans un autre sens, sauf à étudier le code et voir s'il est modifiable comme tu le souhaiterais... le code apparaît quand on clique sur "Choose your platform and customize your icons" puis sur "Next", puis choix de la plate-forme, puis "Get Buttons"...

@+, ...J.P.

Lire plus
Posté le de JiPeR 48
M. Philippe
M. Philippe
User
Auteur

Merci Jiper!

enfin je vais pouvoir tenter de faire ce déroulé.

merci beaucoup.

Lire plus
Posté le de M. Philippe