Problème avec un code dans mon en-tête

2 participants

Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Problème avec un script, un code :: Archives des problèmes avec un code

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Problème avec un code dans mon en-tête

Message par BZH35 Ven 11 Mai 2012 - 1:14

Bonjour.

Voilà, aujourd'hui j'ai trouvé un code fort intéressant qui me permet d'afficher la miniature d'une image, et d'en faire le zoom quand je passe le curseur de ma souris dessus.

J'ai donc calé ce code dans l'espace pour l'en-tête dans mon panneau d'administration. Et bien c'est parfait, ça marche, comme vous pourrez le voir en cliquant sur mon forum dans mon profil. L'image en question est l'affiche de catch.

Le seul problème, et vous l'aurez sûrement remarqué, c'est que la totalité des autres images de la pages sont aussi contraintes à cette règle, pourtant elles ne font pas parti de l'en-tête. Comment je peux régler ça?

Je suis en phpbb2 et et je ne peux pas poster le code sans être interdit de poster, c'est nul.


Dernière édition par BZH35 le Ven 11 Mai 2012 - 20:03, édité 1 fois
avatar

BZH35
Nouveau membre

Messages : 17
Inscrit(e) le : 11/05/2012

http://f-o-w-test.catch-forum.fr/forum
BZH35 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec un code dans mon en-tête

Message par Psyaliah Ven 11 Mai 2012 - 5:54

Bonjour,
Il vous suffit de donner une ID css à votre image d'en tête, et de rajouter cette ID devant la class déja inscrite dans le code css que vous avez inséré !
Psyaliah

Psyaliah
Membre habitué

Féminin
Messages : 1281
Inscrit(e) le : 22/12/2011

https://forum.forumactif.com/
Psyaliah a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec un code dans mon en-tête

Message par BZH35 Ven 11 Mai 2012 - 7:20

J'avoue ne pas trop comprendre, concrètement cela consiste à ajouter quoi à mon code? De plus, mon code est en html, pas en css, je ne l'avais pas précisé désolé.
avatar

BZH35
Nouveau membre

Messages : 17
Inscrit(e) le : 11/05/2012

http://f-o-w-test.catch-forum.fr/forum
BZH35 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec un code dans mon en-tête

Message par Psyaliah Ven 11 Mai 2012 - 17:06

Mmmh, pouvez vous me fournir le code html dans ce cas s'il vous plait ?
Psyaliah

Psyaliah
Membre habitué

Féminin
Messages : 1281
Inscrit(e) le : 22/12/2011

https://forum.forumactif.com/
Psyaliah a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec un code dans mon en-tête

Message par BZH35 Ven 11 Mai 2012 - 17:46

Le voilà :
Code:
<html>
<head>
<meta http-equiv=Content-Type content="text/html; charset=iso-8859-1">
<style type="text/css">
a img {border:none}
a:hover img {width:225px ; height:293px}
</style>
</head>
<body>
<a href="#"><img src="http://i43.servimg.com/u/f43/14/83/93/30/smsqbv10.png" width="112" height="146" alt=""></a>
</body>
</html>
avatar

BZH35
Nouveau membre

Messages : 17
Inscrit(e) le : 11/05/2012

http://f-o-w-test.catch-forum.fr/forum
BZH35 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec un code dans mon en-tête

Message par Psyaliah Ven 11 Mai 2012 - 18:47

On va faire autrement ^^
La ou vous mettez votre image, écrivez le comme ceci:
Code:
<span class="catchimg">ton image ici</span>

Ensuite dans PA Arrow Affichage Arrow Couleurs Arrow Feuille de style CSS, insérez:

Code:
a:hover.catchimg {
width: 225px;
height: 293px;
}
Psyaliah

Psyaliah
Membre habitué

Féminin
Messages : 1281
Inscrit(e) le : 22/12/2011

https://forum.forumactif.com/
Psyaliah a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec un code dans mon en-tête

Message par BZH35 Ven 11 Mai 2012 - 18:58

Décidement, je ne comprends pas... j'ai fais ce que vous me dîtes, et l'image ne s'affiche même plus, mais le reste continue d'être zoomé.
avatar

BZH35
Nouveau membre

Messages : 17
Inscrit(e) le : 11/05/2012

http://f-o-w-test.catch-forum.fr/forum
BZH35 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec un code dans mon en-tête

