18041 sujets

Questions générales et questions de débutants

Probleme avec un script ( agrandisement de page )

Pages :
Bonjours,

Je voudrais savoir si vous pouvez m'aidez , sur mon site , j'ai pris un script pour que lorsque je passe sur une image , ou vois cette image accompagner des info sur l'animes dans un tableau

Le problème, c'est que lorsque l'on passe sur une des images qui active le script, la page peut s'agrandir a l'infinie ( du moins sous firefox et IE ) en allant en bas a droite de la page

Pouvez vous m'aidez a résoudre mon problème s'il vous plait ?

( Demandez moi si il vous manque des information , merci )
Modifié par kaytos (02 Jan 2010 - 23:26)
Bonjour,
le controleur de debug du javascript indique cette erreur

popup = window.open('commentaires-2.2/commentaires/commentaire.php?nom='+nom,'Commentaires','toolbar=0,location=0,directories=0,menuBar=0,resizable=0,scrollbars=yes,width=317,height=355,left=75,top=60');
	if (popup && popup.focus) popup.focus();

Controles ce code et corriges le.
d'autre part il devrait étre juste derriére le BODY !!
Bonjour, c'est quand même super dommage d'utiliser du javascript pour ce genre d'évènement alors qu'un simple 
<a href="#"><span>ce que tu veux afficher en popup</span>ton lien</a>
a span { display:none; }
a:hover span { display:inline; }

fera largement l'affaire. Smiley smile ou alors j'ai rien compris à ce que tu voulais ... c'est possible aussi Smiley ohwell
Modifié par chooky (21 Dec 2009 - 16:05)
Merci christele , mais a vrai dire je suis un gros débutant en informatique moi , et modifier des code sa me connait pas vraiment

si tu pouvait m'aider sa serai sympa , et lorsque j'ai déplacer le code , c'est vrai que la page ne s'agrandissait plus , mais malheureusement , le tableau et l'image ne suivait plus la souris

et merci de ta réponse chooky , mais le code que tu ma donner m'irai bien , mais sa ne suit pas la souris non plus Smiley bawling
Salut,

Christele a écrit :
d'autre part il devrait étre juste derriére le BODY !!
Euh... pas compris : quitte à ne pas le mettre dans le HEAD autant le mettre en bas de page (en).

@chooky > je suppose que tu voulais dire :
a span { display:none; }
a:hover span { display:inline; }

Modifié par Heyoan (21 Dec 2009 - 16:01)
à Heyoan -> maman !!! la bourde !!! ... Smiley confused Oui tu as 150% raison! j'ai écris beaucoup trop vite, je suis désolé. Smiley confused

le bon code est 
a span { display:none; } 
a:hover span { display:inline; }


j'ai corrigé dessus également. Merci.
Modifié par chooky (21 Dec 2009 - 16:07)
a écrit :
chooky a écrit :
le bon code est

a span { display:none; }

a:hover span { display:inline; }


euh OK , mais tu le met ou se code ??? ( je suis vraiment un débutant ... )

en cherchant un peu sur le net , j'ai trouver se site http://www.editeurjavascript.com/scripts/scripts_images_1_66.php
qui explique comment mettre une image qui suit la souris , et j'ai remarquer , qu'il y a le même problème que sur mon site ,je me demande donc si se problème n'en est pas un et que tout compte fait sa soit normal que la page s'agrandisse
Dans ta feuille de style.
Tu as une feuille de style n'est ce pas si tu n'en a pas, une feuille de style est une page avec l'extension .css par exemple styles.css dans laquelle tu vas saisir tous les styles qui vont servir à ton site.
Tu devras lier cette feuille dans les entêtes de toutes tes pages (entre la balise <head> et </head>)


<link href="http://www.monsite.com/styles/styles.css" rel="stylesheet" type="text/css" />


j'ai pas fais de bourde ce coup ci? Smiley ravi
c'est bon j'ai ma fiche style.css

le code : <link href="http://www.monsite.com/styles/styles.css" rel="stylesheet" type="text/css" /> est deja mis entre les balise <head> et </head>

