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
» Avatar centré dans le profil
Aujourd'hui à 06:57 par Xueia

» Sous-forums en retour à la ligne
Aujourd'hui à 06:42 par Invité

» Previsualiser le premier message d'un sujet
Dim 10 Déc 2017, 11:38 par amhoul

» Changer le nom de la Chatbox
Ven 08 Déc 2017, 11:25 par Cookie-Coyote

» [RPG] Fiche de présentation
Jeu 07 Déc 2017, 17:01 par Invité

» Qui Est En Ligne - Utopia
Mer 06 Déc 2017, 10:48 par PanzerBlitz-1

» Image de fond dans les tables du forum (PHPBB2)
Mer 06 Déc 2017, 10:31 par Cookie-Coyote

» Effet pour vos sous-forums
Ven 01 Déc 2017, 05:35 par Chocapic


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
» [Sans réponse + d'un mois] Probléme fichier Html
» Faire glisser une image au passage de la souris. (résolu)
» Comment insérer une image dans les messages du forum ?

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