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

Version imprimable

28/10/2011, 10h07
josse34

N'afficher qu'une partie d'une image externe
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:

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
28/10/2011, 10h42
Vil'Coyote

Citation:

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.

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

Code:

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>

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:

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:

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

Citation:

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

Citation:

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

même remarque que ci dessus.

Citation:

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:

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.

06/11/2011, 17h33
josse34

une question sur PHP se pose sur le forum PHP + bouton résolu

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