mais je ne trouve pas ou rajouter :

a span { display:none; }

a:hover span { display:inline; }

je le met ou je veut , ou dans un endroit précis

et merci de vos réponse
Modifié par kaytos (23 Dec 2009 - 16:52)
hé bien là par exemple


/*       */ 
/* Liens */ 
/*       */ 
 a:link, a:visited { 
text-decoration: underline; 
color: #FF33CC; 
background-color: transparent; 
outline: none; 
} 
a:active, a:hover { 
color: white; 
background-color: transparent; 
outline: none; 
} 

a span { display:none; }
a:hover span { display:inline; }

/*                      */ 
/*        Titres        */ 
/*                      */


Smiley cligne

attention hein ! je n'ai pas donné le style vraiment du span.

déjà, je te conseille de mettre le bloc parent en position:relative; et ainsi ton span en position:absolute;

tu saisis?
Modifié par chooky (21 Dec 2009 - 19:35)
c'est le waï ton code quand même ... tu utilises des spans partout dont dans les balises h1 et souvent ils ne servent à rien Smiley ohwell s'cuse mais fallait que je te le dise pour toi Smiley cligne
sinon voilà ton code
<div align="center">

  <span class="\'Style1\'"><a onmouseover="poplink('<div align=\'left\'> <span class=\'Style1\'>Titre de l\'Animes:</span> <span class=\'Style3\'>FullMetal Brotherhood</span><br><span class=\'Style1\'>Nombres d\'episodes :</span> <span class=\'Style3\'>31/... </span><br><span class=\'Style1\'>Language :</span> <span class=\'Style3\'> VOSTFR </span><br><img src=\'http://kaytos-mangas.wifeo.com/images/FMAbrotherhood24.JPG\' border=\'1\' height=\'120\' width=\'160\'/></div>');" onmouseout="killlink()" href="http://kaytos-mangas.niloo.fr/index.php?file=Page&name=en_construction"><img src="http://kaytos-mangas.wifeo.com/images/FMAbrotherhood24.JPG" border="1" height="120" width="160"></a></span>
  <span class="\'Style1\'"><a onmouseover="poplink('<div align=\'left\'> <span class=\'Style1\'>Titre de l\'Animes:</span> <span class=\'Style3\'>Naruto Shippuden </span><br><span class=\'Style1\'>Nombres d\'episodes :</span> <span class=\'Style3\'>136/... </span><br><span class=\'Style1\'>Language :</span> <span class=\'Style3\'>VOSTFR</span><br><img src=\'http://kaytos-mangas.wifeo.com/images/Naruto-shippuden.jpg\' border=\'1\' height=\'120\' width=\'160\'/></div>');" onmouseout="killlink()" href="http://kaytos-mangas.niloo.fr/index.php?file=Page&name=en_construction"><img src="http://kaytos-mangas.wifeo.com/images/Naruto-shippuden.jpg" border="1" height="120" width="160"></a></span>
  <span class="\'Style1\'"><a onmouseover="poplink('<div align=\'left\'> <span class=\'Style1\'>Titre de l\'Animes:</span> <span class=\'Style3\'>Clannad</span><br><span class=\'Style1\'>Nombres d\'episodes :</span> <span class=\'Style3\'>22/22 </span><br><span class=\'Style1\'>Language :</span> <span class=\'Style3\'>VOSTFR</span><br><img src=\'http://kaytos-mangas.wifeo.com/images/32251.jpg\' border=\'1\' height=\'120\' width=\'160\'/></div>');" onmouseout="killlink()" href="http://kaytos-mangas.niloo.fr/index.php?file=Page&name=en_construction"><img src="http://kaytos-mangas.wifeo.com/images/32251.jpg" border="1" height="120" width="160"></a></span>
  <span class="\'Style1\'"><a onmouseover="poplink('<div align=\'left\'> <span class=\'Style1\'>Titre de l\'Animes:</span> <span class=\'Style3\'>Futakoi</span><br><span class=\'Style1\'>Nombres d\'episodes :</span> <span class=\'Style3\'>13/13 Premier Volume</span><br><span class=\'Style1\'>Language :</span> <span class=\'Style3\'>VOSTFR</span><br><img src=\'http://kaytos-mangas.wifeo.com/images/35689.jpg\' border=\'1\' height=\'120\' width=\'160\'/></div>');" onmouseout="killlink()" href="http://kaytos-mangas.niloo.fr/index.php?file=Page&name=en_construction"><img src="http://kaytos-mangas.wifeo.com/images/35689.jpg" border="1" height="120" width="160"></a></span>

  <span class="\'Style1\'"><a onmouseover="poplink('<div align=\'left\'> <span class=\'Style1\'>Titre de l\'Animes:</span> <span class=\'Style3\'>Air Gear</span><br><span class=\'Style1\'>Nombres d\'episodes :</span> <span class=\'Style3\'>25/25 + Bonus</span><br><span class=\'Style1\'>Language :</span> <span class=\'Style3\'>VOSTFR</span><br><img src=\'http://kaytos-mangas.wifeo.com/images/Air-gear.PNG\' border=\'1\' height=\'120\' width=\'160\'/></div>');" onmouseout="killlink()" href="http://kaytos-mangas.niloo.fr/index.php?file=Page&name=en_construction"><img src="http://kaytos-mangas.wifeo.com/images/Air-gear.PNG" border="1" height="120" width="160"></a></span>
  <span class="\'Style1\'"><a onmouseover="poplink('<div align=\'left\'> <span class=\'Style1\'>Titre de l\'Animes:</span> <span class=\'Style3\'>Ga-Rei-Zero</span><br><span class=\'Style1\'>Nombres d\'episodes :</span> <span class=\'Style3\'>12/12 </span><br><span class=\'Style1\'>Language :</span> <span class=\'Style3\'>VOSTFR</span><br><img src=\'http://kaytos-mangas.wifeo.com/images/48342.jpg\' border=\'1\' height=\'120\' width=\'160\'/></div>');" onmouseout="killlink()" href="http://kaytos-mangas.niloo.fr/index.php?file=Page&name=en_construction"><img src="http://kaytos-mangas.wifeo.com/images/48342.jpg" border="1" height="120" width="160"></a></span>
  
  <p>
