Coup de pouce sur création Rollover

Logiciel & apps Programmation
1

Bonjour tout le monde,

Je souhaite préciser d’entrée que je suis totalement débutant en ce qui concerne la programmation, alors merci de me donner des explications assez clairs :slight_smile:
Donc, je vous explique:
J’essais, a l’aide de Frontpage, de creer un site Web. Jusque la pas trop de problemes…
Pour rendre plus agréable le site, j’ai cherché à creer des « Rollover », après de nombreuses recherches sur internet, j’ai enfin trouvé comment on faisait.
Actuellement, pour le test, j’ai donc deux images dirigées par les deux états « onmouseover » et « onmouseout » dont voici le petit codage :

[i]

[/i]

Donc lorsque j’approche le curseur l’image change, mais en se mettant sur la premiere.

Moi, maintenant ce que je voudrais, c’est une ligne de boutons numérotés, et a chaque fois que l’on approche le curseur sur l’un de ces boutons numérotés, une image s’affiche au dessus. (voir le dessin sur le lien suivant)

img513.imageshack.us…

Merci de m’aider a effectuer ce codage, est ce qu’il faut modifier le Rollover simple que j’ai fait ou est ce un tout autre codage !!!

Merci d’avance pour votre aide :wink:

2

Alors en premier lieu, le javascript est relativement faux :

<!-- Begin
image = new Image();
image.src = "Image1.jpg";
end -->

Tu es dans un script, et va être interprété. Le navigateur risque de/ou va lire :

Begin
image = new Image();
image.src = "Image1.jpg";
end

Et de ne pas comprendre ce Begin et ce end.

A commenter donc :

// Begin
image = new Image();
image.src = "Image1.jpg";
// end

Là encore, le code n’est pas bon (du moins, sauf si tu programmes pour de vieux browsers, tels que Netscape ou IE4) :

<a href="#" onmouseover="image.src = 'Image1.jpg';" onmouseout="image.src = 'Image2.jpg';"><img src="Image2.jpg" border=0 width="80" height="100" name=image></a>

→ 

<a href="#"><img src="Image2.jpg"  onmouseover="this.src = 'Image1.jpg';" onmouseout="this.src = 'Image2.jpg';" width="80" height="100" name=image></a>
  1. comme tout tag (ou presque) (voir IMG, supporte les évènements onmouseover, onmouseout. En javascript, this pointe sur l’objet courant, ici l’image ().
  2. Le lien et le javascript plus haut, ne servent à rien à priori.

Pour ton second problème, je pense que tu as désormais la façon de faire :

<a href="#"><img src="Image2.jpg"  onmouseover="this.src = 'Image2_big.jpg';"  width="80" height="100" name=image></a>

Ce bout de code devrait changer l’image « image2.jpg » par « image2_big.jpg », ce qui n’est pas ce que tu veux.

Par contre si tu as :


<div style="border: 5px solid black; padding: 5px;">
  <img id="container" src="image_noload.png" width="800" height="600" />
  <a href="#"><img src="Image2.jpg"  onmouseover="document.getElementById('container').src = 'Image2_big.jpg';"  width="80" height="100" name=image></a>
</div>

Cela marchera.

EN appliquant l’attribut id avec une valeur unique au long de ta page, tu peux y accéder en javascript avec document.getElementById.

Voilà.

(le reste c’est que de l’esthétique)

3

Merci pour cette réponse

Ok je vais etudier tout ca, je te tiens au courant si je rencontre des problemes

4

Impécable pour les modifications que tu as apporté aux codages précédent.
Super aussi pour le second probleme de presentation, c’est exactement ca que je voulais, reste plus que la presentation a parfaire comme tu le disais.
Par contre, pour le second probleme, je ne comprends pas ca " EN appliquant l’attribut id avec une valeur unique au long de ta page, tu peux y accéder en javascript avec document.getElementById"
C’est quoi l’attribut id !!

Désolé mais je débute, alors c’est pas evident
Edité le 02/07/2007 à 17:46

5

id = identifiant = identifie un élément au sein de ta page.

Cela permet par exemple de faire des ancres internes dans un document :

<a href="#machin" id="machin">Ancre sur le lien</a>

En javascript, et dans n’importe quel autre langage supportant DOM + HTML/XHTML, cela permet de récupérer un élément « identifié » sans se casser la tête à le chercher en analysant tout le code HTML/X(HT)ML

6

OK, encore merci pour le codage de la presentation, ca marche nickel :wink:
juste un petit detail de rien du tout, comment on peu faire pour lui dire de mettre en surimpression le bouton quand on est dessus, il faut lui dire de remplacer l’image du bouton1 par l’image du bouton2 en surimpression mais on modifie le codage a quel endroit !!

Codage que tu m’as donné :

EDIT : autre petit probleme, je travail avec Frontpage, J’ai donc placé le diapo issu du codage dans un tableau de disposition pour qui s’adapte en fonction de la fenetre, seulement les boutons se trouvent en dessous de l’image et je veux les superposer dans le coin en bas a droite, ca m’a donc crée une couche avec a l’interieur les boutons d’interaction.
Le soucis c’est que quand on se met sur un ordinateur avec un ecran plus large, le diapo suit sans probleme, mais la couche elle, n’est pas attaché et se retrouve ainsi decallé.
Comment puis-je proceder pour que la couche suive, on ne peux pas créer 2 tableaux de disposition l’un sur l’autre !!

merci
Edité le 03/07/2007 à 15:31