Insérer bouton rollover

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

Résolu Insérer bouton rollover

Message par emile.boupé le Lun 11 Oct 2010 - 19:48

Bonjour, je veux insérer sur mon forum des boutons avec effet rollover. J'en ai conçu. Cependant je ne sais pas comment les faire fonctionner sur le forum:
- dans le panneau de contact (accueil - portail - calendrier - faq - rechercher...etc)


ni

- dans les widgets.

Voici ce code:
<script type="text/javascript">
Image1 = new Image();
Image1.src = "http://i24.servimg.com/u/f24/15/74/63/65/button10.png";
Image2 = new Image();
Image2.src = "http://i24.servimg.com/u/f24/15/74/63/65/button11.png";
</script>

<img name="RollImage" style="border : 0px" src="http://i24.servimg.com/u/f24/15/74/63/65/button10.png" alt="" onMouseOver="document.RollImage.src='http://i24.servimg.com/u/f24/15/74/63/65/button11.png'" onMouseOut="document.RollImage.src='http://i24.servimg.com/u/f24/15/74/63/65/button10.png'" /></script>


Ce sont deux lumières vert/bleu qui fonctionnent pourtant bien sur le site de conception. Je l'ai essayé dans un widget, il marche trés bien mais tout seul. Dés que j'en installe un second, ni le premier, ni le second ne marchent; ils s'annulent.

J'ai recherché la solution mais en vain.

Comment donc insérer des boutons rollover dans le panneau de contact (surement un code CCS (?)), ainsi qu'en faire fonctioner plusieurs dans les widgets?

Voici mon forum:
http://psychiques.forumactif.com/portal.htm

Merci pour votre aide.





emile.boupé
Nouveau membre

Messages : 27
Inscrit(e) le : 20/09/2010

http://psychiques.forumactif.com
emile.boupé a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Insérer bouton rollover

Message par emile.boupé le Lun 11 Oct 2010 - 19:49

@emile.boupé a écrit:Bonjour, je veux insérer sur mon forum des boutons avec effet rollover. J'en ai conçu. Cependant je ne sais pas comment les faire fonctionner sur le forum:
- dans le panneau de contact (accueil - portail - calendrier - faq - rechercher...etc)


ni

- dans les widgets.


Voici ce code:
<script type="text/javascript">
Image1 = new Image();
Image1.src = "http://i24.servimg.com/u/f24/15/74/63/65/button10.png";
Image2 = new Image();
Image2.src = "http://i24.servimg.com/u/f24/15/74/63/65/button11.png";
</script>

<img name="RollImage" style="border : 0px" src="http://i24.servimg.com/u/f24/15/74/63/65/button10.png" alt="" onMouseOver="document.RollImage.src='http://i24.servimg.com/u/f24/15/74/63/65/button11.png'" onMouseOut="document.RollImage.src='http://i24.servimg.com/u/f24/15/74/63/65/button10.png'" /></script>


Ce sont deux lumières vert/bleu qui fonctionnent pourtant bien sur le site de conception. Je l'ai essayé dans un widget, il marche trés bien mais tout seul. Dés que j'en installe un second, ni le premier, ni le second ne marchent; ils s'annulent.

J'ai recherché la solution mais en vain.

Comment donc insérer des boutons rollover dans le panneau de contact (surement un code CCS (?)), ainsi qu'en faire fonctioner plusieurs dans les widgets?

Voici mon forum:
http://psychiques.forumactif.com/portal.htm

Merci pour votre aide.





emile.boupé
Nouveau membre

Messages : 27
Inscrit(e) le : 20/09/2010

http://psychiques.forumactif.com
emile.boupé a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Insérer bouton rollover

Message par james beckett le Lun 11 Oct 2010 - 20:12

Bonjours,

Je vous propose ça:

Enfaite j'ai enlevé tout les js pour y mettre du css

