Dimensionner une image dans un FRAME selon sa largeur

Bonjour,

Je cherche vainement un code javascript permettant d'actualiser les dimensions d'une image en fonction de la largeur du frame variable selon le navigateur du visiteur.
Je m'explique. J'ai un frameset avec à gauche un frame fixe et à droite un frame variable. Dans ce dernier, sont visualisées des pages contenant chacune une image. J'aimerais donc que cette image profite de la largeur maximale disponible pour le visiteur et que ce soit réactif et actualisable si le visiteur redimensionne son navigateur.

Est-ce possible ? Y a t'il des liens sur le sujet ? J'ai cherché en anglais et en français mais je n'ai pas dû avoir les bons mots-clés.

Merci d'avance


Mage et Lent, un des trois

Bonjour,
J'ai cherché en anglais et en français
il fallait chercher en CSS
point besoin de rien d'autre

Attention :
- le rendu peut être catastrophique si l'image est surdimensionnée
- l'utilisation de FRAME n'est plus mode

;O)

Merci beaucoup, Petole Team

C'est vrai que je n'avais pas pensé aux CSS.
Mais d'une part, il semble que ça ne redimensionne que la largeur et pas la hauteur,
bon ça c'est pas grave, j'aurais bien trouvé un moyen.

Mais comme je suis en Frameset, qui je le sais n'est plus de mode, (mais là il faudrait que je refasse les quelques centaines de pages de mon site, ça viendra un jour, mais pour l'instant il fonctionne bien ainsi) et que j'ai une fonction window.location.replace pour remettre une page chargée individuellement dans le frameset, je vois un court instant mon image dilatée, mais dès que la page est rechargée dans le frameset, l'effet CSS disparait et ma page est comme avant.

Alors j'ai pensé entretemps à la méthode suivante : puisque mon frame de gauche a une largeur fixe, en allant chercher la largeur du navigateur et en soustrayant la largeur de mon frame de gauche, je devrais obtenir la largeur de mon frame de droite. Mais comme je suis nul en javascript et que je ne fais que trifouiller des bouts de code que je trouve sur le net, je vais essayer dans cette voie mais ça risque d'être laborieux...

En tous cas, merci encore pour ton aide sympa et qui m'en a appris un peu plus !


Mage et Lent, un des trois

Bonjour,
concernant l'utilisation des FRAMEs il est clair que si le site est en place, point n'est nécessaire de ce faire souffrance en changeant tout, cela vaut surtout pour de nouvelle page.

concernant ton soucis pourrait on avoir un exemple en ligne pour mieux ce rendre compte, je dois admettre que j'ai du mal à visualiser le problème.

;O)

Mais bien sûr, http://jpjb.eu

Ce que je voudrais faire, c'est surtout pour les tableaux et dessins (voir ces rubriques) de pouvoir faire profiter les visiteurs d'une meilleure définition des détails qui ont leur importance surtout pour les dessins très fouillés. Et donc de rajouter un petit bout de code pour que les visiteurs qui ont un grand écran puissent avoir toute la largeur souhaitable en cliquant sur l'image. En ce cas, je
mettrais des images à plus haute définition.

Dans quelques temps, j'essayerai de refaire tout le site dans des techniques plus modernes, mais il faudra que je pioche les CSS, PHP et compagnie car je suis un peu largué. Quand j'avais commencé ce site, il y a une dizaine d'années, j'écrivais directement en HTML, sans aide d'un programme, juste avec un éditeur de texte....

Merci de t'intéresser à mon petit problème !!!!!


Mage et Lent, un des trois

Bonjour,
Mais bien sûr, http://jpjb.eu
fort intéressant au demeurant...

Une solution serait de mettre une DIV en pleine fenêtre de la FRAME en position fixed, position reconnue par presque tout les derniers navigateurs, hors IE6 qui représente environ 5%, et de centrer la photo sur celle ci.
La photo pouvant être réajuster ensuite au mieux de la largeur.

...j'écrivais directement en HTML, sans aide d'un programme, juste avec un éditeur de texte.... ...
c'est comme cela que les codes sont les plus propres!


;O)

C'est bizarre, j'avais répondu, mais ma réponse est partie aux oubliettes, on dirait.

Merci pour ton aide, merci pour le compliment.

Je galère... mais j'y arriverai. C'est drôle parce que je crois que c'est une pratique élémentaire, mais je ne trouve pas exactement mon cas de figure dans les nombreux exemples sur le net.
Mon problème reste d'adatpter la hauteur à la largeur.

J'ai fait ça, mais rien ne marche pour l'instant :

<body onResize="window.location.href = window.location.href;">
<h1 align="center"><font color="#ccccdd">TITRE</font></h1>

<IMG src="../../jpg/objects/statues.jpg" width=100% height=100% id="myimg">
<script language=javascript>
<!--
//opera, Netscape 6, Netscape 4x, Mozilla
if (window.innerWidth || window.innerHeight){
largeurdoc=window.innerWidth;
hauteurdoc=window.innerHeight;
}
//IE, Mozilla
if (document.body.clientWidth || document.body.clientHeight){
largeurdoc=document.body.clientWidth;
hauteurdoc=document.body.clientHeight;
}

var img = document.getElementById('myimg');
var iwidth = img.clientWidth;
var iheight = img.clientHeight;
var largeur=largeurdoc;
var hauteur=largeurdoc*iheight/iwidth;
document.write('\
<image style="\
display: block;\
position:absolute;\
top:10px;\
left:10px;\
visibility: visible;\
height:'+hauteur+'px;\
width:'+largeur+'px "\
src="../../jpg/objects/statues.jpg">\

');
//-->
</script>


Mage et Lent, un des trois

RESOLU
Enfin pas vraiment, mais j'ai trouvé PopBox.js, une solution un peu différente, mais qui répond très bien à mes désirs.


Mage et Lent, un des trois

Bonjour,
tu n'en était pas loin du tout, il ne faut pas attribuer de hauteur quand l'on mets 100% à la largeur le navigateur s'occupe de mettre la hauteur au bon format.
Cela peut donner ceci

cela devrait le faire, même si il n'y aura pas d'effet...
;O)

Génial !!!!

Mille mercis, Petole Team !!!!
Les effets ne sont pas si intéressants sur de grandes images, ça met beaucoup de temps à se redimensionner.

Et puis ton code est ultra simple, super !!!!!

Bonne continuation !

Mage et Lent, un des trois