Smiley sweatdrop

ou ça pour une seule image 

<span class="\'Style1\'">
<a onmouseover="poplink('<div align=\'left\'>
<span class=\'Style1\'>Titre de l\'Animes:</span>
<span class=\'Style3\'>FullMetal Brotherhood</span>
<br><span class=\'Style1\'>Nombres d\'episodes :</span>
<span class=\'Style3\'>31/... </span><br>
<span class=\'Style1\'>Language :</span> <span class=\'Style3\'> VOSTFR </span>
<br>
<img src=\'http://kaytos-mangas.wifeo.com/images/FMAbrotherhood24.JPG\' border=\'1\' height=\'120\' width=\'160\'/></div>');" onmouseout="killlink()" href="http://kaytos-mangas.niloo.fr/index.php?file=Page&name=en_construction"><img src="http://kaytos-mangas.wifeo.com/images/FMAbrotherhood24.JPG" border="1" height="120" width="160"></a>
</span>


hé bien ton <div align="center"> je le mettrais à la bonne largeur (width:525px dans ton cas) avec une hauteur auto et ses margin:0 auto; pour le centrer.

et dedans je créerais un style génaral pour tous les blocs qui vont contenir tes images.
<div style="width:auto; height:auto; une marge de 5px 6px entre la photo et le bloc pour respecter les espaces que tu as mis je les ferais flotter à gauche et leur attribuerais une position:relative. soit 

.bloc-pop-up { width:auto; height:auto; margin:5px 6px; padding:0; float:left; position:relative; }

dedans je mettrais mon image avec le lien 

