Insérer bouton rollover

[emile.boupé]

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 = "https://i.servimg.com/u/f24/15/74/63/65/button10.png";
Image2 = new Image();
Image2.src = "https://i.servimg.com/u/f24/15/74/63/65/button11.png";
</script>

<img name="RollImage" style="border : 0px" src="https://i.servimg.com/u/f24/15/74/63/65/button10.png" alt="" onMouseOver="document.RollImage.src='https://i.servimg.com/u/f24/15/74/63/65/button11.png'" onMouseOut="document.RollImage.src='https://i.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é]

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 = "https://i.servimg.com/u/f24/15/74/63/65/button10.png";
Image2 = new Image();
Image2.src = "https://i.servimg.com/u/f24/15/74/63/65/button11.png";
</script>

<img name="RollImage" style="border : 0px" src="https://i.servimg.com/u/f24/15/74/63/65/button10.png" alt="" onMouseOver="document.RollImage.src='https://i.servimg.com/u/f24/15/74/63/65/button11.png'" onMouseOut="document.RollImage.src='https://i.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.

[james beckett]

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

[emile.boupé]

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

[james beckett]

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

[emile.boupé]

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 https://i.servimg.com/u/f24/15/74/63/65/button10.png + image B lumière https://i.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

[james beckett]

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

[quierra]

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.

[emile.boupé]

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.

[quierra]

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.

[emile.boupé]

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.