IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

HTML Discussion :

Affichage d'un PDF dans la page avec "onmouseover"


Sujet :

HTML

  1. #1
    Membre à l'essai
    Profil pro
    Inscrit en
    Octobre 2010
    Messages
    21
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Octobre 2010
    Messages : 21
    Points : 10
    Points
    10
    Par défaut Affichage d'un PDF dans la page avec "onmouseover"
    Bonjour,
    Souhaitant faire afficher un PDf sur une portion de ma page .html avec le survol de la sourie sur un texte, j'ai opter pour la combinaison onmouseover + document.getbyelementid + embed (iframe ne fonctionne pas dans mon cas)
    le code est fonctionnel mais ne répond pas exactement a mon besoin...
    d'abord le code puis mes espérances

    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    #eval{
    	position:absolute;
    	left:19.63%;
    	top:31.91%;
    	width:79.36%;
    	height:66.7%;
    }
    #texte_eval {
    	position:absolute;
    	left:13.3%;
    	top:76%;
    	font-size: 0.9em;
    }
    #texte_eval:over {
    	position:absolute;
    	left:13.3%;
    	top:76%;
    	font-size: 0.9em;
    }
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    <div id="corps"> 
    	<div id="texte_eval">
    		<h1><a href="#" onmouseover="document.getElementById('eval').style.visibility = 'visible';" 
    		onmouseout="document.getElementById('eval').style.visibility = 'hidden';">mon pdf</a></h1>
    	</div>
    		<embed id="eval" src="mon_pdf.pdf#toolbar=0" frameborder="0" height="100%" width="100%"></embed>
    </div>

    et maintenant mes deux problèmes avec ce code :
    1/ le pdf est visible des le chargement de la page et un premier "onmouseover" doit être fait pour le voir disparaître et remplir sa véritable fonction (comme plusieurs PDF doivent être visualisés au même endroit sur le même principe sur plusieurs liens, ça deviens problématique)

    2/ le second problème viens du fait de l'espace réduit pour afficher le PDF, du coup, il y a un ascenseur sur le PDF mais des que je sort la sourie du texte pour me jeter le PDF...pouf plus de PDF.
    bref faudrait réussir a garder le "lien" actif sur la droite, j'y suis arrivé a force de <span> et autre <br> mais vers le bas
    voici le second code qui diffère pas tant que ça du premier mais je le trouve plus.... "capilotracté"
    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    #eval{
    	position:absolute;
    	left:19.63%;
    	top:31.91%;
    	width:79.36%;
    	height:66.7%;
    }
    #texte_eval {
    	position:absolute;
    	left:13.3%;
    	top:76%;
    	font-size: 0.9em;
    }
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    <!-- on mousse over eval -->
    <div id="corps"> <!-- on mousse over eval -->	
    	<div id="texte_eval">	
    		<span onmouseover="document.getElementById('eval').style.visibility = 'visible';">
    			<h1><span onmouseout="document.getElementById('eval').style.visibility = 'hidden';">
    				<a href="#">mon pdf</a></h1>
    			<span><embed id="eval" src="mon_pdf.pdf#toolbar=0" frameborder="0" height="100%" width="100%"></embed></span><br>	
    		</span></span><br>
    </div>

    Donc voila, je suppose qu'il y a un moyen en jouant sur la position de mon texte et du onmouseout mais j'ai beau le tourner et le retourner dans tous les sens (sauf le bon bien sur), j'y arrive pas.

    Voila si quelqu'un a un idée magique, je suis preneur...Ha! oui, je débute et je viens a peine de commencer a regarder du coté PHP il y a moins de 24h...si possible je préférerai une solution HTML / CSS ( si bien sur cela est possible)

    une autre petite précision si on remplace "embed" par "iframe" lorsqu'il n'a pas de pdf, on a bien un genre de page broken qui s'affiche en lieu et place mais dés que le lien est valide...bah ça fonctionne plus.

    Merci d'avance

  2. #2
    Modérateur
    Avatar de Vil'Coyote
    Homme Profil pro
    Développeur adélia & Web
    Inscrit en
    Février 2008
    Messages
    4 583
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 43
    Localisation : France, Isère (Rhône Alpes)

    Informations professionnelles :
    Activité : Développeur adélia & Web
    Secteur : Industrie

    Informations forums :
    Inscription : Février 2008
    Messages : 4 583
    Points : 7 503
    Points
    7 503
    Par défaut
    1. ton 'eval' n'est pas masqué au démarrage de ta page d'ou l'affichage dès le début et le masquage dès le passage sur le 'onmouseover' / 'onmouseout'
    2. liée au code mouseover/mouseout comme tu déplace ta souris normale que le PDF disparaisse. la solution rapide que je vois serait de faire plutôt deux bouton 'afficher' 'masquer' mais de ne plus jouer avec mouseover / mouseout
    la vie n'est pas cirrhose des foies ...

    Avant de poster un message Rechercher n'est pas qu'une option.
    FAQ Web - Tuto Web

  3. #3
    Membre à l'essai
    Profil pro
    Inscrit en
    Octobre 2010
    Messages
    21
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Octobre 2010
    Messages : 21
    Points : 10
    Points
    10
    Par défaut
    Bon, j'ai résolue un de mes problèmes, en jouant sur le CSS, j'ai rajouté un width sur le texte, du coup on peux aller sur le pdf
    je met le code
    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
     
    #eval{
    	position:absolute;
    	left:19.63%;
    	top:-291.91%;
    	width:119.36%;
    	height:476.7%;
    }
    #texte_eval {
    	position:absolute;
    	left:13.3%;
    	top:76%;
    	width:59.36%;
    	font-size: 0.9em;
    }

    l'html reste inchangé (c'est le second, celui avec les <span>

    pour la visualisation du PDF au chargement de la page, je vais essayer de faire comme avec les menues déroulant en l'affichant a l’extérieur de la page.

  4. #4
    Membre à l'essai
    Profil pro
    Inscrit en
    Octobre 2010
    Messages
    21
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Octobre 2010
    Messages : 21
    Points : 10
    Points
    10
    Par défaut
    j'ai également résolue mon second problème :
    un simple :

    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
     
    embed{
    visibility: hidden;
    }

    cache le PDF au chargement de la page
    Donc, je clos le post

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Affichage PDF dans une page
    Par julio02200 dans le forum WebDev
    Réponses: 1
    Dernier message: 30/09/2008, 16h43
  2. Affichage d'un flux pdf dans une page html
    Par NizarK dans le forum Servlets/JSP
    Réponses: 2
    Dernier message: 27/03/2007, 09h41
  3. [W3C] Probleme avec un pdf dans une page
    Par mael94420 dans le forum Balisage (X)HTML et validation W3C
    Réponses: 7
    Dernier message: 14/09/2006, 12h09

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo