Charger une iframe à partir d'un hover/mouseover

Répondre


Cette question est un moyen d’empêcher des soumissions automatisées de formulaires par des robots.
Smileys
:D :) :( :o :shock: :? 8-) :lol: :x :P :oops: :cry: :evil: :twisted: :roll: :wink: :!: :?: :idea: :arrow: :| :mrgreen: =D> #-o =P~ :^o :non: :priere: 8-|
Voir plus de smileys
  Revue du sujet
 

  Étendre la vue Revue du sujet : Charger une iframe à partir d'un hover/mouseover

Re: Charger une iframe à partir d'un hover/mouseover

par niuxe » 29 nov. 2013, 18:11

Salut,

Je t'invite à suivre cette piste :
[javascript]
var blocReactif = document.querySelector('#cheminVersBlocReactif');


blocReactif.addEventListener('mouseover',function(){
if(document.getElementById('unId').length == 0){
var strUrlIframe = 'http://lien-iframe.com',
iframeBlocReactif = document.createElement('iframe'),
iframeBlocReactif.setAttribute('src',strUrlIframe),
iframeBlocReactif.setAttribute('id','unId');


document.getElementById('elementParentIframe').appendChild(iframeBlocReactif);

}


},false);
[/javascript]
code fait de tête. Je peux m'être trompé

Charger une iframe à partir d'un hover/mouseover

par tototo175 » 27 nov. 2013, 21:35

Salut,
Aidez moi s'il vous plait, j'ai une page avec pleins d'iframe mais si tous charge en même temps, ça fait pas beau, tout est ralenti !
Alors je souhaite savoir comment empêcher le chargement des iframe et ainsi l'utilisateur pourra passer la souris au dessus d'un lien ("aperçu") pour que l'iframe se charge.
Voilà mon code (un echo de php) où il y a les iframe :
a.tooltip em {
    display:none;
}
a.tooltip:hover {
    border: 0;
    z-index: 500;
    text-decoration:none;
}
a.tooltip:hover em {
    font-style: normal;
    display: block;
    position: fixed;
    top: 50px;
    left:37.5%;
    padding: 0px;
    color: #000;
    border: 2px solid rgba(127,101,150, 0.7);
    background: #EDF6FF;
    width:25%;
    height:300px;
}
<h3>Fichiers du cahier de texte :</h3><?php
    if (is_dir("./ressources"))
    {
    if ($dh = opendir("./ressources"))
        {
            while (($file = readdir($dh)) !== false )
            {
            if($file != '.' && $file != '..')
            {
            $path_parts = pathinfo($file);
            $ext = $path_parts['extension'];
            $nom = $path_parts['filename'];
            $nom = ucwords($nom);
            setlocale(LC_TIME, 'fr_FR.utf8','fra');
            date_default_timezone_set('Europe/Paris');
            $datecode=filemtime('ressources/'.$file);
            $date=utf8_encode(strftime("%A %d %B %Y, %Hh", $datecode));
            $date=ucfirst($date);
                if($ext=='ppsx')
                {
                $lien='#';
                }else{
                $lien='ressources/'.$file;
                }
            echo '<table><tr>
            <td><a rel="nofollow" class="tooltip" href="ressources/'.$file.'" target="_blank">
            <img src="'.$lien.'" style="padding:10px;height:50px;color: #000;border: 2px             solid;rgba(127,101,150, 0.7);background: #EDF6FF;" alt="&nbsp;Aperçu&nbsp;"     title="Aperçu">
            <em><iframe style="overflow:hidden;border:0px;" width="100%" height="300px" src="'.    $lien.'"></iframe></em></a>
            &nbsp;&nbsp;––&nbsp;&nbsp;
            <a rel="nofollow" class="tooltip" href="ressources/'.$file.'" target="_blank">'.$nom.'</a>
            <span style="font-size:10px;">&nbsp;&nbsp;––&nbsp;&nbsp;'.$date.'</span></td>
            </tr></table><br>';
 
                if($_SESSION['verif']=='admin')
                {
echo '<form action="ressources.php" method="post">
<input type="hidden" name="delete" value="' . $file . '"/>
<input type="submit" name="submit" value="Supprimer" /></form><br>';
                }
            }
        }
    closedir($dh);
    }
    }
    ?>
    </center>
J'ai la marche à suivre :
On stocke les src des iframe dans un attribut data-src (HTML5). Quand l'utilisateur passe la souris au-dessus d'une iframe, on récupère data-src, et on le met dans src, ce qui charge l'iframe.
Puis quand l'utilisateur met la souris en dehors, on supprime l'attribut src.
Mais je ne sais pas trop comment faire :(

Aidez moi s'il vous palit !!
merci d'avance :)