Message par Psyaliah Ven 11 Mai 2012 - 19:09

Votre balise pour l'image est fausse.
De plus il faut supprimer tout ce que vous m'avez copier plus haut.

Donc dans le message de la page d'accueil vous mettez ceci:
Code:
<span class="catchimg">[img]http://i43.servimg.com/u/f43/14/83/93/30/smsqbv10.png[/img]</span>

Et ensuite, la ou je vous l'ai indiqué précédemment, vous coller le code CSS.
Avez vous un autre CSS déja présent ? Si oui merci de le montrer.
Psyaliah

Psyaliah
Membre habitué

Féminin
Messages : 1281
Inscrit(e) le : 22/12/2011

https://forum.forumactif.com/
Psyaliah a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec un code dans mon en-tête

Message par BZH35 Ven 11 Mai 2012 - 19:13

Code:
.forumlink
{
letter-spacing : 4px;
}

body
{
width : 770px;
margin : auto;
margin-top : 10px;
margin-bottom : 10px;
-moz-border-radius : 5px;
-webkit-border-radius : 5px;
}

table
{
-moz-border-radius : 5px;
-webkit-border-radius : 5px;
}

.quote
{
-moz-border-radius : 5px;
-webkit-border-radius : 5px;
border : 3px solid #666666;
padding : 5px;
}

.quote:hover
{
border : 3px solid white;
}

body.chatbox { background: #ffffff url(''); } 
p.chatbox_row_1.clearfix,p.chatbox_row_2.clearfix{background-color:transparent;}



@charset 'utf-8';
/*************************************************!
*
*  project:    liteAccordion - a horizontal accordion plugin for jQuery
*  author:    Nicola Hibbert
*  url:        http://nicolahibbert.com/liteaccordion-v2/
*  demo:      http://www.nicolahibbert.com/demo/liteAccordion/
*
*  Version:    2.0.2
*  Copyright:  (c) 2010-2011 Nicola Hibbert
*  Licence:    MIT
*
**************************************************/
/****************************************** Core */
.accordion { text-align: left; font: 'Helvetica Neue', Verdana, Arial, sans-serif }
.accordion > ol { position: relative; overflow: hidden; height: 100%; margin: 0; padding: 0; list-style-type: none }
.accordion .slide > h2 {
  color: black;
    font-size: 16px; 
  font-weight: normal;
  margin: 0;
  z-index: 100;
  position: absolute;
  top: 0;
  left: 0;
  -webkit-transform: translateX(-100%) rotate(-90deg);
  -webkit-transform-origin: right top;
  -moz-transform: translateX(-100%) rotate(-90deg);
  -moz-transform-origin: right top;
  -o-transform: translateX(-100%) rotate(-90deg);
  -o-transform-origin: right top;
  transform: translateX(-100%) rotate(-90deg);
  transform-origin: right top;
  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=3)";
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
.accordion .slide > h2 span {
    display: block;
    padding-right: 8%;
    text-align: right;
    height: 90%;
    margin-top: 5px;
    -moz-user-select: none;
    -khtml-user-select: none;
    user-select: none;
}
.accordion .slide > h2 b {
    display: inline-block;
    position: absolute;
    top: 13%;
    left: 10%;
    text-align: center;
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);
  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=1)";
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
}
.accordion .slide > h2:hover { cursor: pointer }
.accordion .slide > div { height: 100%; position: absolute; top: 0; z-index: 10; overflow: hidden; background: white }
.accordion noscript p { padding: 10px; margin: 0; background: white }
 
