C'est la fin du projet CSSActif, vous trouverez les explications ici : Fin de CSSActif, ouverture du forum. Le forum reste cependant ouvert à tous et ses ressources sont entièrement disponibles. Merci à tous !
Derniers sujets
» Infobulle avec effets CSS3
Mar 17 Oct 2017, 21:59 par LaCrapul91

» Slideshow horizontal infini
Sam 14 Oct 2017, 05:23 par Mzlle Alice

» Effet pour vos catégories
Jeu 05 Oct 2017, 09:02 par Ollo

» Intégrateur html5 css3
Ven 22 Sep 2017, 03:45 par digi575

» Système d'onglets simple et personnalisable
Mer 20 Sep 2017, 08:35 par Moony

» Partenariats échange de liens
Mar 19 Sep 2017, 06:04 par digi575

» Vos partenaires dans le footer
Jeu 14 Sep 2017, 23:45 par ThunderTB

» Pack forum complet "Androïd Sylver" RPU (N°2)
Dim 10 Sep 2017, 10:34 par Leiris


Ce sujet est verrouillé, vous ne pouvez pas éditer les messages ou faire de réponses.Partagez | 
 

Problème code html agrandissement de l'image au passage de la souris

Voir le sujet précédent Voir le sujet suivant Aller en bas 
Voir le profil de l'utilisateur http://focus.keuf.net
avatar
{ Membre }
{ Membre }

Féminin 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!!!
MessageSujet: Problème code html agrandissement de l'image au passage de la souris   Sam 09 Fév 2013, 20:44
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://enaevolare.fr
avatar
Lostmindy
Lostmindy

Féminin Messages : 2851



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.



Ne me vouvoyez pas, merci (même si vous avez 15 ans de moins que moi, j'veux pas le savoir)
MessageSujet: Re: Problème code html agrandissement de l'image au passage de la souris   Dim 10 Fév 2013, 05:52
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://focus.keuf.net
avatar
{ Membre }
{ Membre }

Féminin 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.
MessageSujet: Re: Problème code html agrandissement de l'image au passage de la souris   Dim 10 Fév 2013, 07:56
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://www.infographizm.com
avatar
{ Membre }
{ Membre }

Masculin 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.


Il n'y a pas de mauvais navigateur, il n'y a que du mauvais code !
MessageSujet: Re: Problème code html agrandissement de l'image au passage de la souris   Dim 10 Fév 2013, 09:26
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://www.school-of-pub.net/forum.htm
avatar
{ Modérateur }
{ Modérateur }

Masculin 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é. Wink

Bonne journée.


MessageSujet: Re: Problème code html agrandissement de l'image au passage de la souris   Sam 16 Fév 2013, 06:59
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://www.school-of-pub.net/forum.htm
avatar
{ Modérateur }
{ Modérateur }

Masculin 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. Wink

Bonne soirée.


MessageSujet: Re: Problème code html agrandissement de l'image au passage de la souris   Mer 20 Fév 2013, 15:20
Revenir en haut Aller en bas
Contenu sponsorisé




MessageSujet: Re: Problème code html agrandissement de l'image au passage de la souris   
Revenir en haut Aller en bas
 

Problème code html agrandissement de l'image au passage de la souris

Voir le sujet précédent Voir le sujet suivant Revenir en haut 
Page 1 sur 1

 Sujets similaires

-
» Problème code html agrandissement de l'image au passage de la souris
» [résolu]Transition d'une image qui change au passage de la souris
» Faire glisser une image au passage de la souris. (résolu)
» Comment insérer une image dans les messages du forum ?
» roll-over, zone réactive, image et son

Permission de ce forum:Vous pouvez répondre aux sujets dans ce forum
CSSActif :: De la théorie à la pratique :: Aide CSS & xHTML :: Problèmes résolus-
Ce sujet est verrouillé, vous ne pouvez pas éditer les messages ou faire de réponses.

Partenaires Or


← Page précédente   ↑ Aller en haut Copyright © CSSActif 2009 - 2013 Tous droits réservés
Créer un forum | © phpBB | Forum gratuit d'entraide | Contact | Signaler un abus | Forumactif.com | Informatique et Internet | Outils pour Webmestres