> Tous les forums > Forum des Webmasters
 popup image dans un texteSujet résolu
Ajouter un message à la discussion
Page : [1] 
Page 1 sur 1
chinart
  Posté le 03/11/2008 @ 12:48 
Aller en bas de la page 
Astucien

Bonjour,

Je voudrais dans un texte, qu'au passage de la souris un popup avec une image se declenche.Je n'arrive pas à faire le lien avec un mot qui est dans le texte,par la suite je voudrais plusieurs popup dans un texte.

par exemple:bien le bonjour webmasters de pc astuces....et voudrais donc un popup sur le mot bonjour(donc une image)un autre sur webmasters avec une autre image etc...

Voilà le premier script que j'ai uttilisé(à la base il semble qu'il ne soit que pour le texte)

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head>
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type"><title>popup texte</title>

</head><body>
<script language="JavaScript">
<!--
var fenetreNote=null;
function afficheNote(message, couleurFond, fond, couleurTexte, typePolice, tailleCaracteres) {
fenetre = window.open('','Note','toolbar=no,location=no,directories=no,status=no,scrollbars=no,resizable=yes,copyhistory=no,' + 'width=250' + ',height=100');
fenetreNote = fenetre;
if (fenetreNote != null) {
doc = fenetre.document;
texte = '<' + 'HTML' + '><' + 'HEAD' + '><' + 'TITLE' + '>' + message + '</' + 'TITLE' + '><' + '/HEAD' + '><' + 'BODY BACKGROUND=' + '"' + fond + '"' + ' BGCOLOR=' + '"' + couleurFond + '">';
texte += '<CENTER>';
texte +='<FONT FACE="' + typePolice +'"';
texte += ' SIZE=' + tailleCaracteres;
texte += ' COLOR=' + '"' + couleurTexte +'">';
texte += message + '</CENTER> </FONT>';
texte += '</' + 'BODY' + '><' + '/HTML' + '>';
doc.write(texte);
doc.close();
}
}
function fermerNote() {
if (fenetreNote != null) {
fenetreNote.close( );
fenetreNote = null;
}
}
//-->
</script>
<a href="http://www.votre-site.com" onmouseover="afficheNote('Aller sur le site a l adresse URL :http://1erclicdiabloedit.free.fr.','blue','','#FFFFFF','VAG Rundschrift D',4)" onclick="fermerNote()">Le lien a survoler pour ouvrir la POPUP</a>
</body></html>

Voila le segond que j'ai modifié pour avoir une image à la place

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head><script><endnote><head>
<script><endnote><head>
<script></script>
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type"><title>POPUP IMAGE</title>

</head><body>
<script language="JavaScript">
<!--
var fenetreNote=null;
function afficheNote(message, couleurFond, fond, couleurTexte, typePolice, tailleCaracteres) {
fenetre = window.open
("about:blank", "pop", "width=500,height=500");
fenetreNote = fenetre;
if (fenetreNote != null) {
fen.document.write("<img src='monimage.jpg'>");
}
}
function fermerNote() {
if (fenetreNote != null) {
fenetreNote.close( );
fenetreNote = null;
}texte = '<' + 'HTML' + '><' + 'HEAD' + '><' + 'TITLE' + '>' + message + '</' + 'TITLE' + '><' + '/HEAD' + '><' + 'BODY BACKGROUND=' + '"' + fond + '"' + ' BGCOLOR=' + '"' + couleurFond + '">';
texte += '<CENTER>';
texte +='<FONT FACE="' + typePolice +'"';
texte += ' SIZE=' + tailleCaracteres;
texte += ' COLOR=' + '"' + couleurTexte +'">';
texte += message + '</CENTER> </FONT>';
texte += '</' + 'BODY' + '><' + '/HTML' + '>';
doc.write(texte);
doc.close();
}
//-->
</script>
<a href="http://www.votre-site.com" onmouseover="afficheNote('Aller sur le site a l adresse URL :http://1erclicdiabloedit.free.fr.','blue','','#FFFFFF','VAG Rundschrift D',4)" onclick="fermerNote()">Le lien a survoler pour ouvrir la
POPUP</a><br><br><br><br><br><br><br><br>
</body></html>

merci et bonne journée

Publicité
chinart
 Posté le 03/11/2008 à 14:38 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Astucien

