image dans cadre (html)

symbol

symbol

Membre actif
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:
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.
 
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
 
Dans ce cas passe par un iframe contenant l’image. Tu devrais pouvoir ne rafraîchir que le contenu de l’iframe
 
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:
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:
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:
@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 a dit:
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
Cliquez pour agrandir...

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>
 
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

  • xxxxxxx.png
    xxxxxxx.png
    334,1 KB · Affichages: 234
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:
 
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.
 
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. :rolleyes:
Cliquez pour agrandir...
Quelle est la méthode à utiliser à la place des iframe ?
Même si je n’utilise pas ça je suis preneur de l’info
 
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:
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:
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:
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 ?
 

Sujets similaires

benG
Mail : signature HTML
Réponses
1
Affichages
1K
Web et e-mail
julienboost
J
phcm64100
Signature HTML pour mail
Réponses
2
Affichages
1K
Web et e-mail
phcm64100
phcm64100
I
Plein de lien sur une image de fond
Réponses
9
Affichages
2K
Développement web
lugdanum
L
I
Popup video
Réponses
1
Affichages
2K
Développement web
WebD
WebD
R
Apple Script & chemin FTP
Réponses
0
Affichages
2K
Développement Mac
ramien
R
Haut Bas
Back