<a href="http://kaytos-mangas.niloo.fr/index.php?file=Page&name=en_construction">
<span>
<font class="Style1">Titre de l'Animes:</font>
<font class="Style3">FullMetal Brotherhood</font>
<br><font class="Style1">Nombres d'episodes :</font>
<font class="Style3">31/... </font><br>
<font class="Style1">Language :</font>
<font class="Style3"> VOSTFR </font>
<br>
<img src="http://kaytos-mangas.wifeo.com/images/FMAbrotherhood24.JPG" style="width:160px; height:120px; border:solid 1px;"  />
</span>
<img src="http://kaytos-mangas.wifeo.com/images/FMAbrotherhood24.JPG" style="width:160px; height:120px; border:solid 1px;" />
</a>


sans oublier le 
a span { display:none; }

et le 
a:hover span { display:inline; }

Modifié par chooky (21 Dec 2009 - 21:10)
a écrit :
chooky a écrit : hé bien ton <div align="center"> je le mettrais à la bonne largeur (width:525px dans ton cas) avec une hauteur auto et ses margin:0 auto; pour le centrer.

et dedans je créerais un style génaral pour tous les blocs qui vont contenir tes images.
<div style="width:auto; height:auto; une marge de 5px 6px entre la photo et le bloc pour respecter les espaces que tu as mis je les ferais flotter à gauche et leur attribuerais une position:relative. soit


.bloc-pop-up { width:auto; height:auto; margin:5px 6px; padding:0; float:left; position:relative; }


euh j'ai pas compris ou mettre sa 
.bloc-pop-up { width:auto; height:auto; margin:5px 6px; padding:0; float:left; position:relative; }


et ce n'est pas vraiment le resultat que je veut atteindre
enfin je sait pas si se que j'ai fait es bon Smiley ohwell mais moi je veut que sa fache comme l'image un peu plus haut

mais comme je n'ai pas compris le code de tout a l'heure l'erreur vien surement de moi Smiley sweatdrop

( je laisse mon site avec le modif que tu m'a conseiller et ce que j'ai fait pour que tu voit si je me suis tromper )
Modifié par kaytos (02 Jan 2010 - 23:27)
ben le style CSS, tu la met où tu veux dans ta feuille de style Smiley ohwell

j'utilise ces infos bulles très souvent et les utilises différement.

par exemple ici si tu passes devant les aéroports

ou encore ici si tu passes devant une voiture et là il est utilisé pour les photos de nuits

Là je vais voir ton code source et je vois que tu as remis ta fonction javascript donc je suis désolé mais je ne peux pas t'aider beaucoup. Smiley confus

Par contre le résultat que tu as est exactement le même que si tu n'avais pas mis ton cadre parent en relative et positionné ta bulle en absolute. Tu aurais le même résultat avec le CSS mentionné ci dessus.

a:hover span { display:inline; position:absolute; top:15px; right:15px; }


je ne t'avais pas donné le positionnement absolute du span hover donc si tu ne l'avais pas fait, remplace la ligne que je t'avsi donné
a:hover span { display:inline; }
par la nouvelle citée précédamment.

et envoi un petit message lorsque tu auras mis en ligne le code, soit patient on a 6h00 de décallage horaire Smiley cligne
Modifié par chooky (22 Dec 2009 - 17:50)

/* Sous Titres */ 

a span { display:none; } 
a:hover span { display:inline; position:absolute; top:15px; right:15px; }

.bloc-pop-up { 
width:auto; 
height:auto; 
margin:5px 6px; 
padding:0;
float:left; 
position:relative; 
}


voila les code que j'ai rajouter dans mon fichier style.css

mais le problème , l'infos bulles apparait en haut a droite de la page ( pas vraiment super ) et donc sa ne suit toujours pas la souris

euh par précision il faut que le code dans l'info bulle soit dans un tableau , et qu'il suit la souris après passage sur l'image , et disparaitre une fois que la souris n'est plus sur l'image

et encore merci pour ton aide .
Oui c'est un bon début Smiley cligne

maisregardes bien ton code html

<div>

  <a href="http://kaytos-mangas.niloo.fr/index.php?file=Page&name=en_construction"> 
