Ce que je recherche, c'est d'avoir plusieurs iFrames (ou quelque chose de similaire) sur une page, dont l'un survient lorsque la taille d'un survol est agrandie. Par défaut, ils ne devraient montrer qu'une partie de la page. Par exemple, la plupart des iFrames auront des graphiques ou des graphiques. Je me demandais s'il y avait un moyen pour moi de ne voir que le graphique/graphique et en plus, lorsque survolée sur l'iFrame peut se développer en largeur et en hauteur. J'apprécierais grandement si quelqu'un peut fournir des recommandations/des pointeurs/des extraits de code à propos de la même chose autour de jsp/jquery/java script/css ou quelque chose de similaire. Merci d'avance!Plusieurs iFrames étendent sur le vol stationnaire

2011-01-14 Piyush Mattoo

jQuery -

 $(document).ready(function() { 
     $("#frame-1").mouseover(function() { 
      $(this).attr({width: 800, 
          height: 500}); 
      }).mouseleave(function() { 
       $(this).attr({width: 300, 
           height: 400}); 
       }); 
      });

w/HTML -

<html> 
<head> 
    <title>Frame Enlargementationing</title> 
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> 
    <script type="text/javascript"> 
     $(document).ready(function() { 
      $("#frame-1").mouseover(function() { 
       $(this).attr({width: 800, 
           height: 500}); 
       }).mouseleave(function() { 
        $(this).attr({width: 300, 
            height: 400}); 
        }); 
       }); 
    </script> 
</head> 
</html> 
<body> 

<h1>Hover:</h1> 
<iframe id="frame-1" src="http://jquery.com/" width="300" height="400"></iframe> 


</body> 
</html>

Source

2011-01-14 07:30:55 Andrew

Oh, et je suggère de changer le 'z-index' de l'image lorsque vous passez la souris dessus (à quelque chose de plus élevé que tout le reste sur la page). – Andrew

+1 pour vos suggestions. Ils étaient très utiles. Cependant, ce dont j'ai vraiment besoin, c'est d'être capable de voir une partie de la page HTML et, en vol stationnaire, elle peut se développer comme elle le fait maintenant. Par exemple, la plupart des iFrames auront des diagrammes ou des graphiques. Je me demandais s'il y avait un moyen pour moi de ne voir que le graphique/graphique par défaut et, en plus, en survolant le iFrame peut augmenter en largeur et en hauteur. J'apprécierais grandement s'il y a des recommandations à ce sujet. –

Ne comprend pas vraiment ce que vous essayez de faire. = /. – Andrew

Vous pouvez faire une classe CSS CSS qui rend le iframe plus grand.

Par exemple:

iframe { 
width: 500px; 
height: 700px; 
} 

iframe:hover { 
width: 700px; 
height: 900px; 
}

Je ne suis pas 100% sûr si cela fonctionnera avec iframes ... mais il vaut la peine d'essayer!

Source

2011-01-14 07:11:08

Je viens mis à jour ma réponse ... Il a dit "vol stationnaire" et a changé à "actif". –

Je pense que "hover" est en fait celui qu'il veut –

Merci pour vos suggestions. Cependant, j'ai dû modifier la question un peu. –

vous pouvez essayer cette astuce,

CSS

iframe { 
    width: 100%; 
    height: 100%; 
} 

div { 
    width: 300px; 
    height: 200px; 
} 

div.hover { 
    width: 400px; 
    height: 300px; 
}

html

<div> 
    <iframe src="http://google.com"></iframe> 
</div>

jquery

$('div').hover(function(){ 
    $(this).addClass('hover'); 
}, 
function(){ 
    $(this).removeClass('hover'); 
});

demo

Source

2011-01-14 07:22:00 Reigel

Ceci est bon et pour plusieurs iFrames, je peux leur donner des ID séparés et agrandir la largeur/hauteur en fonction de cet ID. Cependant, j'ai dû modifier la question un peu ici. –

Plusieurs iFrames étendent sur le vol stationnaire

Répondre

demo

Questions connexes