image dans cadre (html)

symbol

Membre émérite
13 Octobre 2004
536
25
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
Bloc de code:
<img src="http://kenopronos.free.fr/RESULTATS.jpg" width="50%" height="50%" />
voici ce que je voudrais :

avant

01.jpg

apres

02.jpg
 
Dernière édition par un modérateur:

pouppinou

Une vie de Chien et de Pommé, et je suis heureux !
17 Juin 2017
2 239
1 998
48
Niche.
Bloc de code:
<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

Membre émérite
13 Octobre 2004
536
25
Ca marche parfaitement. Merci Pouppinou :up:

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
Bloc de code:
 <meta http-equiv="Refresh" content="5">
mais ca rafraichi l'intégralité


Merci
 

ecatomb

Membre d’élite
Club MacG
21 Septembre 2016
3 761
1 155
Dans ce cas passe par un iframe contenant l’image. Tu devrais pouvoir ne rafraîchir que le contenu de l’iframe
 

symbol

Membre émérite
13 Octobre 2004
536
25
ca, ca marche
Bloc de code:
<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
Bloc de code:
<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.
 
Dernière édition:

pouppinou

Une vie de Chien et de Pommé, et je suis heureux !
17 Juin 2017
2 239
1 998
48
Niche.
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.
 
Dernière édition:

symbol

Membre émérite
13 Octobre 2004
536
25
poupinou

j'ai mis

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

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

02.jpg

Merci
 
Dernière édition par un modérateur:

Locke

What am I doing here?
Modérateur
Club MacG
20 Juillet 2011
32 910
3 674
@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.
 

pouppinou

Une vie de Chien et de Pommé, et je suis heureux !
17 Juin 2017
2 239
1 998
48
Niche.
poupinou j'ai mis
Bloc de code:
<iframe frameborder="0" marginheight="1"
 marginwidth="0" src="http://kenopronos.free.fr/RESULTATS.jpg" width="800px" height="300px" ></iframe>
Voir la pièce jointe 120663
J'aimerais le meme rendu que la methode que tu m'a donné avec DIV
c'est a dire ca
Voir la pièce jointe 120664
On peut mettre du style :
Bloc de code:
<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

Membre émérite
13 Octobre 2004
536
25
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
 

Fichiers joints

pouppinou

Une vie de Chien et de Pommé, et je suis heureux !
17 Juin 2017
2 239
1 998
48
Niche.
Chez moi cela fonctionne très bien :
cadre-macg.jpeg

EDIT : Voici le code complet de ma page,
Bloc de code:
<!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. :rolleyes:
 

symbol

Membre émérite
13 Octobre 2004
536
25
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.
 

ecatomb

Membre d’élite
Club MacG
21 Septembre 2016
3 761
1 155
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. :rolleyes:
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

Membre émérite
13 Octobre 2004
536
25
C'est pas très grave en soi, j'utilise le DIV.

111111.png

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 ! :)

zzzzzz.png
 
Dernière édition:

pouppinou

Une vie de Chien et de Pommé, et je suis heureux !
17 Juin 2017
2 239
1 998
48
Niche.
Bon aller, j'ai fais une bidouille de cache misère pour Firefox, voici le code :

Bloc de 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 :D
(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, 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 ;)
 
Dernière édition:

symbol

Membre émérite
13 Octobre 2004
536
25
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
 
Dernière édition:

symbol

Membre émérite
13 Octobre 2004
536
25
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 ?