Mettre un bouton cliquable vers une nouvelle page en hover

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

Résolu Mettre un bouton cliquable vers une nouvelle page en hover

Message par Offrande le Mer 30 Oct 2013 - 2:42

Bonjour, 

Je souhaiterais mettre un bouton cliquable sur mon forum qui ouvrirait une nouvelle page et qui changerais de couleur au survol.

Pour ceci j'ai donc créer deux image et fait un hover dans ma fiche de style mais je ne sais pourquoi, quelque chose m'échappe cela ne fonctionne pas.

Voila mes deux image
Normal et Survolé : 

 

Et voila ma feuille de style, au du moins mon petit code arrangé Smile : 
Code:
.bouton_havre1 {
  height: 31px;
  width: 38px;
  background-image: url(http://i56.servimg.com/u/f56/17/99/16/25/coolte10.png);
}

.bouton_havre1:hover {
  height: 31px;
  width: 38px;
  background-image: url(http://i56.servimg.com/u/f56/17/99/16/25/coolte11.png);
}
Et, pour finir voila la div que j'ai créer pour faire tout cette ensemble (il manque le lien cliquable + l'indication _bank je croit pour que le lien s'ouvre dans une nouvelle page) : 

Code:
<div class=bouton_havre1><img src="http://i56.servimg.com/u/f56/17/99/16/25/coolte11.png" alt="Go!"/> </div>
Je vous remercie de votre aide,
et je vous souhaite une agréable et douce nuit I love you 
Tendrement, Offrande.


Dernière édition par Offrande le Ven 8 Nov 2013 - 23:53, édité 1 fois

Offrande
*****

Féminin
Messages : 534
Inscrit(e) le : 05/01/2013

http://le-grand-havre.forumactif.org/
Offrande a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Mettre un bouton cliquable vers une nouvelle page en hover

Message par Self le Mer 30 Oct 2013 - 3:34

Bonsoir Smile .

Le mieux serait de ce passer de CSS et de remplacer tout cela par les évenements onmouseover et onmouseout qui donne:
Code:
<a href="#" onmouseover="document.getElementById('go').src='http://i56.servimg.com/u/f56/17/99/16/25/coolte11.png';" onmouseout="document.getElementById('go').src='http://i56.servimg.com/u/f56/17/99/16/25/coolte10.png';"  target="_blank"><img id="go" src="http://i56.servimg.com/u/f56/17/99/16/25/coolte10.png" alt="Go!"/></a>
Warning n'oubliez pas de changer le # present dans href="#" par le lien de la page voulu Wink .

Cordialment ^^.

Self
+ Hyperactif +

Masculin
Messages : 3710
Inscrit(e) le : 13/06/2013

Self a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Mettre un bouton cliquable vers une nouvelle page en hover

Message par Offrande le Mer 30 Oct 2013 - 3:50

Bonsoir Smile 

Merci beaucoup, cela fonctionne mais le soucis est que, mon forum a une CSS sur les liens et les liens au survol et je croit que cela bloque ton code :/

Voila ma page avec le bouton en bas du sujet.
Il faudrait peut être que je mette des "important!" quelque parts avec du CSS s'il n'y as pas le choix :/

Offrande
*****

Féminin
Messages : 534
Inscrit(e) le : 05/01/2013

http://le-grand-havre.forumactif.org/
Offrande a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Mettre un bouton cliquable vers une nouvelle page en hover

Message par Self le Mer 30 Oct 2013 - 18:01

Bonjour Offrande Smile .

C'est à dire que non, on pourrais appliquer un style au lien ça ne changera rien je pense.
Cependant, je ne vois pas très bien ou ça bloque Neutral .

Cordialement ^^.

Self
+ Hyperactif +

Masculin
Messages : 3710
Inscrit(e) le : 13/06/2013

Self a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Mettre un bouton cliquable vers une nouvelle page en hover

Message par MasDan le Mer 30 Oct 2013 - 18:27

Bonjour,

Aucun changement d'image sur survol car le CSS (lignes 1 et 7) du premier message est  prévue pour la classe «bouton_havre1»  alors que le code fourni utilise le id «go».

À votre CSS, remplacer «.bouton_havre1» par «#go» aux lignes 1 et 7 et tout devrait fonctionner.

MasDan
*****

Masculin
Messages : 797
Inscrit(e) le : 24/05/2011

http://projetaum2.forumactif.com/
MasDan a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Mettre un bouton cliquable vers une nouvelle page en hover

Message par Self le Mer 30 Oct 2013 - 19:11

Bonjour Smile.

La cause du problème n'est pas le CSS , il n'y en a d'ailleur pas besoin avec le code que j'ai fournis.
C'est encore ce fameux éditeur de messages qui nous embête.
vous pouvez voir que si vous placez ce code partout sauf dans un message cela fonctionne, dès lorsque l'on essai de l'écrire dans un message cela ne fonctionne plus Neutral .

Cordialement Wink .

Self
+ Hyperactif +

Masculin
Messages : 3710
Inscrit(e) le : 13/06/2013

Self a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Mettre un bouton cliquable vers une nouvelle page en hover

Message par Offrande le Ven 1 Nov 2013 - 1:34

Bonjour, 

Merci beaucoup de vos réponses.
Donc le meilleurs serais d'appliquer un bouton simple sens style, puis quand l'éditeurs sera réparé car apparemment il y as énormément de bug en ce moment même au niveaux des tableaux qui laissent des espace énormes au dessus d'eux bien je placerai un style?

Merci beaucoup de votre aide, 
Je vous souhaite une agréable soirée

Offrande
*****

Féminin
Messages : 534
Inscrit(e) le : 05/01/2013

http://le-grand-havre.forumactif.org/
Offrande a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Mettre un bouton cliquable vers une nouvelle page en hover

Message par Self le Ven 1 Nov 2013 - 3:40

Bonsoir Offrande Smile.

je n'ai pas tester dans un message mais par le CSS cela pourrait, il faudrait juste allonger le lien avec des espaces insécables.
essayez de reprendre votre code CSS et de le placé dans la feuille de style, puis pour créer le bouton avec le HTML:
Code:
<div class=bouton_havre1>
<a href="VOTRE LIEN">&.nbsp;&.nbsp;&.nbsp;&.nbsp;&.nbsp;&.nbsp;&.nbsp;&.nbsp;&.nbsp;&.nbsp;&.nbsp;</a>
</div>
Il faut enlever le . dans les &.nbsp; je ne sais pas pourquoi si je les met normalement ça les transforme en espace même entre les balises code Neutral.
Il faudra peut être plus de &.nbsp; et ce n'est pas la meilleur des solution, mais ça peut fonctionner Wink.

Cordialement ^^.

Self
+ Hyperactif +

Masculin
Messages : 3710
Inscrit(e) le : 13/06/2013

Self a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Mettre un bouton cliquable vers une nouvelle page en hover

Message par Offrande le Ven 1 Nov 2013 - 18:24

Bonsoir et merci beaucoup SeLfde4Th7 mais je ne comprend pas à quoi ces espaces me serviront dans la mise en forme de mon bouton ? Non !

Offrande
*****

Féminin
Messages : 534
Inscrit(e) le : 05/01/2013

http://le-grand-havre.forumactif.org/
Offrande a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Mettre un bouton cliquable vers une nouvelle page en hover

Message par Self le Ven 1 Nov 2013 - 18:33

Bonjour Smile .

De rien, et bien si vous mettez un seul des ces espaces, le lien ne remplira qu'une petite partie de l'image à gauche qu'il faudra chercher pendant des heures pour cliquer dessus Razz .

Cordialement Wink .

Self
+ Hyperactif +

Masculin
Messages : 3710
Inscrit(e) le : 13/06/2013

Self a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Mettre un bouton cliquable vers une nouvelle page en hover

Message par Offrande le Ven 1 Nov 2013 - 18:45

D'accord, mais c'est à cause du bug des message et sujet qu'il y as en ce moment sur forumactif ou bien ces simplement une valeurs que je doit mettre ? ::fleur::

Offrande
*****

Féminin
Messages : 534
Inscrit(e) le : 05/01/2013

http://le-grand-havre.forumactif.org/
Offrande a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Mettre un bouton cliquable vers une nouvelle page en hover

Message par Self le Ven 1 Nov 2013 - 22:12

Bonsoir Offrande Smile .

Non cette fois c'est une logique du html.
Si on met un espace c'est cet espace qui servira de lien et l'espace n'est pas plus grand qu'un espace , donc le lien non plus n'est pas plus grand qu'un espace Razz .

Cordialement Very Happy .

Self
+ Hyperactif +

Masculin
Messages : 3710
Inscrit(e) le : 13/06/2013

Self a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Mettre un bouton cliquable vers une nouvelle page en hover

Message par Offrande le Lun 4 Nov 2013 - 3:01

Bonsoir, 

D'accord j'ai compris, merci beaucoup pour cette indications.
Donc du tout je met quelle code? Puis-je a présent faire un hover sur mon bouton si le bug as été réparé? 

Merci beaucoup je t'embrasse, 
et te souhaite une très bonne journée Smile

Offrande
*****

Féminin
Messages : 534
Inscrit(e) le : 05/01/2013

http://le-grand-havre.forumactif.org/
Offrande a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Mettre un bouton cliquable vers une nouvelle page en hover

Message par Self le Lun 4 Nov 2013 - 14:42

Bonjour Offrande Smile.

Et bien il faut mettre dans ta feuille de style CSS le code donné dans le premier message :
Code:
       .bouton_havre1 {
          height: 31px;
          width: 38px;
          background-image: url(http://i56.servimg.com/u/f56/17/99/16/25/coolte10.png);
        }
        
       .bouton_havre1:hover {
          height: 31px;
          width: 38px;
          background-image: url(http://i56.servimg.com/u/f56/17/99/16/25/coolte11.png);
        }
Et dans ton message:
Code:
        <div class=bouton_havre1>
        <a href="VOTRE LIEN">&.nbsp;&.nbsp;&.nbsp;&.nbsp;&.nbsp;&.nbsp;&.nbsp;&.nbsp;&.nbsp;&.nbsp;&.nbsp;</a>
        </div>
Cordialement Razz.

Self
+ Hyperactif +

Masculin
Messages : 3710
Inscrit(e) le : 13/06/2013

Self a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Mettre un bouton cliquable vers une nouvelle page en hover

Message par Offrande le Ven 8 Nov 2013 - 23:53

Bonsoir, j'ai essayer avec un bouton comme ceci : 

Code:
<div class=bouton_havre1>
<a href="VOTRE LIEN"></a>
</div>
Et cela fonctionne très bien, dans le cas contraire ou j'avais laisser les caractères on les voyer carment apparaître sur la feuille dans le style de mes "links" . Je l'ai ai donc retiré et tout vas bien.

Merci beaucoup de m'avoir aider, je met le sujet en résolus
et vous souhaite une agréable soirée Very Happy

Offrande
*****

Féminin
Messages : 534
Inscrit(e) le : 05/01/2013

http://le-grand-havre.forumactif.org/
Offrande a été remercié(e) par l'auteur de ce sujet.

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


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