<span> 
<font class="Style1">Titre de l'Animes:</font> 
<font class="Style3">FullMetal Brotherhood</font> 
<br><font class="Style1">Nombres d'episodes :</font> 

<font class="Style3">31/... </font><br> 
<font class="Style1">Language :</font> 
<font class="Style3"> VOSTFR </font> 
<br> 
<img src="http://kaytos-mangas.wifeo.com/images/FMAbrotherhood24.JPG" style="width:160px; height:120px; border:solid 1px;"  /> 
</span> 
<img src="http://kaytos-mangas.wifeo.com/images/FMAbrotherhood24.JPG" style="width:160px; height:120px; border:solid 1px;" /> 
</a>


tu n'as pas affecté ton class="bloc-pop-up" à ton <div> et tu n'as pas fermé ta balise </div> Smiley ohwell

ça ne peut pas marcher. essayes avec ça

<div class="bloc-pop-up">

  <a href="http://kaytos-mangas.niloo.fr/index.php?file=Page&name=en_construction"> 
<span> 
<font class="Style1">Titre de l'Animes:</font> 
<font class="Style3">FullMetal Brotherhood</font> 
<br><font class="Style1">Nombres d'episodes :</font> 

<font class="Style3">31/... </font><br> 
<font class="Style1">Language :</font> 
<font class="Style3"> VOSTFR </font> 
<br> 
<img src="http://kaytos-mangas.wifeo.com/images/FMAbrotherhood24.JPG" style="width:160px; height:120px; border:solid 1px;"  /> 
</span> 
<img src="http://kaytos-mangas.wifeo.com/images/FMAbrotherhood24.JPG" style="width:160px; height:120px; border:solid 1px;" /> 
</a>
</div>

Modifié par chooky (22 Dec 2009 - 21:26)
Et je n'avais pas vu 

<style type="text/css">
<!--

.bloc-pop-up { width:auto; height:auto; margin:5px 6px; padding:0; float:left; position:relative; }
-->
</style>


dans la balise <body> tu vas t'attirer les foudres des modos Smiley biggrin

laisse ton style dans ta feuille de style puisque il y est déjà. Smiley cligne

si tu veux rajouter une bordure blanche de 1 px à ta fenêtre comme tu l'avais fait au début, tu rajoutes dans le style de ton a:hover span border:solid 1px #FFFFFF;

je te laisse te débrouiller Smiley langue

@+ tard Smiley smile
Modifié par chooky (22 Dec 2009 - 21:30)
c'est bon , j'ai rajouter le class="bloc-pop-up" et le </div>

j'ai supprimer le 
<style type="text/css"> 
<!-- 
 
.bloc-pop-up { width:auto; height:auto; margin:5px 6px; padding:0; float:left; position:relative; } 
--> 
</style>


puisque visiblement il devait pas être la

après tous ses effort , youpi une info bull apparait , seul hic , elle ne suit toujours pas la souris Smiley bawling et l'image juste en dessous se retrouve plus bas qu'avant ( encore snif )
Bon là ... il faut quand même que tu fasse un petit effort Smiley fache

Je te donne la base, maintenant il faut que tu fasses preuve d'un petit peu d'imagination.
Déjà, quand je vais voir, il est évident qu'il te manque une couleur de fond. Donc tu rajoutes à ton a:hover span un background-color:#000000; et la bordure que je t'ai écrite dans le précédant post.

Ensuite, effectivement ton info bulle est trop basse, dans ce cas au lieu de l'aligner par rapport au top tu l'alignes par rapport au bas (bottom)

tu remplaces position:absolute; top:15px; right:15px; par bottom:15px; left:100px; background-color:#000000; border:solid 1px #FFFFFF;

et puis tu joueras ensuite pour la position avec les distances bottom et left.

bottom:15px correspond à placer ta bulle à 15px du bas de ton de ton div, et left:100px correspond à 100px de la gauche de ton div.

Après tu joues comme tu veux avec ces valeurs pour la placer où tu veux au pixel près.

Voili voilou

@+
Pages :
Sujet clos
Aller à