|
 Posté le 03/11/2008 @ 12:48 |
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
|
|
|
|
|
|
Posté le 03/11/2008 à 14:38 |
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  |
|
Posté le 03/11/2008 à 17:46 |
Astucien
| bon aprés trois heures de "bidouillage" un petit up.....
|
|
Posté le 03/11/2008 à 18:05 |
 Maître astucien | Je ne comprends pas trop ce que tu veux faire ...........Un popup avec une image dedans au survol d'un mot ??? |
|
Posté le 03/11/2008 à 19:27 |
 Grande Maîtresse astucienne | |
|
Posté le 04/11/2008 à 06:30 |
Astucien
| ,elle & dreamer
ellle,Encore Merci,c'est exactement ca,
|
|
Posté le 04/11/2008 à 07:47 |
Astucien
| |
|
Posté le 04/11/2008 à 08:26 |
Grande Maîtresse astucienne | Tu as fait quoi au juste? |
|
Posté le 04/11/2008 à 08:35 |
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à  |
|
Posté le 04/11/2008 à 08:36 |
Grande Maîtresse astucienne | Et dans la feuille de styles? |
|
Posté le 04/11/2008 à 08:39 |
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 |
|
Posté le 04/11/2008 à 11:25 |
Astucien
| encore un essai avec la balise <img>url  pas d'image |
|
Posté le 04/11/2008 à 12:46 |
 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 |
|
Posté le 04/11/2008 à 17:17 |
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 |
|
Posté le 04/11/2008 à 17:49 |
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 |
|
Posté le 04/11/2008 à 18:01 |
Astucien
| |
|
Posté le 04/11/2008 à 18:03 |
Grande Maîtresse astucienne | |
|
Posté le 04/11/2008 à 18:04 |
Grande Maîtresse astucienne | Dis, tu utilises quoi comme éditeur de code? Tu as la coloration syntaxique? |
|
Posté le 04/11/2008 à 18:06 |
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
|
|
Posté le 04/11/2008 à 18:37 |
Astucien
| elle ,je suis avec komposer pour faire le site,(pas de coloration) et j'ai notpad,pour faire des "test" encore MERCI kalinka |
|
Posté le 04/11/2008 à 19:00 |
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... |
|
|
|
|
|
popup image dans un texte
À LA UNE
PRATIQUE
LOGITHÈQUE
TABLETTE ET MOBILE
BONS PLANS
FONDS D'ÉCRAN
JEUX
FORUM
Ça se fait très bien en CSS. Je t'ai déjà donné des liens...