/***************************************** Light */
.accordion {
    border: 9px solid white;
    border-bottom-width: 8px;
    padding: 5px 5px 6px 0;
    background: #a0a0a0;
    -webkit-box-shadow: -1px -1px 0 #c0c0c0, 1px 1px 0 #c0c0c0, 0 5px 15px rgba(0, 0, 0, 0.4);
    -moz-box-shadow: -1px -1px 0 #c0c0c0, 1px 1px 0 #c0c0c0, 0 5px 15px rgba(0, 0, 0, 0.4);
    -ms-box-shadow: -1px -1px 0 #c0c0c0, 1px 1px 0 #c0c0c0, 0 5px 15px rgba(0, 0, 0, 0.4); 
    -o-box-shadow: -1px -1px 0 #c0c0c0, 1px 1px 0 #c0c0c0, 0 5px 15px rgba(0, 0, 0, 0.4);
  box-shadow: -1px -1px 0 #c0c0c0, 1px 1px 0 #c0c0c0, 0 5px 15px rgba(0, 0, 0, 0.4);
}
.accordion .slide > h2 { background: #a0a0a0; text-shadow: 0 -1px 0 white; line-height: 265% }
.accordion .slide > h2 span {
    background: #fcfcfc;
    background: -moz-linear-gradient(left,  #fcfcfc 0%, #ededed 100%);
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,#fcfcfc), color-stop(100%,#ededed));
    background: -webkit-linear-gradient(left,  #fcfcfc 0%,#ededed 100%);
    background: -o-linear-gradient(left,  #fcfcfc 0%,#ededed 100%);
    background: -ms-linear-gradient(left,  #fcfcfc 0%,#ededed 100%);
    background: linear-gradient(left,  #fcfcfc 0%,#ededed 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfcfc', endColorstr='#ededed',GradientType=1 );
    -webkit-box-shadow: -1px -1px 0 #909090 inset, 1px 1px 0 #909090 inset;
    -moz-box-shadow: -1px -1px 0 #909090 inset, 1px 1px 0 #909090 inset;
    -o-box-shadow: -1px -1px 0 #909090 inset, 1px 1px 0 #909090 inset;
  box-shadow: -1px -1px 0 #909090 inset, 1px 1px 0 #909090 inset;
    color: #909090;
}
.accordion .slide > h2 b { background: #ffffff; color: #909090; text-shadow: -1px 1px 0 white }
.accordion .slide > h2.selected span, .accordion .slide h2.selected span:hover, .accordion .slide > h2.selected b { background: #ffffff }
.accordion .slide > div { background: #a0a0a0; margin-left: 5px }
 
/*************************************** Rounded */
.rounded, .rounded > ol { -webkit-border-radius: 6px; -moz-border-radius: 6px; -ms-border-radius: 6px; border-radius: 6px }
.rounded .slide > h2 span { -webkit-border-radius: 4px; -moz-border-radius: 4px; -ms-border-radius: 4px; border-radius: 4px }
 
/******************************************** IE */
.ie .slide > h2 b { top: 42%; left: 5% }
.ie9 .slide > h2 { filter: none; -ms-transform: translateX(-100%) rotate(-90deg); -ms-transform-origin: right top }
.ie.accordion .slide > h2 b { top: 44% }
.accordion .slide > h2 span { filter: none }
 
/******************************************** FA */
.accordion figure .full { width: 100%; height: 100%; }
.accordion h2 { border: none; }
 
/* centrer l'accordéon */
.accordion { margin: auto; }









a:hover.catchimg {
width: 225px;
height: 293px;
}


 

 



 




Sinon j'ai suivi ce que vous m'avez dis de faire et... l'image s'affiche sans problème maintenant, au détail près qu'il n'y a plus de zoom nul part, même sur elle.
avatar

BZH35
Nouveau membre

Messages : 17
Inscrit(e) le : 11/05/2012

http://f-o-w-test.catch-forum.fr/forum
BZH35 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec un code dans mon en-tête

Message par Psyaliah Ven 11 Mai 2012 - 19:19

J'ai trouvé mon erreur ><
Donc voici pour afficher l'image:

Code:
<img  class="catchimg" src="http://i43.servimg.com/u/f43/14/83/93/30/smsqbv10.png" width="100" height="130"/>
J'ai attribué la class directement à l'image, avec des valeurs pour la rendre plus petite.

Ensuite, dans le css, on remplace le précédent par celui ci:
Code:
.catchimg:hover {
width: 225px;
height: 293px;
}

J'ai testé, ça fonctionne bien cette fois ci !
Psyaliah

Psyaliah
Membre habitué

Féminin
Messages : 1281
Inscrit(e) le : 22/12/2011

https://forum.forumactif.com/
Psyaliah a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Problème avec un code dans mon en-tête

Message par BZH35 Ven 11 Mai 2012 - 19:28

ça fonctionne aussi! Mon héroïne Yahoo
avatar

BZH35
Nouveau membre

Messages : 17
Inscrit(e) le : 11/05/2012

http://f-o-w-test.catch-forum.fr/forum
BZH35 a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut

- Sujets similaires

Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Problème avec un script, un code :: Archives des problèmes avec un code

Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum