Rechercher : dans
Par :

Prob avec un JavaScript: effet de survol

Dernière réponse le 10 jan 2008 à 01:54:23 midnnight, le 23 fév 2006 à 05:32:22 
 Signaler ce message aux modérateurs

Hello, quelqu' un serait il assez simpa pour me traduir exactement ce qu il faut faire pour venir a bout de ce java script qui me donne tant de mal ????
JavaScript : Création d'un effet de survol

45:  var a
46:  a= new Array();
47:  a[0]=new Image;
48:  a[0].src="mon_image1.gif";
49:  a[1]=new Image;
50:  a[1].src="mon_image2.gif";

La fonction roll() va effectuer la permutation des images :

52: function roll(img,nb) {
53:    eval("img.src=a["+nb+"].src");
54: }

[...]

77: <A HREF="#" 
78:    onmouseover="roll(img1,0)"; 
79:    onmouseout="roll(img1,1)">
80:    <IMG name="img1" SRC="img1.gif"  BORDER=0 >Un RollOver simple
81: </A><br><br>


Le code transparait sur ma page web, je ne sais pas comment introduir mes images : <img
style="width: 113px; height: 63px;" src="mon image.gif" ??? ou bien fuste comme ca : src="mon image.gif" ??? ça ne fonctionne pas...Je suis bien embêté,
Excusez si je suis nul, mais c est pas facile au départ ces trucs là.
Une explication précise et détaillé me serait hyper utile...
Merci d avance, on sait jamais...
Configuration: portable compaq
512 Mo ram
windows XP

Meilleures réponses pour « prob avec un JavaScript: effet de survol » dans :
Javascript - Librairies d'effets pour vos images Voir Au gré de vos explorations du web, vous avez vu de superbes effets de présentation des images. Et ça vous plairaît bien de pouvoir proposer les mêmes à vos visiteurs. Voici quelques solutions en Javascript couplées à des CSS. Elles sont plus...
Une popup d'information au survol sans Javascript ni CSS Voir Parfois, il peut être utile d'afficher des informations supplémentaire au survol du curseur sur une zone de l'écran, par exemple "Cliquez pour agrandir" sur une image, un descriptif sur une abbréviation ou des détails sur un lien. On trouve...
Javascript - Modifier la hauteur (height) d'un élément HTML VoirPour modifier la hauteur d'un élément HTML en javascript, il suffit d'utiliser sa propriété de style "height". Pour cela vous pouvez y faire référence de la manière suivante : Si vous souhaitez connaître la hauteur (height) d'un bloc HTML, il...
YouTube - Vous avez désactivé JavaScript VoirProblème Lorsque vous naviguez sur certains sites, tels que YouTube, ceux-ci affichent le message d'erreur suivant : Vous avez désactivé JavaScript ou bien vous possédez une ancienne version d'Adobe Flash Player. Téléchargez la dernière version...
Javascript - Les événements VoirQu'appelle-t-on un événement? Les événements sont des actions de l'utilisateur, qui vont pouvoir donner lieu à une interactivité. L'événement par excellence est le clic de souris, car c'est le seul que le HTML gère. Grâce au Javascript il est...
Javascript - Les variables VoirLe concept de variable Une variable est un objet repéré par son nom, pouvant contenir des données, qui pourront être modifiées lors de l'exécution du programme. En Javascript, les noms de variables peuvent être aussi long que l'on désire,...
Javascript - L'objet Date VoirLes particularités de l'objet Date L'objet Date permet de travailler avec toutes les variables qui concernent les dates et la gestion du temps. Il s'agit d'un objet inclus de façon native dans Javascript, et que l'on peut toujours utiliser. La...

1

Gihef, le 25 fév 2006 à 00:30:48
  • +1

Bonjour,

En fait, les explications chez le webmaster.lycos.fr sont un peu insuffisantes.
Il faut, par exemple, remplacer quelques références ainsi qu'enlever les numéros de lignes.
Et leur résultat manque de cohérence.
Teste en remplaçant, dans “<IMG name="img1" SRC="img2.gif"”, “img2.gif” par “img1.gif”.

En faisant comme ça, ça marche :

<script language="JavaScript">
<!--
var a
a= new Array();
a[0]=new Image;
a[0].src="img1.gif";
a[1]=new Image;
a[1].src="img2.gif";

function roll(img,nb) {
    eval("img.src=a["+nb+"].src");
}
-->
</script>

<A HREF="#" 
    onmouseover="roll(img1,0)"; 
    onmouseout="roll(img1,1)";>
    <IMG name="img1" SRC="img2.gif"  BORDER=0 width=40 height=30>
</A><br><br>


Et puis, on peut avoir le même résultat sans tout ce code.
En HTML, ça :
<a href="#">
<img src="img1.gif" border="0" width=40 height=30
onMouseOver="this.src='img2.gif'" onMouseOut="this.src='img1.gif'">
</a>

suffit.

Tu trouveras certainement plus d'inspiration ici :
http://www.allhtml.com/
http://www.javascriptfr.com/
par exemple.
-- > Nous avons su vous aider ? Alors, aidez-nous, dites-le et
-- > • cochez le problème comme résolu. Merci.

Répondre à Gihef

2

midnnight, le 27 fév 2006 à 14:36:51

Ahh ! Un grand merci à toi, finalement j'ai opté pour ta seconde soluce (en html) :

<a href="#">
<img src="img1.gif" border="0" width=40 height=30
onMouseOver="this.src='img2.gif'" onMouseOut="this.src='img1.gif'">
</a>

Le résultat est semblable et la config me parrait + sûre.
De + elle est plus maniable.
Bonne continuation...
Je risque de vous poser encore ds questions bête, car je n' abandonne pas pour autant le "java" (lol)
Encore merci !
midnnight...

Répondre à midnnight

3

Angzlar, le 10 jan 2008 à 01:05:52

Bonjour, merci pour ce script. Mais je tenais à préciser qu' il n' est pas valide au w3c.
C' est dommage car je comptais l' utiliser pour mon projet mais j' attendrais qu' il soit noté pour inscrire ce script.

Encore merci, bien utile.
L' art de la guerre ce n' est pas de mourrir pour son pays
Mais faire en sorte que son ennemi meurt pour le sien.

Répondre à Angzlar

4

midnnight, le 10 jan 2008 à 01:51:15

Cette question est résolue, milles excuses, je ne l'avait pas noté. Le dernier code hyml est excélent et compatible.

Répondre à midnnight

5

 midnnight, le 10 jan 2008 à 01:54:23

Html, (pas hylm, faute de frappe lol)

Répondre à midnnight
Collection CommentÇaMarche.net