CSSActif, le forum, n'est plus maintenu. Il est néanmoins disponible pour consultation. Pour des outils pratiques, rendez-vous sur: Découvrez CSSActif, une collection d'outils et de tutoriels interactifs pour les développeurs Web — HTML, CSS, JavaScript et bien plus! |
| Problème code html agrandissement de l'image au passage de la souris | |
| Alainna
{ Membre }
Messages : 27
| Bonsoir! Alors voilà mon problème. Déjà je suis ultra débutante pour ce qui est question du codage donc désolée si je dis ou fait des bêtises! J'ai créé grâce à un tuto un effet carrousel pour les images que je veux mettre dans un article de mon blog. Problème on peut les voir en grandquand on clique dessus mais j'aimerais plutôt que l'image s'agrandisse lorsque l'on passe la souris dessus. Ou alors qu'elle s'ouvre dans une "box" mais ça j'ai regardé un peu et ça a l'air assez compliqué pour moi. Si j'ai bien compris, dans le code html, je devrais modifier au niveau de onmouseover et onmouseout pour pouvoir faire cela mais je ne sais pas du tout quoi faire par rapport à mon code pour que ça marche. Le voici. - Code:
-
<head><script type="text/javascript" title="carrousel_v2"> // Carousel Slideshow II - By Harry Armadillo function carousel(params){ if(!(params.width>0 && isFinite(params.width)))params.width=200; //Réglez la largeur via celle de vos images. if(!(params.height>0 && isFinite(params.height)))params.height=150; //Réglez la hauteur via celle de vos images. if(!(params.sides>2 && isFinite(params.sides)))params.sides=4; if(!(params.steps>0 && params.steps<100 && isFinite(params.steps)))params.steps=20; if(!(params.speed>0 && isFinite(params.speed)))params.speed=8; if(!(params.image_border_width>=0 && isFinite(params.image_border_width)))params.image_border_width=0; if(isFinite(params.id)||!params.id)params.id='bad_id_given_'+Math.random(); document.write("<div style='position:relative;overflow:hidden;' id='"+params.id.replace(/[^a-zA-Z0-9]+/g,'_')+"'></div>"); var cdiv=document.getElementById(params.id.replace(/[^a-zA-Z0-9]+/g,'_')) cdiv.style.width=params.width+'px'; cdiv.style.height=params.height+'px'; cdiv.style.border=params.border; cdiv.style.position='relative'; cdiv.style.overflow='hidden'; cdiv.title=params.id; var counter=0,spinning=true,interval=Math.floor(60000/params.sides/params.steps/params.speed)-5; interval=isNaN(interval)?200:interval; var img_position=[],images=[],img_dimension=[]; var img_index=params.images.length+1,img_index_cap=2*params.images.length; var faces=Math.ceil(params.sides/2), dimension, direction, targ, attr, faraway; function init(){ if(params.direction=="left" || params.direction=="right"){ direction=params.direction; dimension="width"; } else if(params.direction=="top" || params.direction=="bottom"){ direction=params.direction; dimension="height"; } else { direction="left"; dimension="width"; } faraway=(direction=="left"||direction=="top")?'-20000px':'20000px'; cdiv.style[dimension]=params[dimension]/(params.size_mode=='image'?Math.sin(Math.PI/params.sides):1)+'px'; var img=new Image(); img.style.position='absolute'; img.style[direction]=faraway; img.style.width=params.width-2*params.image_border_width+'px'; img.style.height=params.height-2*params.image_border_width+'px'; img.style.border=(params.image_border_width||0)+'px solid '+params.image_border_color; for(var i=0;i<params.images.length;i++){ images[i]=img.cloneNode(true); images[i].src=params.images[i]; if(params.links && params.links[i] && params.links[i]!=''){ targ=params.lnk_targets && params.lnk_targets[i]||params.lnk_base||'new'; if(targ=="_blank"){ attr=(params.lnk_attr && params.lnk_attr[i])?",'"+params.lnk_attr[i]+"'":""; images[i].onclick=new Function("window.open('"+params.links[i]+"','"+targ+"'"+attr+")"); } else if(targ.substr(0,1)=="_"){ images[i].onclick=new Function(targ.substr(1)+".location='"+params.links[i]+"'"); } else{ attr=(params.lnk_attr && params.lnk_attr[i])?",'"+params.lnk_attr[i]+"'":""; images[i].onclick=new Function("var t='"+targ+"';if(window[t]){try{window[t].close()}catch(z){}}window[t]=window.open('"+params.links[i]+"',t"+attr+");window[t].focus()"); } images[i].style.cursor=document.all?'hand':'pointer'; } if(params.titles && params.titles[i] && params.titles[i]!='') images[i].title=params.titles[i]; if(document.all) images[i].alt=images[i].title; images[i+params.images.length]=images[i]; if(params.images.length==faces) images[i+2*params.images.length]=images[i]; cdiv.appendChild(images[i]); } var face_size=params.size_mode=='image'?params[dimension]:params[dimension]*Math.sin(Math.PI/params.sides); var face_offset=params[dimension]*Math.cos(Math.PI/params.sides)/(params.size_mode=='image'?Math.sin(Math.PI/params.sides):1)/2-.5; var pi_piece=2*Math.PI/params.steps/params.sides; for(i=0;i<=params.steps*faces;i++){ img_dimension[i]=face_size*Math.sin(pi_piece*i); img_position[i]=(i<params.steps*params.sides/2)?Math.floor(params[dimension]/2/(params.size_mode=='image'?Math.sin(Math.PI/params.sides):1)-face_offset*Math.cos(pi_piece*i)-img_dimension[i]/2)+'px':faraway; img_dimension[i]=img_dimension[i]-2*params.image_border_width>1?Math.ceil(img_dimension[i])-2*params.image_border_width+'px':'1px'; } } init(); cdiv.rotate = function(){ setTimeout('document.getElementById("'+cdiv.id+'").rotate()',interval); if(!spinning) return; if(++counter>=params.steps){ counter=0; if(++img_index>=img_index_cap) img_index=params.images.length; } images[img_index-faces].style[direction]=faraway; for(var i=faces-1;i>=0;i--){ images[img_index-i].style[direction]=img_position[counter+i*params.steps]; images[img_index-i].style[dimension]=img_dimension[counter+i*params.steps]; } } cdiv.onmouseover=function(){ spinning=false; } cdiv.onmouseout=function(){ spinning=true; } setTimeout('document.getElementById("'+cdiv.id+'").rotate()',100); } </script> </head> <body><SCRIPT language="JavaScript" title="carrousel_v2" type="text/javascript"> carousel({id:'Mes Images', //Enter arbitrary but unique ID of this slideshow instance border:'', size_mode:'image', //Enter "carousel" or "image". Affects the width and height parameters below. width:250, //Enter width of image or entire carousel, depending on above value height:80, //Enter height of image or entire carousel, depending on above value sides:6, //# of sides of the carousel. What's shown = sides/2. Even integer with sides/2< total images is best steps:40, //# of animation steps. More = smoother, but more CPU intensive speed:2, //Speed of slideshow. Larger = faster. direction:'left', //Direction of slideshow. Enter "top", "bottom", "left", or "right" images:[ 'http://img11.hostingpics.net/pics/714429Makeupbordeaux5.jpg', 'http://img11.hostingpics.net/pics/489752Makeupbordeaux6.jpg', 'http://img11.hostingpics.net/pics/184985Makeupbordeaux.jpg', 'http://img11.hostingpics.net/pics/616775Makeupbordeaux4.jpg'], links: [ 'http://img11.hostingpics.net/pics/714429Makeupbordeaux5.jpg', //Entrez vos liens URL pour chaque lien image. 'http://img11.hostingpics.net/pics/489752Makeupbordeaux6.jpg', 'http://img11.hostingpics.net/pics/184985Makeupbordeaux.jpg', 'http://img11.hostingpics.net/pics/616775Makeupbordeaux4.jpg'], lnk_targets:[ 'http://img11.hostingpics.net/pics/714429Makeupbordeaux5.jpg', 'http://img11.hostingpics.net/pics/489752Makeupbordeaux6.jpg', 'http://img11.hostingpics.net/pics/184985Makeupbordeaux.jpg', 'http://img11.hostingpics.net/pics/616775Makeupbordeaux4.jpg', '_self' ], titles:[ 'Mon image 000', 'Mon image 001', 'Mon image 002', 'Mon image 003'], image_border_width:0, image_border_color:'none' }); </SCRIPT></body> Je vous serais super reconnaissante si vous pouviez m'aider! Je sais que je suis pas loin de trouver la réponse mais vu que je bidouille un peu à l'aveugle ça ne sert à rien et puis c'est difficile de trouver pour moi vu que ce n'est pas moi qui ait construit ce code! Je préfère demander de l'aide. Merci beaucoup d'avance!!! | | |
| | | 'Christa
Lostmindy
Messages : 2856
| Bonjour,
Je suis inquiète quant à la structure de ton document, j'espère qu'il ne commence pas en réalité par juste <head> , auquel cas je te dirais d'aller lire un cours de HTML avant de vouloir faire des choses compliquées.
Pour le reste, ne site sur lequel tu as trouvé ton carrousel ne documente-t-il pas son utilisation ?
Je ne suis malheureusement pas encore au point en Javascript, donc il te faudra attendre l'intervention d'Espeon ou de Chinelle, mais on gagnerait du temps si tu nous donnait l'adresse de la page contenant ton carrousel, ainsi que le code complet, histoire qu'on puisse voir ce qu'il en est.
Je rappelle également que CSSActif se concentre sur les forums de ForumActif, en d'autres termes le support pour d'autre plateformes (en l’occurrence, ton blog) ne fait pas partie de nos services. | | |
| | | Alainna
{ Membre }
Messages : 27
| Bonjour,
Alors comme je le précisais en haut oui je suis débutante et je fais peut-être des bêtises. Apparemment c'est le cas vu ce que tu me dis. Pour être franche j'ai fait comme ils disaient et le carroussel marche très bien alors je ne me suis pas trop posée de questions sur la construction du code je dois bien l'avouer. Désolée si ça fait hérisser les poils des experts en codage. Voici le lien où j'ai trouvé le code et non ils ne répondent pas à la question que je me pose.
http://chez-swan.net/wiki/faire-un-carrousel-multi-directionnel
Et j'ai conscience que ce forum propose normalement ses services uniquement pour d'autres forums mais j'ai pensé que vous pourriez quand même m'aider. Si c'est non et bien tant pis j'irais trouver de l'aide ailleurs.
Merci quand même pour ta réponse. | | |
| | | Manumanu
{ Membre }
Messages : 49
| Salut, Je ne me suis pas penché très longtemps sur le code, mais essaie de le modifier comme suit (remplace tout en fait) : - Code:
-
<head><script type="text/javascript" title="carrousel_v2"> // Carousel Slideshow II - By Harry Armadillo function carousel(params){ if(!(params.width>0 && isFinite(params.width)))params.width=200; //Réglez la largeur via celle de vos images. if(!(params.height>0 && isFinite(params.height)))params.height=150; //Réglez la hauteur via celle de vos images. if(!(params.sides>2 && isFinite(params.sides)))params.sides=4; if(!(params.steps>0 && params.steps<100 && isFinite(params.steps)))params.steps=20; if(!(params.speed>0 && isFinite(params.speed)))params.speed=8; if(!(params.image_border_width>=0 && isFinite(params.image_border_width)))params.image_border_width=0; if(isFinite(params.id)||!params.id)params.id='bad_id_given_'+Math.random(); document.write("<div style='position:relative;overflow:hidden;' id='"+params.id.replace(/[^a-zA-Z0-9]+/g,'_')+"'></div>"); var cdiv=document.getElementById(params.id.replace(/[^a-zA-Z0-9]+/g,'_')) cdiv.style.width=params.width+'px'; cdiv.style.height=params.height+'px'; cdiv.style.border=params.border; cdiv.style.position='relative'; cdiv.style.overflow='hidden'; cdiv.title=params.id; var counter=0,spinning=true,interval=Math.floor(60000/params.sides/params.steps/params.speed)-5; interval=isNaN(interval)?200:interval; var img_position=[],images=[],img_dimension=[]; var img_index=params.images.length+1,img_index_cap=2*params.images.length; var faces=Math.ceil(params.sides/2), dimension, direction, targ, attr, faraway; function init(){ if(params.direction=="left" || params.direction=="right"){ direction=params.direction; dimension="width"; } else if(params.direction=="top" || params.direction=="bottom"){ direction=params.direction; dimension="height"; } else { direction="left"; dimension="width"; } faraway=(direction=="left"||direction=="top")?'-20000px':'20000px'; cdiv.style[dimension]=params[dimension]/(params.size_mode=='image'?Math.sin(Math.PI/params.sides):1)+'px'; var img=new Image(); img.style.position='absolute'; img.style[direction]=faraway; img.style.width=params.width-2*params.image_border_width+'px'; img.style.height=params.height-2*params.image_border_width+'px'; img.style.border=(params.image_border_width||0)+'px solid '+params.image_border_color; for(var i=0;i<params.images.length;i++){ images[i]=img.cloneNode(true); images[i].src=params.images[i]; if(params.links && params.links[i] && params.links[i]!=''){ targ=params.lnk_targets && params.lnk_targets[i]||params.lnk_base||'new'; if(targ=="_blank"){ attr=(params.lnk_attr && params.lnk_attr[i])?",'"+params.lnk_attr[i]+"'":""; images[i].onmouseover=new Function("window.open('"+params.links[i]+"','"+targ+"'"+attr+")"); } else if(targ.substr(0,1)=="_"){ images[i].onmouseover=new Function(targ.substr(1)+".location='"+params.links[i]+"'"); } else{ attr=(params.lnk_attr && params.lnk_attr[i])?",'"+params.lnk_attr[i]+"'":""; images[i].onmouseover=new Function("var t='"+targ+"';if(window[t]){try{window[t].close()}catch(z){}}window[t]=window.open('"+params.links[i]+"',t"+attr+");window[t].focus()"); } images[i].style.cursor=document.all?'hand':'pointer'; } if(params.titles && params.titles[i] && params.titles[i]!='') images[i].title=params.titles[i]; if(document.all) images[i].alt=images[i].title; images[i+params.images.length]=images[i]; if(params.images.length==faces) images[i+2*params.images.length]=images[i]; cdiv.appendChild(images[i]); } var face_size=params.size_mode=='image'?params[dimension]:params[dimension]*Math.sin(Math.PI/params.sides); var face_offset=params[dimension]*Math.cos(Math.PI/params.sides)/(params.size_mode=='image'?Math.sin(Math.PI/params.sides):1)/2-.5; var pi_piece=2*Math.PI/params.steps/params.sides; for(i=0;i<=params.steps*faces;i++){ img_dimension[i]=face_size*Math.sin(pi_piece*i); img_position[i]=(i<params.steps*params.sides/2)?Math.floor(params[dimension]/2/(params.size_mode=='image'?Math.sin(Math.PI/params.sides):1)-face_offset*Math.cos(pi_piece*i)-img_dimension[i]/2)+'px':faraway; img_dimension[i]=img_dimension[i]-2*params.image_border_width>1?Math.ceil(img_dimension[i])-2*params.image_border_width+'px':'1px'; } } init(); cdiv.rotate = function(){ setTimeout('document.getElementById("'+cdiv.id+'").rotate()',interval); if(!spinning) return; if(++counter>=params.steps){ counter=0; if(++img_index>=img_index_cap) img_index=params.images.length; } images[img_index-faces].style[direction]=faraway; for(var i=faces-1;i>=0;i--){ images[img_index-i].style[direction]=img_position[counter+i*params.steps]; images[img_index-i].style[dimension]=img_dimension[counter+i*params.steps]; } } cdiv.onmouseover=function(){ spinning=false; } cdiv.onmouseout=function(){ spinning=true; } setTimeout('document.getElementById("'+cdiv.id+'").rotate()',100); } </script> </head> <body><script title="carrousel_v2" type="text/javascript"> carousel({id:'Mes Images', //Enter arbitrary but unique ID of this slideshow instance border:'', size_mode:'image', //Enter "carousel" or "image". Affects the width and height parameters below. width:250, //Enter width of image or entire carousel, depending on above value height:80, //Enter height of image or entire carousel, depending on above value sides:6, //# of sides of the carousel. What's shown = sides/2. Even integer with sides/2< total images is best steps:40, //# of animation steps. More = smoother, but more CPU intensive speed:2, //Speed of slideshow. Larger = faster. direction:'left', //Direction of slideshow. Enter "top", "bottom", "left", or "right" images:[ 'http://img11.hostingpics.net/pics/714429Makeupbordeaux5.jpg', 'http://img11.hostingpics.net/pics/489752Makeupbordeaux6.jpg', 'http://img11.hostingpics.net/pics/184985Makeupbordeaux.jpg', 'http://img11.hostingpics.net/pics/616775Makeupbordeaux4.jpg'], links: [ 'http://img11.hostingpics.net/pics/714429Makeupbordeaux5.jpg', //Entrez vos liens URL pour chaque lien image. 'http://img11.hostingpics.net/pics/489752Makeupbordeaux6.jpg', 'http://img11.hostingpics.net/pics/184985Makeupbordeaux.jpg', 'http://img11.hostingpics.net/pics/616775Makeupbordeaux4.jpg'], lnk_targets:[ 'http://img11.hostingpics.net/pics/714429Makeupbordeaux5.jpg', 'http://img11.hostingpics.net/pics/489752Makeupbordeaux6.jpg', 'http://img11.hostingpics.net/pics/184985Makeupbordeaux.jpg', 'http://img11.hostingpics.net/pics/616775Makeupbordeaux4.jpg', '_self' ], titles:[ 'Mon image 000', 'Mon image 001', 'Mon image 002', 'Mon image 003'], image_border_width:0, image_border_color:'none' }); </script></body>
Sinon, donne-nous également la page en question ? Voir le résultat nous donnera une idée plus précise des éventuels problèmes et nous permettra de t'aider plus facilement (et éventuellement te proposer une alternative plus moderne et pratique, car le code proposé sur le site de chez-swan n'est pas forcément très bon. | | |
| | | Murtagh
{ Modérateur }
Messages : 1492
| Bonjour, Ton problème est-il toujours d'actualité ? Les précédentes réponses t'ont-elles aidée ? Merci de nous tenir informé sous quatre jours, sans quoi ce sujet sera archivé. Bonne journée. | | |
| | | Murtagh
{ Modérateur }
Messages : 1492
| Bonsoir, Malgré notre précédente relance, nous restons sans réponse de ta part. Je me permets donc de déplacer ton sujet. Si celui-ci n'était pas résolu, il faudra en ouvrir un autre. Bonne soirée. | | |
| | | Contenu sponsorisé
| | | | | Problème code html agrandissement de l'image au passage de la souris | |
|
Sujets similaires | |
|
| Permission de ce forum: | Vous ne pouvez pas répondre aux sujets dans ce forum
| |
| |
| |
|
| Partenaires Or
|