dans le css de votre forum:
Code:
.img_deux:hover
{
background-image: url("http://i24.servimg.com/u/f24/15/74/63/65/button10.png"); /*image quand la souris est dessus */
}

.img_deux
{
background-image: url("http://i24.servimg.com/u/f24/15/74/63/65/button11.png"); /* image quand la souris est pas dessus
display: block;
width: 200px;
height: 34px;
background-repeat: no-repeat;
}

Le code html:
Code:
  <a href="#" class="img_deux"></a>

Pour rajouter d'autre il faut juste modifier les class

ex:
Code:
.img_trois:hover
{
background-image: url("http://i24.servimg.com/u/f24/15/74/63/65/button10.png"); /*image quand la souris est dessus */
}

.img_trois
{
background-image: url("http://i24.servimg.com/u/f24/15/74/63/65/button11.png"); /* image quand la souris est pas dessus
display: block;
width: 200px;
height: 34px;
background-repeat: no-repeat;
}

html:
Code:
  <a href="#" class="img_deux"></a>

ect

James

james beckett
****

Masculin
Messages : 338
Inscrit(e) le : 11/10/2009

http://dailylife.forumactif.org/index.htm
james beckett a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Insérer bouton rollover

Message par emile.boupé le Mar 12 Oct 2010 - 9:24

Bonjour james beckett. Merci beaucoup de m'avoir répondu.
J'ai placé le code CSS mais rien n'y a changé. Je suis donc toujours confronté à la même question. Pourtant je vois que sur certains forums celà marche trés bien.

Je relance donc la question: Comment faire fonctionner des boutons rollover à la fois sur le panneau d'acceuil sur le forum (Portail, Enregistrement, etc) et en placer plusieurs dans un même widget. Mes connaissances en langage informatique sont limitées, j'y débute, donc un langage clair pourrait m'aider mieux à comprendre la manoeuvre plus concrètement.

D'avance je vous remercie. Merci beaucoup james beckett de nouveau pour votre aide.
Adresse de mon forum:
http://psychiques.forumactif.com/portal.htm

emile.boupé
Nouveau membre

Messages : 27
Inscrit(e) le : 20/09/2010

http://psychiques.forumactif.com
emile.boupé a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Insérer bouton rollover

Message par james beckett le Mar 12 Oct 2010 - 16:03

Bonjours,

Je viens de voir que j'ai fait une erreur.

Dans votre code il devrait y avoir ça:

Code:

      <a href="#" class="img_deux"></a> <!--pour la premiere-->
      <a href="#" class="img_trois"></a> <!--pour la deuxieme-->

James

james beckett
****

Masculin
Messages : 338
Inscrit(e) le : 11/10/2009

http://dailylife.forumactif.org/index.htm
james beckett a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Insérer bouton rollover

Message par emile.boupé le Mer 13 Oct 2010 - 16:16

Bonjour james beckett. Merci de nouveau pour votre aide précieuse.

J'ai abandonné,, je ne comprends pas ce code.
Il y a au départ 2 images: image A foncée
http://i24.servimg.com/u/f24/15/74/63/65/button10.png + image B lumière http://i24.servimg.com/u/f24/15/74/63/65/button11.png. Donc 2 images forcément, c'est bien ce que vous rappelez trés justement.

Mais je n'arrive pas à comprendre l'agencement complet de ce code. Je suis nouveau en HTML mais je réfléchis quand même, et j'ai visité plusieurs sites, vu différents codes (que j'ai essayé sur mon éditeur de texte) et également tourné tout ça dans ma tête.

Le site de confection me donne celà:
1 - Insert the HTML tag for javascript and sub menus.
<script src="menuscript.js" language="javascript" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="menustyle.css" media="screen, print" />

2 - Insert the HTML tag to display the menu. This is the HTML code to display the menu.You must insert it in the BODY part of your HTML document.
<table border="0" cellpadding="0" cellspacing="0"><tr><td>
<a href="*" onmouseover="setOverImg('1','');" onmouseout="setOutImg('1','');" target=""><img src="buttons/button1up.png" border="0" id="button1" vspace="0" hspace="0"></a><br>
<a href="*" onmouseover="setOverImg('2','');" onmouseout="setOutImg('2','');" target=""><img src="buttons/button2up.png" border="0" id="button2" vspace="0" hspace="0"></a><br>
<a href="*" onmouseover="setOverImg('3','');" onmouseout="setOutImg('3','');" target=""><img src="buttons/button3up.png" border="0" id="button3" vspace="0" hspace="0"></a><br>
<a href="*" onmouseover="setOverImg('4','');" onmouseout="setOutImg('4','');" target=""><img src="buttons/button4up.png" border="0" id="button4" vspace="0" hspace="0"></a><br>
<a href="*" onmouseover="setOverImg('5','');" onmouseout="setOutImg('5','');" target=""><img src="buttons/button5up.png" border="0" id="button5" vspace="0" hspace="0"></a><br>
</td></tr></table>


Il y a au total 5 images.

Mais là pour moi c'est du Russe. J'ai converti en HTML le premier code pour obtenir le Body. J'y ai inséré le second code mais là je bloque. Je ne comprends pas pourquoi il y a l'emplacement de 3 images par ligne? A moins que je ne me trompe?
Placé dans le widget il y a bien l'ordonnancement des places respectives des 5 boutons par lignes distinctes.

Voilà, je ne sais pas j'y ai réfléchi beaucoup, et vais continuer à le faire. C'est pourtant quelque chose qui doit être assez simple.

Encore une fois merci james beckett pour votre aide. Ce code de lumières va me donner des nuits blanches je suis certain.

Bien à vous, trés cordialement.

http://psychiques.forumactif.com/portal.htm

emile.boupé
Nouveau membre

Messages : 27
Inscrit(e) le : 20/09/2010

http://psychiques.forumactif.com
emile.boupé a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Insérer bouton rollover

Message par james beckett le Mer 13 Oct 2010 - 16:27

Bonjours,

Normalement vous avez dû télécharger un dossier.

Dans ce dossier il dois y avoir un fichier nommé menustyle.css

Pourriez-vous collez ce code dans votre prochain message.

James

james beckett
****

Masculin
Messages : 338
Inscrit(e) le : 11/10/2009

http://dailylife.forumactif.org/index.htm
james beckett a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Insérer bouton rollover

Message par quierra le Mer 13 Oct 2010 - 17:27

Coucou, pourquoi utiliser des scripts aussi complexes pour de simples images ?

Tu as plusieurs façons de procéder qui sont tellement plus simple !

Déjà les codes remis par James et par exemple :

<a href="lien du bouton">
<img class="navig" alt="rechercher"
src="adresse de l'image 1"
onmouseout="src='adresse de l'image 1';
" onmouseover="src='adresse de l'image 2';
" title="rechercher"/>
</a>

ici la class"navig", te permet juste de pouvoir personnaliser dans ton css si besoin est, mettre un espace par exemple.

********************************

ou encore :

<img alt="texte alternatif" title="titre" src="adresse de l'image 1" name="bout1" onmouseover="bout1. src='adresse de l'image 2'" onmouseout="bout1. src='adresse de l'image 1'">

Si d'autres images, il faut modifier le "bout1", comme je l'ai nommé pour le premier, ce qui donnerai par exemple :

<img alt="texte alternatif" title="titre" src="adresse de l'image 1" name="bout2" onmouseover="bout2. src='adresse de l'image 2'" onmouseout="bout2. src='adresse de l'image 1'">

Si avec un lien, ça donne :

<a href="adresse du lien" >
<img alt="texte alternatif" title="titre" src="adresse de l'image 1" name="bout1" onmouseover="bout1. src='adresse de l'image 2'" onmouseout="bout1. src='adresse de l'image 1'">
</a>

<a href="adresse du lien" >
<img alt="texte alternatif" title="titre" src="adresse de l'image 1" name="bout2" onmouseover="bout2. src='adresse de l'image 2'" onmouseout="bout2. src='adresse de l'image 1'">
</a>

****************************

Tu as aussi la possibilité de rassembler tes deux images et spécifier leurs emplacement à l'aide d'un code,

Image à créer :



code à mettre dans le html (widget, accueil, post....)

<span id="ton_bouton"></span>

le code à mettre dans le css :

#ton_bouton{width:85px; height:32px; background:url(adresse de l'image) no-repeat 0 0;}
#ton_bouton:hover{background:url(adresse de l'image) no-repeat 0 -32px;}

Un peut plus complexe peut être, mais permet un survol très fluide...

Y a d'autres façons encore, mais je te conseille le premier ou deuxième qui sont vraiment très simple, tu peux bien évidement rajouter autant de boutons que tu veux.

Bonne journée.

quierra
****

Féminin
Messages : 278
Inscrit(e) le : 22/08/2007

http://themes-fa.com
quierra a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Insérer bouton rollover

Message par emile.boupé le Jeu 14 Oct 2010 - 16:56

Bonjour james
Bonjour quierra

Merci pour votre aide trés précieuse . C'est vrai que je debute d'où mes lacunes, le monde ne s'est pas fait en un jour. J'ai donc repris touts tes codes un par un. Pour l'instant le seul que j'arrive à faire fonctionner est celui-là:

<a href="lien du bouton">
<img class="navig" alt="rechercher"
src=" adresse de l'image 1 "
onmouseout="src=' adresse de l'image 1 ';
" onmouseover="src=' adresse de l'image 2 ';
" title="rechercher"/>
</a>

Il fonctionne merveilleusement bien. Pour les autres je les essayé mais sans résultat, mais ça vient de ma compréhension des codes, c'est un simple positionnement des images en dans. Votre aide m'a été infiniment trés précieuse et je vous remercie. Ce sont des bouts de codes qu'il faut comprendre, ça viendra. Merci bien à vous deux. Et je considère ce post résolu.

Merci à l'équipe du forum.

emile.boupé
Nouveau membre

Messages : 27
Inscrit(e) le : 20/09/2010

http://psychiques.forumactif.com
emile.boupé a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Insérer bouton rollover

Message par quierra le Sam 16 Oct 2010 - 20:41

Coucou, et bien je constate de plus en plus fréquemment que "onmouseover et onmouseout", ne fonctionnent plus aussi bien qu'avant ! Peut marcher sur l'accueil et pas dans un post etc... Je suppose que ça a un rapport avec le DOCTYPE de la page.

Quand je constate le souci, je le remplace par :

Code:
<a href="url du lien" target="blank"><img alt="texte alternatif" title="titre" src='adresse de l'image 1' border='0' onmouseover="this.src = 'adresse de l'image 2';"  onmouseout="this.src = 'adresse de l'image 1';"></img></a>

Qui semble ne pas poser problème (pour l'instant)

Bonne soirée.

quierra
****

Féminin
Messages : 278
Inscrit(e) le : 22/08/2007

http://themes-fa.com
quierra a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Insérer bouton rollover

Message par emile.boupé le Mar 19 Oct 2010 - 16:30

Salut quierra le Sam.

Merci pour ce second lien qui marche parfaitement. Il semble effectivement que certians codes soient bloqués et ne fonctionnent, sans doute une histoire de navigateur. Là j'ai pu poser mes boutons rollover et ils fonctionnent. J'ai encore du boulot à apprendre mais ça viendra.

Merci de nouveau pour tout et ton soutien. Bien à toi, trés cordialement.

emile.boupé
Nouveau membre

Messages : 27
Inscrit(e) le : 20/09/2010

http://psychiques.forumactif.com
emile.boupé 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