Créer un slider bouton qui se déroule au passage de la souris
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Problème avec un script, un code :: Archives des problèmes avec un code
Page 1 sur 1 • Partagez
Créer un slider bouton qui se déroule au passage de la souris
Détails techniques
Version du forum : phpBB3
Poste occupé : Administrateur
Navigateur(s) concerné(s) : Google Chrome
Personnes concernées par le problème : Moi uniquement
Lien du forum : http://nsp-d3.forumofficiel.com/
Description du problème
Bonsoir à vous,Ayant fait des recherches et n'étant pas un pro du codage, j'aimerais quelques conseils / aides pour créer un épingle.
Ce que j'appel épingle est un bouton caché sur le coté qui dépasse un peu et qui se déroule / s'affiche au passage de la souris. J'aimerais mettre ça en place pour cacher lien twitch (en haut à gauche de mon forum) dans un icon twitch et au passage de la souris se déroule le lien que vous voyez en ce moment sur le forum (toujours en haut à gauche.
Merci pour votre aide précieuse.
Dernière édition par Ancients le Dim 6 Mar 2016 - 19:57, édité 2 fois
Re: Créer un slider bouton qui se déroule au passage de la souris
Salut Ancients,
je ne vais pas reprendre le présent sur ton fofo mais te donner l'astuce
afin que tout le monde en profite et ce quelque soit la version utilisée.
Si il n'y a qu'un lien a déposer, ce script fera l'affaire ainsi que la C.S.S associée:
Modules/HTML&JAVASCRIPT/Gestion des codes Javascript/Créer un nouveau Javascript
Mettre un titre explicite.
Cocher sur toutes les pages.
Déposes ceci:
Penses à cliquer sur le bouton
Ici, changes le lien du site et celui de l image,attention toutefois pour l'image car la css sera
associée à ses dimensions 29px / 29px:
Dans la feuille de style:
Affichage/Images et Couleurs/Couleurs/Feuille de style
Déposes ceci:
Penses à cliquer sur le bouton
a++
je ne vais pas reprendre le présent sur ton fofo mais te donner l'astuce
afin que tout le monde en profite et ce quelque soit la version utilisée.
Si il n'y a qu'un lien a déposer, ce script fera l'affaire ainsi que la C.S.S associée:
Modules/HTML&JAVASCRIPT/Gestion des codes Javascript/Créer un nouveau Javascript
Mettre un titre explicite.
Cocher sur toutes les pages.
Déposes ceci:
- Code:
$(function(){
$('body').append('
<div id="M14_btn_slide">
<a href="https://www.google.fr">Google est ton ami</a>
<img src="http://i.imgur.com/zuYrGru.png"title="Afficher masquer le lien"/>
</div>
');
$('#M14_btn_slide').hover(function(){
$('#M14_btn_slide').toggleClass('margin');
});
});
Penses à cliquer sur le bouton
Ici, changes le lien du site et celui de l image,attention toutefois pour l'image car la css sera
associée à ses dimensions 29px / 29px:
- Code:
<a href="https://www.google.fr">Google est ton ami</a>
<img src="http://i.imgur.com/zuYrGru.png"title="Afficher masquer le lien"/>
Dans la feuille de style:
Affichage/Images et Couleurs/Couleurs/Feuille de style
Déposes ceci:
- Code:
/*Le bloc du slide*/
#M14_btn_slide
{
position:fixed;/*on fixe le slide*/
top:60px;/* on le positionne a 60px du haut du fofo*/
width:200px;/*on lui donne une largeur en relation avec l image*/
height:29px;/*on donne une hauteur toujours en relation avec la hauteur de l image*/
left:-200px;/*on cache le bloc*/
background:#12a3eb;/*couleur de fond*/
text-align:center;/*on centre le lien*/
/*La transition*/
-webkit-transition: left 0.5s ease-in-out;
-moz-transition: left 0.5s ease-in-out;
-o-transition: left 0.5s ease-in-out;
transition: left 0.5s ease-in-out;
}
/*Le slide effectue par le script*/
#M14_btn_slide.margin{left:0px;}
/*on positionne l image*/
#M14_btn_slide img
{
position:absolute;
left:200px;/* en fonction de la largeur du bloc*/
cursor:pointer;
}
/*on donne une apparence au lien*/
#M14_btn_slide a{color:#fff;font-size:11px;line-height: 29px;/*en relation avec la hauteur du bloc*/}
Penses à cliquer sur le bouton
a++
Invité- Invité
Re: Créer un slider bouton qui se déroule au passage de la souris
Bonjour Milouze, merci pour votre réponse.
Après plusieurs tentatives, j'y suis presque mais pas tout à fait. L'icon "Twitch" est décalé en dessous du slide.
Voici mon JS :
Voici mon CSS :
Merci pour votre aide
Après plusieurs tentatives, j'y suis presque mais pas tout à fait. L'icon "Twitch" est décalé en dessous du slide.
Voici mon JS :
- Code:
$(function(){
$('body').append('
<div id="M14_btn_slide">
<iframe id="frametwitch" src="http://streambadge.com/twitch/?username=missjsp&theme=dark"></iframe><img src="http://i84.servimg.com/u/f84/19/42/85/35/14573010.png"title="MissJsp"/>
</div>
');
$('#M14_btn_slide').hover(function(){
$('#M14_btn_slide').toggleClass('margin');
});
});
Voici mon CSS :
- Code:
#frametwitch { width: 100%; height: 100%;
border: 1px solid black; position:relative; }
/*Le bloc du slide*/
#M14_btn_slide
{
position:fixed;/*on fixe le slide*/
top:60px;/* on le positionne a 60px du haut du fofo*/
width:200px;/*on lui donne une largeur en relation avec l image*/
height:64px;/*on donne une hauteur toujours en relation avec la hauteur de l image*/
left:-200px;/*on cache le bloc*/
background:#12a3eb;/*couleur de fond*/
text-align:center;/*on centre le lien*/
/*La transition*/
-webkit-transition: left 0.5s ease-in-out;
-moz-transition: left 0.5s ease-in-out;
-o-transition: left 0.5s ease-in-out;
transition: left 0.5s ease-in-out;
}
/*Le slide effectue par le script*/
#M14_btn_slide.margin{left:0px;}
/*on positionne l image*/
#M14_btn_slide img
{
position:absolute;
left:200px;/* en fonction de la largeur du bloc*/
cursor:pointer;
}
/*on donne une apparence au lien*/
#M14_btn_slide a{color:#fff;font-size:11px;line-height: 64px;/*en relation avec la hauteur du bloc*/}
Merci pour votre aide
Re: Créer un slider bouton qui se déroule au passage de la souris
Re,
hum on parlait d'un lien et non d'une iframe,
bref , il n'y a pas de soucis sur ton fofo et non sur le mien (enfin mon fofo de tests):
a++
hum on parlait d'un lien et non d'une iframe,
bref , il n'y a pas de soucis sur ton fofo et non sur le mien (enfin mon fofo de tests):
a++
Invité- Invité
Re: Créer un slider bouton qui se déroule au passage de la souris
Bonjour,
Pourtant l'affichage sur mon forum est celui-ci :
Pourtant l'affichage sur mon forum est celui-ci :
Re: Créer un slider bouton qui se déroule au passage de la souris
Re,
hum effectivement sous Chrome , le bug est flagrant.
Donc en fait tu veux jusque que cette iframe soit plus ou moins cachée et au survol qu'elle s'affiche dans sa totalité ?
a++
hum effectivement sous Chrome , le bug est flagrant.
Donc en fait tu veux jusque que cette iframe soit plus ou moins cachée et au survol qu'elle s'affiche dans sa totalité ?
a++
Invité- Invité
Re: Créer un slider bouton qui se déroule au passage de la souris
Oui c'est ça, c'est un peu ce que je fais (peut être mal à vous de me le dire). Le problème est que l'icon "Twitch" pour le slide est décalé en bas.
Ce bug s'opère sur Chrome et Safari pour moi.
Merci Milouze
Ce bug s'opère sur Chrome et Safari pour moi.
Merci Milouze
Re: Créer un slider bouton qui se déroule au passage de la souris
Re,
on va purement supprimer l'image et laisser apparaitre qu'une partie de ton Iframe.
Remplaces la totalité de la C.S.S donnée par:
Penses à cliquer sur le bouton
Édites le javascript et remplaces tout le contenu par:
Penses à cliquer sur le bouton
a++
on va purement supprimer l'image et laisser apparaitre qu'une partie de ton Iframe.
Remplaces la totalité de la C.S.S donnée par:
- Code:
#frametwitch {width: 100%; height: 100%; border: 1px solid black; position:relative; }
/*Le bloc du slide*/
#M14_btn_slide
{
position:fixed;/*on fixe le slide*/
top:60px;/* on le positionne a 60px du haut du fofo*/
width:200px;/*on lui donne une largeur en relation avec l image*/
height:64px;/*on donne une hauteur toujours en relation avec la hauteur de l image*/
left:-180px;/*on cache le bloc*/
background:#12a3eb;/*couleur de fond*/
text-align:center;/*on centre le lien*/
/*La transition*/
-webkit-transition: left 0.5s ease-in-out;
-moz-transition: left 0.5s ease-in-out;
-o-transition: left 0.5s ease-in-out;
transition: left 0.5s ease-in-out;
}
/*Le slide effectue par le script*/
#M14_btn_slide.margin{left:0px;}
/*on donne une apparence au lien*/
#M14_btn_slide a{color:#fff;font-size:11px;line-height: 64px;/*en relation avec la hauteur du bloc*/}
Penses à cliquer sur le bouton
Édites le javascript et remplaces tout le contenu par:
- Code:
$(function(){
$('body').append('
<div id="M14_btn_slide">
<iframe id="frametwitch" src="http://streambadge.com/twitch/?username=missjsp&theme=dark"title="MissJsp">
</div>
');
$('#M14_btn_slide').hover(function(){
$('#M14_btn_slide').toggleClass('margin');
});
});
Penses à cliquer sur le bouton
a++
Invité- Invité
Re: Créer un slider bouton qui se déroule au passage de la souris
Le rendu est sympa mais en fait je voulais faire un slide pour cacher l'iframe parce qu'on peut pas le personnaliser (je crois) et qu'il rend pas très jolie sur le forum. D'ou le cacher par un icon (jolie) dans un slide.
Merci pour ton temps Milouze!
Merci pour ton temps Milouze!
Re: Créer un slider bouton qui se déroule au passage de la souris
Re,
cela va être compliqué avec une Iframe mon ami.
Essayes ceci en remplaçant la css dans sa totalité:
Penses à cliquer sur le bouton
a++
cela va être compliqué avec une Iframe mon ami.
Essayes ceci en remplaçant la css dans sa totalité:
- Code:
#M14_btn_slide:before
{
content:"";
position:absolute;
background:url(http://i84.servimg.com/u/f84/19/42/85/35/14573010.png)no-repeat;
width:64px;
height:64px;
margin-left:200px;
}
#frametwitch {width: 100%; height: 100%; border: 1px solid black; position:relative; }
/*Le bloc du slide*/
#M14_btn_slide
{
position:fixed;/*on fixe le slide*/
top:60px;/* on le positionne a 60px du haut du fofo*/
width:200px;/*on lui donne une largeur en relation avec l image*/
height:64px;/*on donne une hauteur toujours en relation avec la hauteur de l image*/
left:-205px;/*on cache le bloc*/
background:#12a3eb;/*couleur de fond*/
text-align:center;/*on centre le lien*/
/*La transition*/
-webkit-transition: left 0.5s ease-in-out;
-moz-transition: left 0.5s ease-in-out;
-o-transition: left 0.5s ease-in-out;
transition: left 0.5s ease-in-out;
}
/*Le slide effectue par le script*/
#M14_btn_slide.margin{left:0px;}
Penses à cliquer sur le bouton
a++
Invité- Invité
Re: Créer un slider bouton qui se déroule au passage de la souris
Rien de trop compliqué pour vous il semblerait. Cela marche très bien.
Merci beaucoup pour votre temps
Merci beaucoup pour votre temps
Re: Créer un slider bouton qui se déroule au passage de la souris
Re,
à force , cela devient assez simple .
a++
à force , cela devient assez simple .
a++
Invité- Invité
Sujets similaires
» bouton changeant au passage de la souris
» modification d'un bouton au passage de la souris
» Bouton personnalisé de la Barre de Navigation modifiées au passage de la souris
» passage de la souris sur un bouton créé dans "entête et navigation"
» Suite de "passage-de-la-souris-sur-un-bouton-cree-dans-entete-et-navigation"
» modification d'un bouton au passage de la souris
» Bouton personnalisé de la Barre de Navigation modifiées au passage de la souris
» passage de la souris sur un bouton créé dans "entête et navigation"
» Suite de "passage-de-la-souris-sur-un-bouton-cree-dans-entete-et-navigation"
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Problème avec un script, un code :: Archives des problèmes avec un code
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum