N'afficher qu'une partie d'une image externe

**josse34** · 28/10/2011, 10h07

Bonjour à tous!

Je chercher désespérément un moyen en html ou php de n'afficher que la moitié basse d'une image ou page externe.

Je m'explique, je veux afficher la carte météo d'un site externe mais seulement la partie Sud, ou si scrolling, au moins que cette image soit de base avec le scrolling en bas et que je n'ai rien à faire manuellement.

Voici le code en question pour afficher une page PHP externe s'actualisant toutes les 15secondes :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
<iframe 
src="http://www.visiometeo.com/images/cartes_meteo/meteoaccueilmini1.php" 
frameborder="0"  marginheight="200" height="219" scrolling="No" 
width="434"></iframe>

La balise marginheight ne fonctionne pas. Dans cet exemple, seul la partie haute de la France est bien affiché, je veux exactement le même rendu mais pour le sud de la France!!!

Questions secondaires mais tout aussi importantes pour moi :
-Comment faire de meme avec une image?
-Comment réduire ou agrandir un image provenant d'une source externe??

Je vous remercie grandement pour votre aide!

Merci et bonne journée

Bye

**Vil'Coyote** · 28/10/2011, 10h42

Questions secondaires mais tout aussi importantes pour moi :
-Comment faire de meme avec une image?
-Comment réduire ou agrandir un image provenant d'une source externe??

pour ta 1er question est celles indiquées juste au dessus. regarde du côté de curl. cela te permet de récupérer les données d'un site externe. Dans le cadre de ta 2eme question cela te permettrais de récupérer l'image en question à raison que celle ci ne change pas de nom toutes les 30s.

pour l'agrandissement / rétrécissement d'une image. vois du côté du php. mais il est a noter que garder le ratio n'est pas facile et une image de mauvaise qualité en petite taille est horrible lors de l'agrandissement.

**NoSmoking** · 28/10/2011, 19h01

as tu essayé l'encapsulation dans des DIV, dans le style...?

Code :

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
20
21
22
23
24
<!DOCTYPE html>
<html lang="fr">
<head>
<title>[...]</title>
<style type="text/css">
#conteneur{
  position : relative;
  height : 234px;
  width : 419px;
  overflow : hidden;
}
iframe {
  width : 500px;
  height :500px;
  margin-top : -200px;
}
</style>
</head>
<body>
<div id="conteneur">
  <iframe src="http://www.visiometeo.com/images/cartes_meteo/meteoaccueilmini1.php" frameborder="0" scrolling="No"></iframe>
</div>
</body>
</html>

**josse34** · 28/10/2011, 22h47

ALLÉLUIA !!!!!!!!
Ça fonctionne parfaitement à un détail prés, je suis navré de ne pas avoir les connaissances nécessaires mais je souhaite mettre d'autres graphiques a la droite de ce script mais j'ai un retour à la ligne.
Je souhaite également insérer :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
<img src="http://www.meteo60.org/radars/animation-radar-france.gif" frameborder="0" scrolling="no" height="220" width="220">
<img src="http://tempsreel.infoclimat.net/temperature/france_now_mini.png" frameborder="0" scrolling="no" height="220" width="220">
<img src="http://www.infoclimat.fr/vigi/now.gif" frameborder="0" scrolling="no" height="220" width="250">

C'est surement basique mais ça fonctionnais tant bien que mal!

J'ai le meme soucis de retour à la ligne obligatoire sur ces codes :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
<div id="c_e873cb36494403ecfba6ef4284bd40a8" class="mini"></div><script type="text/javascript" src="http://www.meteorama.fr/widget/widget_loader/e873cb36494403ecfba6ef4284bd40a8"></script>
 
<div id="c_7bb64a8ffc0a8b8fca3c839c0beb8e7e" class="mini"></div><script type="text/javascript" src="http://www.meteorama.fr/widget/widget_loader/7bb64a8ffc0a8b8fca3c839c0beb8e7e"></script>

En passant, je cherche également à dézoomer ces indications de moitié.

Merci beaucoup pour votre aide si précieuse sur ces trois points.
Vraiment grand merci pour ce temps passé, j’apprécie grandement.
Bonne soirée

**NoSmoking** · 29/10/2011, 10h42

ALLÉLUIA !!!!!!!!
Ça fonctionne parfaitement à un détail prés, je suis navré de ne pas avoir les connaissances nécessaires mais je souhaite mettre d'autres graphiques a la droite de ce script mais j'ai un retour à la ligne.

normal les DIV sont des éléments de type block par défaut
Tu peux régler le problème en mettant les autres éléments à l'intérieur de la DIV conteneur ou en basculant les DIV en float:left

J'ai le meme soucis de retour à la ligne obligatoire sur ces codes :

même remarque que ci dessus.

En passant, je cherche également à dézoomer ces indications de moitié.

tu n'as pas accès au contenu généré par le script, ce contenu, en IFRAME appartenant à un autre domaine.

exemple de construction

Code :

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
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<!DOCTYPE html>
<html lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>[...]</title>
<style type="text/css">
#conteneur{
  position : relative;
  height : 234px;
  overflow : hidden;
  width : 1080px;
}
#conteneur iframe {
  width : 420px;
  height :500px;
  margin-top : -200px;
  margin-left : -4px;
  border : 0;
}
#conteneur img {
  vertical-align : top;
  height : 220px;
}
#resultat div {
  float : left;
}
</style>
</head>
<body>
<h1>Météo à Montpellier </h1>
<div id="conteneur">
  <iframe src="http://www.visiometeo.com/images/cartes_meteo/meteoaccueilmini1.php"></iframe>
  <img src="http://www.meteo60.org/radars/animation-radar-france.gif">
  <img src="http://tempsreel.infoclimat.net/temperature/france_now_mini.png">
  <img src="http://www.infoclimat.fr/vigi/now.gif">
</div>
<div id="resultat">
  <div id="c_e873cb36494403ecfba6ef4284bd40a8" class="mini"></div>
  <div id="c_7bb64a8ffc0a8b8fca3c839c0beb8e7e" class="mini"></div>
</div>
  <script type="text/javascript" src="http://www.meteorama.fr/widget/widget_loader/e873cb36494403ecfba6ef4284bd40a8"></script>
  <script type="text/javascript" src="http://www.meteorama.fr/widget/widget_loader/7bb64a8ffc0a8b8fca3c839c0beb8e7e"></script>
</body>
</html>

à lire CSS : Notions de base.

**josse34** · 06/11/2011, 17h33

Bonsoir.
Navré NoSmocking, je ne t'ais pas remercié chaleureusement pour l'aide que tu m'as apporté, grand merci donc!

N'afficher qu'une partie d'une image externe

HTML

Vue hybride

Discussions similaires

Partager

Partager