# image dans cadre (html)



## symbol (28 Février 2018)

bonjour

j'ai une image qu je souhaire inclure dans un cadre. L'image ne doit pas etre redimensionnée, juste inserer dans un cadre qui aura des ascenseurs pour se deplacer dedans.

J'ai tatonné avec div, frame, iframe, mais j'y arrive pas 

Merci

voici le code pour mon image

```
<img src="http://kenopronos.free.fr/RESULTATS.jpg" width="50%" height="50%" />
```

voici ce que je voudrais :

avant





apres


----------



## pouppinou (28 Février 2018)

```
<div style="overflow:scroll; width:Xpx; height:Xpx; border:#000000 1px solid;">
<img src="http://kenopronos.free.fr/RESULTATS.jpg" width="50%" height="50%" />
</div>
```

Remplacer les "X" par la valeur voulu de la largeur et hauteur ascenseurs/fenêtre/cadre.


----------



## symbol (28 Février 2018)

Merci pouppinou   Ca faisait 2 heures que je tatonnais


----------



## symbol (1 Mars 2018)

Ca marche parfaitement. Merci Pouppinou 

Est-il possible de rafraichir uniquement le contenu (resultats.jpg) de ce.... cadre ? fenetre ?  toute les minute par exemple ?
(en sachant que dans le forum qui m'heberge, je ne peux poster du code que dans une "zone HTML" et une zone CSS.

J'ai trouvé ca 
	
	



```
<meta http-equiv="Refresh" content="5">
```
 mais ca rafraichi l'intégralité


Merci


----------



## Membre supprimé 1129907 (1 Mars 2018)

Dans ce cas passe par un iframe contenant l’image. Tu devrais pouvoir ne rafraîchir que le contenu de l’iframe


----------



## symbol (1 Mars 2018)

ca, ca marche

```
<div style="overflow:auto; width:800px; height:300px; border:#000000 0px solid;">
<img src="http://kenopronos.free.fr/RESULTATS.jpg" width="100%" height="270%" />
</div>
```

donc je reprends pareil et je change par iframe

```
<iframe width="800" height="300" frameborder="0" marginheight="1"
 marginwidth="0" src="http://kenopronos.free.fr/RESULTATS.jpg" width="500" height ="340" ></iframe>
```

et la, j'ai l'image mais elle est toute petite.


----------



## pouppinou (1 Mars 2018)

Attention il est toujours conseillé de mettre un "indice" px pour pixel par exemple, sinon cela peut-être mal interprété. Et tu mets 2 fois des dimensions.


----------



## symbol (1 Mars 2018)

poupinou

j'ai mis


```
<iframe frameborder="0" marginheight="1"
 marginwidth="0" src="http://kenopronos.free.fr/RESULTATS.jpg" width="800px" height="300px" ></iframe>
```




J'aimerais le meme rendu que la methode que tu m'a donné avec DIV
c'est a dire ca




Merci


----------



## Locke (1 Mars 2018)

@symbol
J'ai corrigé tes réponses. Pour insérer des images/photos, dans ta réponse tu sélectionnes *Transférer un fichier*, tu sélectionnes tes images/photos, tu sélectionnes Miniature, un simple clic dessus les agrandira dans le forum.


----------



## symbol (1 Mars 2018)

@Locke
Merci


----------



## peyret (1 Mars 2018)

Locke a dit:


> tu sélectionnes Miniature



(Je ne comprends pas pourquoi ce n'est pas "miniature" d'office....   )


----------



## pouppinou (1 Mars 2018)

symbol a dit:


> poupinou j'ai mis
> 
> ```
> <iframe frameborder="0" marginheight="1"
> ...



On peut mettre du style :

```
<iframe style="overflow:auto; width:1000px; height:300px; border:#000000 0px solid;" src="http://kenopronos.free.fr/RESULTATS.jpg" width="100%" height="270%" ></iframe>
```


----------



## symbol (1 Mars 2018)

Merci de ta réponse.
J'ai testé et ca donne rien de nouveau.


J'ai en haut la version qui fonctionne avec DIV

En dessous IFRAME


----------



## pouppinou (1 Mars 2018)

Chez moi cela fonctionne très bien :



EDIT : Voici le code complet de ma page,

```
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Document sans nom</title>
</head>

<body><div align="center">
<iframe style="overflow:scroll-vertical; width:1000px; height:300px; border:#000000 0px solid;" src="http://kenopronos.free.fr/RESULTATS.jpg" width="100%" height="270%" ></iframe>
    </div>
</body>
</html>
```

EDIT 2 : Sous Safari ça fonctionne mais je viens de vérifier sous firefox, effectivement ça ne fonctionne pas. En même temps le iframe n'est plus pris en charge. Ce n'est pas la meilleure façon de faire avec un iframe.


----------



## symbol (1 Mars 2018)

SI je clique sur l'image, du coup ca l'agrandie et j'ai le meme resultat que toi. Mais par défaut l'image reste petite.


----------



## Membre supprimé 1129907 (1 Mars 2018)

pouppinou a dit:


> EDIT 2 : Sous Safari ça fonctionne mais je viens de vérifier sous firefox, effectivement ça ne fonctionne pas. En même temps le iframe n'est plus pris en charge. Ce n'est pas la meilleure façon de faire avec un iframe.


Quelle est la méthode à utiliser à la place des iframe ?
Même si je n’utilise pas ça je suis preneur de l’info


----------



## symbol (1 Mars 2018)

C'est pas très grave en soi, j'utilise le DIV.




J'utilise un forum , qui a une zone HTML. C'est ici que je dois mettre du code.


Autre possibilité avec le Iframe, c'est poster RESULTATS.txt (fichier texte, qui est la copie de RESULTATS.jpg), j'ai essayé et ca marche. MAIS (c'est pas possible d'avoir la poisse comme moi) , le fichier texte est en UTF-8, et le navigateur m'affiche pas les bons caracteres 

Il doit manquer une commande/balise ou un truc dans le genre 

ôooooo secours Seigneur !


----------



## pouppinou (1 Mars 2018)

Bon aller, j'ai fais une bidouille de cache misère pour Firefox, voici le code :


```
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Document sans nom</title>
<style>
#wrap { width: 1000px; height: 300px; padding: 0; border:#000000 1px solid; overflow: hidden; }
#frame { zoom: 1; -moz-transform: scale(5); -moz-transform-origin: 0 0; }
</style>

</head>

<body>
    <div align="center">
        <div id="wrap">
            <iframe id="frame" style="overflow:scroll-vertical; width:1000px; height:300px; border: none;" src="http://kenopronos.free.fr/RESULTATS.jpg" width="100%" height="100%" ></iframe>
        </div>
    </div>
</body>
</html>
```
NOTA : il n'y a plus d'ascenseur visuel sous Firefox mais la fonction est toujours là, avec la molette de la souris ou le trackpad. Je vous ai dit que c'était un cache misère 
(quand on utilise la fonction zoom sous Firefox ça zoom tout l'iframe et son contenu, du coup les ascenseurs sont chez le voisin , d'où le fait de les cacher)

@ecatomb
Mieux vaut utiliser sinon du php avec
<?php include('page_html_a_inserer.html'); ?>
Et de là tu peux faire le rafraichissement directement depuis la page 'page_html_a_inserer.html' qui par conséquent ne fera qu'un rafraichissement de <?php include('page_html_a_inserer.html'); ?> dans ta page .php


----------



## symbol (1 Mars 2018)

je viens d'essayer.  ca marche 

Par contre l'image est ENNORRRRRMMMEEEEE

Je crois qu'il plus sage et surtout plus compatible avec tous les navigateurs de retourner a la version DIV.

Merci de ton travail


----------



## symbol (1 Mars 2018)

Puis qu'afficher RESULTATS.jpg, n'est pas de tout repos, je propose de passer a RESULTATS.txt

D'ou ma question sur l'affichage de mon texte (kenopronos.free.fr/RESULTATS.txt) dans le div , qui n'affiche pas les caracteres UTF-8 ?


----------



## pouppinou (1 Mars 2018)

Tu peux changer le zoom (taille) en modifiant " scale(5) ", avec par exemple " scale(4.5) " pour moins gros, " scale(5.5) " pour plus gros etc...

Voici le script à mettre dans le <head></head> et modification du <body>:

```
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Document sans nom</title>
<style>
#wrap { width: 1000px; height: 300px; padding: 0; border:#000000 1px solid; overflow: hidden; }
#frame { zoom: 1; -moz-transform: scale(5); -moz-transform-origin: 0 0; }
</style>
<script type="text/javascript"><!--
function refreshiframe()
{
document.getElementById("frame" ).src="http://kenopronos.free.fr/RESULTATS.jpg"
setTimeout("refreshiframe()",300000);
}
</script>

</head>

<body onload="refreshiframe();">
    <div align="center">
        <div id="wrap">
            <iframe id="frame" name="frame" style="overflow:scroll-vertical; width:1000px; height:300px; border: none;" src="http://kenopronos.free.fr/RESULTATS.jpg" width="100%" height="100%" ></iframe>
        </div>
    </div>
</body>
</html>
```

" 300000 " temps en millisecondes. Soit 5 minutes

EDIT :


symbol a dit:


> Puis qu'afficher RESULTATS.jpg, n'est pas de tout repos, je propose de passer a RESULTATS.txt
> 
> D'ou ma question sur l'affichage de mon texte (kenopronos.free.fr/RESULTATS.txt) dans le div , qui n'affiche pas les caracteres UTF-8 ?



Regardes dans mon code : <meta charset="UTF-8">
Invoques le comme un dieu


----------



## Membre supprimé 1129907 (1 Mars 2018)

pouppinou a dit:


> Mieux vaut utiliser sinon du php avec
> <?php include('page_html_a_inserer.html'); ?>
> Et de là tu peux faire le rafraichissement directement depuis la page 'page_html_a_inserer.html' qui par conséquent ne fera qu'un rafraichissement de <?php include('page_html_a_inserer.html'); ?> dans ta page .php


C'est vrai que c'est mieux de faire en php quand on peut. J'utilisais ça pour le menu de mon site quand j'en avais un. Mais maintenant, ce n'est plus le cas


----------



## symbol (2 Mars 2018)

@*pouppinou*


J'ai repris le code du dessus .C'est presque parfait.

Sauf que je ne peux pas scroller (je peux pas mais le scroll s'arrete apres 2 ou 3 Centimetres) le contenu de la fenetre sur la totalité du JPG.
Du coup il manque une partie du texte.

Bon allez, tant pis pour le refesh. le meilleur code (qui donne le meme resultat graphiquement sur tous les navigateurs, c'etait le code DIV.

Je vais garder celui la.

ultra merci


----------



## daffyb (2 Mars 2018)

symbol a dit:


> @*pouppinou*
> 
> 
> J'ai repris le code du dessus .C'est presque parfait.
> ...



Et un petit bout de JavaScript pour rafraîchir le div ?


----------



## symbol (3 Mars 2018)

J'ai trouvé ca  :


```
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js" />

<div class="View"><?php include 'Small.php'; ?></div>

<script type="text/javascript">
$(document).ready(function() {
$('.View').load('Small.php');
var auto_refresh = setInterval(
   function ()
   {
       $('.View').load('Small.php').fadeIn("slow");
   }, 15000); // refresh every 15000 milliseconds
       $.ajaxSetup({ cache: true });
   });
</script>
```

Faut surement adapter a mon cas.


----------