bon j'avance... je suis "arrivé" à faire le lien sur un mot.par contre je n'arrive pas à afficher l'image que j'ai télechargé chez mon hébergeur,quand je met l'adresse dans mon navigateur,pas de probléme,mais dans le script je dois la "mettre"au mauvais endroit ? le cadre s'ouvre mais pas d'image(la taille de mon image et mon cadre sont les memes)

je cherche...merci si vous avez une idée

chinart
 Posté le 03/11/2008 à 17:46 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Astucien

bon aprés trois heures de "bidouillage" un petit up.....

Dreamer
 Posté le 03/11/2008 à 18:05 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Maître astucien

Je ne comprends pas trop ce que tu veux faire ...........Un popup avec une image dedans au survol d'un mot ???

elle
 Posté le 03/11/2008 à 19:27 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Grande Maîtresse astucienne

Ça se fait très bien en CSS. Je t'ai déjà donné des liens...

Afficher / Masquer des éléments sans javascript



Modifié par elle le 03/11/2008 19:28
chinart
 Posté le 04/11/2008 à 06:30 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Astucien

,elle & dreamer

ellle,Encore Merci,c'est exactement ca,

chinart
 Posté le 04/11/2008 à 07:47 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Astucien

RE,

je n'arrive pas à faire apparaitre une image

une idée?

elle
 Posté le 04/11/2008 à 08:26 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Grande Maîtresse astucienne

Tu as fait quoi au juste?

chinart
 Posté le 04/11/2008 à 08:35 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Astucien

elle

<body>
<a href="">afficher le calque<span>texte et images peuvent être placés ici</span></a>
</body>

à la place de "afficher le calque",j'ai mis le lien de mon image http://monimage.com

voilà

Publicité
elle
 Posté le 04/11/2008 à 08:36 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Grande Maîtresse astucienne

Et dans la feuille de styles?

chinart
 Posté le 04/11/2008 à 08:39 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Astucien


<style type="text/css">
<!--
a {
text-decoration: none; /* définition du lien qui affichera le "calque" */
}
a:hover {
background: none; /* correction d'un bug IE */
}
a span { /* définition de la balise <span> inclue dans <a> */
display: none;
}
a:hover span { /* définition de la balise <span> au survol */
display: inline;
position: absolute;
top: 200px; /* positions et dimensions du calque, que vous pouvez changer à loisir */
left: 100px;
width: 250px;
height: 100px;
background: green;
text-align: center;
color: white;
}
-->
</style>

j'ai juste modifié les dimensions

chinart
 Posté le 04/11/2008 à 11:25 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Astucien

encore un essai avec la balise <img>url pas d'image

kalinka
 Posté le 04/11/2008 à 12:46 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Astucienne

tu dois modifier ton lien et mettre l'url de ton image entre les span avec un simple img src

<a href="">ici le mot qui sera survolé<span><img src="liendetonimage">
</span></a>

tu peux aussi inclure une legende en dessous ton image

<a href="">ici le mot qui sera survolé<span><img src="liendetonimage"><br>le texte de ta legende
</span></a>



Modifié par kalinka le 04/11/2008 12:58
chinart
 Posté le 04/11/2008 à 17:17 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Astucien

Kalinka

merci pour ta réponse,j'ai essayé mais je ne vois toujours pas mon image,j'ai maintenant dans le rectangle" img src =http://www.mon image" (c'est normalement l'adresse de mon image,et elle fonctionne dans mon navigateur)mais pas avec le popup

si quelqu'un pouvais à partir du code pouvais me faire un essai,avec une image que je comprenne mon erreur

Merci

kalinka
 Posté le 04/11/2008 à 17:49 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Astucienne

tu n'aurais pas oublier de mettre les < > autour de la ligne ?

<a href="">ici le mot qui sera survolé<span><img src="liendetonimage"><br>le texte de ta legende
</span></a>



Modifié par kalinka le 04/11/2008 17:50
chinart
 Posté le 04/11/2008 à 18:01 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Astucien

j'avais "oublié"les <>

elle
 Posté le 04/11/2008 à 18:03 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Grande Maîtresse astucienne

Je ne ris pas, non...

Publicité
elle
 Posté le 04/11/2008 à 18:04 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Grande Maîtresse astucienne

Dis, tu utilises quoi comme éditeur de code? Tu as la coloration syntaxique?

kalinka
 Posté le 04/11/2008 à 18:06 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Astucienne

c'est toujours les choses les plus simples qu'on oublie je m'en suis aperçue d'autant plus vite que j'ai fait la meme erreur lorsque j'ai testé le code

