Insérer une fenêtre dans une page web

phil b - 12 août 2009 à 09:24
avion-f16 Messages postés 19252 Date d'inscription dimanche 17 février 2008 Statut Contributeur Dernière intervention 10 février 2025 -
Bonjour,
Je voudrai insérer dans une fenêtre dans une page web. Dans cette fenêtre, je voudrai qu'elle affiche une autre page avec un scroller pour pouvoir faire défiler le texte ou la photo.

Je l'ai déjà fais avec javascript mais il ouvre une fenêtre supplémentaire par dessus la page en question.

voir: http://marmaillealacase.free.fr/Accueil.htm et cliquez sur la carte de Madagascar.

J'ai déjà vu des fenêtre intégrées sur internet mais je n'ai jamais pu récupérer la programmation.
Si quelqu'un peut m'éclairer, merci d'avance!

Philippe
A voir également:

5 réponses

Réponse 1 / 5
pazz
12 août 2009 à 14:25
c'est exactement ce que je te propose !

pour la tail il te faut la définir comme ceci 

var Fenetre = document.createElement('div') 
Fenetre.style.position = 'absolute' 
Fenetre.style.height = 150+'px';
Fenetre.style.width = 150+'px';
Fenetre.style.overflow = 'scroll';
Fenetre.innerHTML = 'ton contenu' ;
document.body.appendChild(Fenetre);


par contre je vois que tu essaie d'ajouter une page html ! ne pourais-tu pas ajouter simplement le text et autre par un innerHTML ?

pazz
2
phil b
12 août 2009 à 21:27
Bonsoir Pazz
C'est encore moi, j'ai trouvé une ancienne programmation avec "<iframe>". Cela faisait longtemps que je ne l'avais pas utilisée.
Voici comment je procédais:

<BODY>
blabla balblabla mon texte bndlknk jokrjkk,blabla blablalba
<iframe src="lily.htm" style=" border-width:0 " width="223" height="400" frameborder="1" scrolling="yes">désolé mais votre navigateur ne supporte pas les frames!
</iframe>
</BODY>

La fenêtre ne s'affiche pas là où je voudrai mais cela reste l'idée de ce que je veux. Il me reste à positionner la frame à l'endroit voulu de la page, j'avais réussi avec javascript en écrivant:

("Mada1.htm", "catWin", "toolbar=0,location=0,directories=0,,scrollbars=1,resizable=1,width=420,height=550,left=590,top=100" )

Je ne sais pas le faire en "HTML" ou alors, je la met dans une cellule d'un tableau?

bye et à la prochaine
Philippe
0
Réponse 2 / 5
phil b
12 août 2009 à 16:43
Bonsoir Pazz

Ce n'est pas le résultat que j'attendais, car je voudrai que la fenêtre soit incluse dans la page sans clic pour ouvrir et que je puisse mettre une photo dans sa taille normale. Cette fenêtre doit avoir une position et une taille prédéfinie comme je fait à cette adresse:

http://marmaillealacase.free.fr/Accueil.htm

L'internaute dois pouvoir naviguer à l'intérieur avec les scrolls et c'est pour cela que j'ai fait appel à une autre page "Mada1.htm" qui contien une photo plus grande que la fenêtre.

Dans la programmation que tu m'as fait, le texte s'affiche après un clic mais je ne sais pas comment faire pour mettre une photo à la place du texte.

Si tu as autre chose, je suis preneur.Merci!
Bye
Philippe
1
Réponse 3 / 5
pazz
14 août 2009 à 08:25
il te suffi de mettre ton image a la place du text comme ceci 

Fenetre.innerHTML = "<img src='ton image' />";


pour le scroll c'est overflow:scroll;

et enfin pour le click il te suffi de charger le script au chargement de la page comme ceci

window.onload = function(){
//ton script
}
1
phil b
15 août 2009 à 13:58
Bonjour Pazz
C'est encore moi, j'ai essayé avec la modif Fenetre.innerHTML = "<img src=Images/mada046.jpg />"; mais ça ne fonctionne pas, je pense qu'il doit me manquer quelque chose.

J'ai quand même réussi à le faire en procédant différemment en utilisant "iframe" et un tableau mais je pense que tu doit pouvoir faire le même résultat avec ta programmation. Regarde à cette adresse:

https://www.118712.fr/sortir.html
Si tu as la solution envoie la programmation entière depuis <body> jusqu'à </body>

Bye et merci encore
Philippe
0
pazz
15 juil. 2010 à 02:02
je m'amusai a sieuter les vieux topic et voila désolé je n'avais pas re regardé, alors oui c'est une solution le problème principal avec les iframe c'est les moteur de recherche (google) il vont pas pouvoir lire le contenu de ton iframe... quoi que si.. mais tu risque d'avoir des liens qui pointe directement sur l'image et c'est pas top. et c'est également lourd, et pas standars, et j'en passe.

utilise le css! (google recherche css tuto) c'est simple et efficace, tu ajoute simplement ton image dans une balise "div" et ensuite ajoute la propriété scroll.
0
Réponse 4 / 5
avion-f16 Messages postés 19252 Date d'inscription dimanche 17 février 2008 Statut Contributeur Dernière intervention 10 février 2025 4 507
15 juil. 2010 à 11:37
Salut.

Si ce que tu cherches à faire est l'effet avec foncissement de l'arrière-plan, il faut utiliser (ou faire) un script de lightbox.

Perso je préfère Shadowbox-JS.
1

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 5
pazz
12 août 2009 à 09:45
Salut,

Il te faut créer un div via javascript par exemple et y insérer le contenu

exemple:

HTML: 
<img src='tonimage' onclick='CreatFenetre();' />


Javascript: 

function CreatFenetre(){
var Fenetre = document.createElement('div')
     Fenetre.style.position = 'absolute'
     ...... les autre style
    Fenetre.innerHTML = 'ton contenu'
    document.body.appendChild(Fenetre);
}


pour le sroll tu peut le faire en css en mettant overflow:scroll;

voila

Pazz
0
phil b
12 août 2009 à 11:50
Bonjour pazz
J'ai recopier la programmation mais ce n'est pas ce que j'attendais, je voudrai pouvoir définir la largeur de la fenêtre, sa position, et qu'elle ait un scrolling pour la faire défiler car la page appelée sera plus grande que la fenêtre dans laquelle elle se situe.

Voici le contenu de ma page:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Insertion d'une fenetre</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body>Blablabla mont texte Blablabla mont texte Blablabla mont texte Blablabla mont texte Blablabla mont texte Blablabla mont texte Blablabla mont texte Blablabla mont texte Blablabla mont texte
<img src='mada046.JPG' width="200" height="150" onclick='CreatFenetre();' />
<SCRIPT LANGUAGE="JAVASCRIPT">

function CreatFenetre(){
var Fenetre = document.createElement('div')
Fenetre.style.position = 'absolute'
...... les autre style
Fenetre.innerHTML = 'lily.htm'
document.body.appendChild(Fenetre);
}
</script>
</body>
</html>

La page que je veux inclure s'appelle "lily.htm" et comporte déjà une photo.

Je ne pourrai pas te répondre avant ce soir car je vais bosser!
Merci pour continuer à me donner des conseils.
Bye
Philippe
0