Besoin d'aide sur un code html..
Callimerow
Messages postés
8
Date d'inscription
Statut
Membre
Dernière intervention
-
callimerOw -
callimerOw -
Bonjour,
Voilà, je suis en plein développement de mon site et j'ai un petit (gros x)) problème...
Je vous explique.
Mon site sera en fait constitué de cours de première que je mettrais moi même..
On choisi la matière, la séquence, le nom de la leçon et puis enfin on choisi entre -Leçon, -Exercices et -Contrôle
Quand on a choisi une de ces dernières catégories, on a notre leçon, exercice ou contrôle et Il y a plusieurs pages.
les pages sont organisées en un tableau à onglet javascript (librairie Spry)
On a donc un balise <div></div> avec dedans les différents onglets.
voilà ce que ça donne (ici il y a deux pages et les leçons sont des images jpeg):
<div id="tableau">
<div id="TabbedPanels1" class="TabbedPanels">
<ul class="TabbedPanelsTabGroup">
<li class="TabbedPanelsTab" tabindex="0">Page 1</li> (onglet 1)
<li class="TabbedPanelsTab" tabindex="0">Page 2</li> (onglet 2)
</ul>
<div class="TabbedPanelsContentGroup">
<div class="TabbedPanelsContent" align="center"> <img src="physique.jpg" width="485" height="755" /></div> (cour 1)
<div class="TabbedPanelsContent"><img src="Français.jpg" width="485" height="755" /></div> (cour deux)
</div>
</div>
</div>
Seulement, voilà: les images sont trop petites.
J'ai donc trouvé un script javascript qui permet d'avoir un zoom sur l'image quand on passe la souris dessus !
C'est très bien mais quant on passe la souris sur l'image, elle s'agrandit mais la case qui entoure l'image (<div> </div>) elle, ne grandit pas ! Ce qui fait qu'on ne voit qu'une partie de l'image en gros et que l'on ne peut pas bouger dans l'image.
J'ai donc rajouté des balises <iframe> </iframe> qui permettent de bouger dans l'image zoomée
voici ce que ça donne:
<div id="tableau">
<div id="TabbedPanels1" class="TabbedPanels">
<ul class="TabbedPanelsTabGroup">
<li class="TabbedPanelsTab" tabindex="0">Page 1</li>
<li class="TabbedPanelsTab" tabindex="0">Page 2</li>
</ul>
<div class="TabbedPanelsContentGroup">
<div class="TabbedPanelsContent" align="center"><iframe name ="calandrier"
onMouseOut="initial()" onMouseOver="changer()" src="test zOOm.html" scrolling="yes" height="100%" width="100%" align="center" frameborder="yes">
</iframe></div>
<div class="TabbedPanelsContent"><img src="Français.jpg" width="485" height="755" /></div>
</div>
</div>
</div>
comme vous pouvez le voir, pour tester, je n'ai appliqué l'opration que sur le cour "physique.jpg".
Mon problème (on y arrive enfin..) est que je n'ai pas réussi à mettre le script javascript (en fait ce ce que le site m'a donné à mettre dans les balises <body> </body> dont je parle) dans les balies iframe ! J'ai donc enregistrer la scrip du zoom dans une page html que j'ai lié à l'iframe...
regardez:
le document html du zoom que je n'ai pas réussi à combiener avec l'autre document pouren faire qu'une seule page:
</head>
<script language="JavaScript">
<!--
//PLF-https://twitter.com/ceosammassey
var coeff=1.5;//Coefficient de reduction
var larg=725.5;//largeur maxi de l'image
var haut=1135.5;//hauteur maxi de l'image
var coeffinit=coeff;
function changer() {
if (document.image.width < larg) {
coeff = coeff-0.2;
document.image.width = Math.round(larg/coeff);
document.image.height = Math.round(haut/coeff);
chang=window.setTimeout('changer();',1);//vitesse de l'effet
}
else {window.clearTimeout(chang);}
}
function initial() {
if (document.image.width > larg/coeffinit) {
window.clearTimeout(chang);
coeff = coeff+0.2;
document.image.width = Math.round(larg/coeff);
document.image.height = Math.round(haut/coeff);
initi=window.setTimeout('initial();',1);//vitesse de l'effet
}
else {window.clearTimeout(initi);}
}
//-->
</script>
<body>
<div align="center">
<a name="img"></a>
<a href="#img" onMouseOut="initial()" onMouseOver="changer()" ><img src="Physique chimie.jpg" border="0" name="image"></a></div>
<script language="JavaScript">
<!--
//PLF-https://twitter.com/ceosammassey
document.image.width = Math.round(larg/coeff);
document.image.height = Math.round(haut/coeff);
//-->
</script>
</body>
</html>
Alors ma question: comment mettre ce qu'il y a dans body et qui n'est pas script java (<div align="center">
<a name="img"></a>
<a href="#img" onMouseOut="initial()" onMouseOver="changer()" ><img src="Physique chimie.jpg" border="0" name="image"></a></div>) avec les balises <iframe> </iframe) ??
Car pour chaque cours il faudrait créer une page html alors que là pour tous les cours d'une catégorie il n'y en aurait qu'une !
Je sais que c'est très long mais c'est très important donc j'explique longement ! J'attend vos réponses avec impatiences, s'îl vous plaît, aidez-moi ! T.T
Merci d'avance :)
Voilà, je suis en plein développement de mon site et j'ai un petit (gros x)) problème...
Je vous explique.
Mon site sera en fait constitué de cours de première que je mettrais moi même..
On choisi la matière, la séquence, le nom de la leçon et puis enfin on choisi entre -Leçon, -Exercices et -Contrôle
Quand on a choisi une de ces dernières catégories, on a notre leçon, exercice ou contrôle et Il y a plusieurs pages.
les pages sont organisées en un tableau à onglet javascript (librairie Spry)
On a donc un balise <div></div> avec dedans les différents onglets.
voilà ce que ça donne (ici il y a deux pages et les leçons sont des images jpeg):
<div id="tableau">
<div id="TabbedPanels1" class="TabbedPanels">
<ul class="TabbedPanelsTabGroup">
<li class="TabbedPanelsTab" tabindex="0">Page 1</li> (onglet 1)
<li class="TabbedPanelsTab" tabindex="0">Page 2</li> (onglet 2)
</ul>
<div class="TabbedPanelsContentGroup">
<div class="TabbedPanelsContent" align="center"> <img src="physique.jpg" width="485" height="755" /></div> (cour 1)
<div class="TabbedPanelsContent"><img src="Français.jpg" width="485" height="755" /></div> (cour deux)
</div>
</div>
</div>
Seulement, voilà: les images sont trop petites.
J'ai donc trouvé un script javascript qui permet d'avoir un zoom sur l'image quand on passe la souris dessus !
C'est très bien mais quant on passe la souris sur l'image, elle s'agrandit mais la case qui entoure l'image (<div> </div>) elle, ne grandit pas ! Ce qui fait qu'on ne voit qu'une partie de l'image en gros et que l'on ne peut pas bouger dans l'image.
J'ai donc rajouté des balises <iframe> </iframe> qui permettent de bouger dans l'image zoomée
voici ce que ça donne:
<div id="tableau">
<div id="TabbedPanels1" class="TabbedPanels">
<ul class="TabbedPanelsTabGroup">
<li class="TabbedPanelsTab" tabindex="0">Page 1</li>
<li class="TabbedPanelsTab" tabindex="0">Page 2</li>
</ul>
<div class="TabbedPanelsContentGroup">
<div class="TabbedPanelsContent" align="center"><iframe name ="calandrier"
onMouseOut="initial()" onMouseOver="changer()" src="test zOOm.html" scrolling="yes" height="100%" width="100%" align="center" frameborder="yes">
</iframe></div>
<div class="TabbedPanelsContent"><img src="Français.jpg" width="485" height="755" /></div>
</div>
</div>
</div>
comme vous pouvez le voir, pour tester, je n'ai appliqué l'opration que sur le cour "physique.jpg".
Mon problème (on y arrive enfin..) est que je n'ai pas réussi à mettre le script javascript (en fait ce ce que le site m'a donné à mettre dans les balises <body> </body> dont je parle) dans les balies iframe ! J'ai donc enregistrer la scrip du zoom dans une page html que j'ai lié à l'iframe...
regardez:
le document html du zoom que je n'ai pas réussi à combiener avec l'autre document pouren faire qu'une seule page:
</head>
<script language="JavaScript">
<!--
//PLF-https://twitter.com/ceosammassey
var coeff=1.5;//Coefficient de reduction
var larg=725.5;//largeur maxi de l'image
var haut=1135.5;//hauteur maxi de l'image
var coeffinit=coeff;
function changer() {
if (document.image.width < larg) {
coeff = coeff-0.2;
document.image.width = Math.round(larg/coeff);
document.image.height = Math.round(haut/coeff);
chang=window.setTimeout('changer();',1);//vitesse de l'effet
}
else {window.clearTimeout(chang);}
}
function initial() {
if (document.image.width > larg/coeffinit) {
window.clearTimeout(chang);
coeff = coeff+0.2;
document.image.width = Math.round(larg/coeff);
document.image.height = Math.round(haut/coeff);
initi=window.setTimeout('initial();',1);//vitesse de l'effet
}
else {window.clearTimeout(initi);}
}
//-->
</script>
<body>
<div align="center">
<a name="img"></a>
<a href="#img" onMouseOut="initial()" onMouseOver="changer()" ><img src="Physique chimie.jpg" border="0" name="image"></a></div>
<script language="JavaScript">
<!--
//PLF-https://twitter.com/ceosammassey
document.image.width = Math.round(larg/coeff);
document.image.height = Math.round(haut/coeff);
//-->
</script>
</body>
</html>
Alors ma question: comment mettre ce qu'il y a dans body et qui n'est pas script java (<div align="center">
<a name="img"></a>
<a href="#img" onMouseOut="initial()" onMouseOver="changer()" ><img src="Physique chimie.jpg" border="0" name="image"></a></div>) avec les balises <iframe> </iframe) ??
Car pour chaque cours il faudrait créer une page html alors que là pour tous les cours d'une catégorie il n'y en aurait qu'une !
Je sais que c'est très long mais c'est très important donc j'explique longement ! J'attend vos réponses avec impatiences, s'îl vous plaît, aidez-moi ! T.T
Merci d'avance :)
A voir également:
- Besoin d'aide sur un code html..
- Code ascii - Guide
- Comment déverrouiller un téléphone quand on a oublié le code - Guide
- Code puk bloqué - Guide
- Code activation windows 10 - Guide
- Scanner un qr code sur pc - Guide
10 réponses
Bonjour,
Tu peu éviter les iframe. Tu ajoute le code CSS suivant sur une balise div qui replace une iframe.
Avec ça tu as des ascenseurs pour ton image sans te prendre la tête avec les iframes qui complique la page.
j'espère que ça t'aidera ^^
Tu peu éviter les iframe. Tu ajoute le code CSS suivant sur une balise div qui replace une iframe.
{
overflow:auto;
}
Avec ça tu as des ascenseurs pour ton image sans te prendre la tête avec les iframes qui complique la page.
j'espère que ça t'aidera ^^
Salut !
Il est génial ton code et il pourrait résoudre tout mes problèmes !!
Seulement (T.T), ça ne marche que vers le bas, c'est à dire que quand l'image s'agrandit, on la voit de haut ne bas mais on ne voit qu'une partie horizontalement T.T
SI tu (ou quelqu'un d'autre) pourrais continuer à m'aider, ce serait super, merci ! :)
Il est génial ton code et il pourrait résoudre tout mes problèmes !!
Seulement (T.T), ça ne marche que vers le bas, c'est à dire que quand l'image s'agrandit, on la voit de haut ne bas mais on ne voit qu'une partie horizontalement T.T
SI tu (ou quelqu'un d'autre) pourrais continuer à m'aider, ce serait super, merci ! :)
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
Non ; c'est la même propriété mais pas le même atribut. "Auto" affiche les ascenseurs si le contenu dépasse alors que "scroll" les affiche systématiquement.
non, je veux dire que c'est le même effet que tout à l'heure, on ne voit qu'une seule partie de l'image horizontalement ! par contre on la voit de haut en bas..
Arf c'est bizarre ce truque -__-
J'ai relu ton code mais je vois pas trop là. Je suis au taf, donc je suis pas trop concentrer. Je vais relire tout ça ce soir chez moi et j'essaierai de trouez une solution ^^
Ton site est accessible sur le net ? si je peut le voir ça m'aiderai (edit)
think for yourself, question authority...
J'ai relu ton code mais je vois pas trop là. Je suis au taf, donc je suis pas trop concentrer. Je vais relire tout ça ce soir chez moi et j'essaierai de trouez une solution ^^
Ton site est accessible sur le net ? si je peut le voir ça m'aiderai (edit)
think for yourself, question authority...
Salut ! non il n'est pas accessible sous le net mais si tu me passes ton mail, je t'envoies la page html avec les deux photos qui la concernent si tu veux !
Donc si tu as le temps, dis le moi et envoie moi ton mail en message privé (sur mon vrai compte, celui avec lequel j'ai posté le sujet) merci encore ! :)
Donc si tu as le temps, dis le moi et envoie moi ton mail en message privé (sur mon vrai compte, celui avec lequel j'ai posté le sujet) merci encore ! :)