chinart
 Posté le 04/11/2008 à 18:37 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Astucien

elle ,je suis avec komposer pour faire le site,(pas de coloration) et j'ai notpad,pour faire des "test" encore MERCI kalinka

elle
 Posté le 04/11/2008 à 19:00 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Grande Maîtresse astucienne

D'après les copies d'écran que j'ai vues, il y a la coloration syntaxique sur Kompozer. Ça te permettrait de voir rapidement les erreurs de ce genre...

Page : [1] 
Page 1 sur 1

Vous devez être connecté pour participer à la discussion.
Cliquez ici pour vous identifier.

Vous n'avez pas de compte ? Créez-en un gratuitement !
Recevoir PC Astuces par e-mail


La Lettre quotidienne +226 000 inscrits
Avec l'actu, des logiciels, des applis, des astuces, des bons plans, ...

Les bonnes affaires
Une fois par semaine, un récap des meilleurs offres.

Les fonds d'écran
De jolies photos pour personnaliser votre bureau. Une fois par semaine.

Les nouveaux Bons Plans
Des notifications pour ne pas rater les bons plans publiés sur le site.

Les bons plans du moment PC Astuces

Tous les Bons Plans
22,99 €Webcam Aukey FullHD à 22,99 € (via coupon)
Valable jusqu'au 11 Mai

Amazon propose la webcam Webcam Aukey FullHD à 22,99 € grâce à un coupon à activer sur la page du produit. On la trouve habituellement autour de 29,99 €. Cette webcam offre une résolution FullHD 1080p pour une vidéo claire et nette et intègre deux microphones réduisant les bruits de fond. De plus, un cache de protection vous offre une sécurité supplémentaire et une tranquillité d'esprit lorsque vous n'utilisez pas la webcam. Elle est compatible Windows, Mac et Android. 


> Voir l'offre
22,95 €McAfee Total Protection 2021 (10 appareils, 1 an) à 22,95 €
Valable jusqu'au 08 Mai

Amazon fait une promotion sur la suite antivirus McAfee Total Protection 2021 qui passe à 22,95 €. Cette protection intégrale alliant antivirus, protection de l'identité et protection de la confidentialité des données pour tous vos PC, Mac, smartphones et tablettes est valide pour 10 appareils pendant 1 an. La clé d'activation ainsi que le lien de téléchargement vous seront envoyés par email une fois la commande passée. Une bonne affaire.


> Voir l'offre
64,48 €Ecouteurs intra-auriculaires sans fil Bluetooth Jabra Elite 65t à 64,48 € livrés
Valable jusqu'au 07 Mai

Amazon Allemagne fait une promotion sur les écouteurs intra-auriculaires sans fil Bluetooth Jabra Elite 65t qui passent à 59,50 € (avec la TVA ajustée). Comptez 4,98 € pour la livraison en France soit un total de 64,48 € livrés. On les trouve ailleurs à partir de 100 €. Pensés pour vous permettre de vivre votre musique comme vous l'entendez et pour assurer des conversations d'une grande clarté, les écouteurs Jabra Elite 65t ont tout pour vous séduire ! Côté son, l'égaliseur personnalisable vous permet d'ajuster le rendu sonore tandis que la technologie avancée à quatre microphones supprime les bruits de fond lors des appels pour des conversations limpides. Au quotidien, ces écouteurs Jabra restent parfaitement en place et proposent même une fonction de commande vocale simplifiée. Enfin, vous apprécierez les 5 heures d'autonomie avec une seule charge, qui se transforment en 15 heures avec l'étui de recharge compact.  Le Jabra Elite 65t est certifié IP55 et offre une garantie de 2 ans contre l’humidité et la poussière. Où que vous soyez et quelle que soit votre activité, vous profitez d’une liberté absolue pour les appels et la musique. 

Vous pouvez utiliser votre compte Amazon France sur Amazon Allemagne et il n'y a pas de douane.


> Voir l'offre

Sujets relatifs
Insertion texte dans une image a un endroit précis
Agrandir image dans popup au survol de la souri
insérer du texte dans une image avec frontpage
editeur TinyMCE grande largeur texte dans page
Texte dans tableau
Bulle de texte dans une zone cliquable
Image Pub dans PCa
changer mon image d'entête dans le code htlm blogger
Insertion image dans page Web directement sans URL ?
Listes - Espace entre la puce (image) et le texte
Plus de sujets relatifs à popup image dans un texte
 > Tous les forums > Forum Forum des Webmasters