S'abonner :

Newsletters

Magazines

01men.

Avis sur les produits

Avis sur les logiciels

Avis sur les jeux

Actualités

A propos de 01net

140 utilisateurs connectés

Forum de 01net / Développement / Problème de commande "Mouseover"

Problème de commande "Mouseover"

Nanoman le 25 février 2009 à 16h28

Bonjour,

J'ai un gros souci sur mon site que je n'arrive pas à résoudre.
Voilà je voudrais que mon site, qui est en construction, ait chacun de ses boutons de bannière animés par chaque texte plus gros lors du passage de la souris. Pour cela j'ai trouvé une super commande :

<div style="height: 71px; width: 112px; height: 71px; left: 5px; position: absolute; top: 150px; width: 112px; z-index: 1; " class="tinyText style_SkipStroke_1 stroke_0" id="id1">
<A HREF="http://thewind.o-n.fr/The_Wind/Accueil.html" onMouseOver="i927815.src='Vide_files/accueil.png'" onMouseOut="i927815.src='Vide_files/accueil_small.png'"><IMG SRC="Vide_files/accueil_small.png" BORDER=0 NAME="i927815" ALT="Accueil" HSPACE=0 VSPACE=0></A>
</div>

Ceci est la commande pour la mise en page du bouton Accueil ainsi que son animation.
Maintenant je demande aux experts en javascript de me dire pourquoi ce fichu code rend ma deuxième image d'animation transparente ??? Je cherche depuis des heures et je ne trouve rien, je désespère !

Vous pouvez constater les dégâts sur le bouton accueil ici : http://www.the-wind.fr

Merci à ceux qui pourront m'aider.

Bonne journée.

-------
Nanoman

répondre

4vingt3 le 25 février 2009 à 17h04

Salut,
j'avais fait un script fonctionnant à peu près sur le même principe :
<a href="http://thewind.o-n.fr/The_Wind/Accueil.html">
<img src="Vide_files/accueil_small.png" onmouseover="javascript:this.src='Vide_files/accueil.png';" onmouseout="javscript:this.src='Vide_files/accueil_small.png';"/>
</a>

Essaye ce code et donne-en des nouvelles ;

-->Message édité par 4vingt3 le 25/02/2009 17:09:01<--

-------
Salut,
Sur Terre il y a 10 types de personnes: ceux qui comprennent le binaire et les autres ... :mdr:

répondre

Nanoman le 25 février 2009 à 17h10

Merci de ton aide,
Tu peux retourner sur le site, j'y ai mis ton code, et malheureusement c'est encore pire, vu qu'une fois que la souris est passée sur le lien, le bouton ne retrouve plus son image initiale et garde la deuxième image fixe. De plus le problème de l'opacité de la deuxième image n'est pas résolu.
Je ne comprends vraiment pas d'où vient le problème...

-------
Nanoman

répondre

Hary1965 le 25 février 2009 à 17h41

Salut,

Je travaille autrement.

dans <Head>

<SCRIPT LANGUAGE="Javascript">

</SCRIPT>

Dans <body>

<A HREF="accueilfr.html" onmouseover="monrollover1.src='accueil2.gif';" onmouseout="monrollover1.src='accueil1.gif';">
<IMG SRC="accueil1.gif" name="monrollover1" width="100px" border=0></A>

Ce n'est qu'un exemple à toi de l'adapter si il te semble intéressant

répondre

spamophobe le 25 février 2009 à 17h49

Euh... et les CSS vous connaissez ? :sol:

http://openweb.eu.org/articles/bouton_css/

(à adapter avec deux images bien sûr, une pour le lien au repos, une pour le lien survolé)

répondre

Nanoman le 25 février 2009 à 17h49

Je viens d'essayer, tu peux voir le résultat sur http://www.the-wind.fr.
Ca marche bien mais il y a toujours ce problème de la transparence de ma deuxième image, qui pourtant, je viens de le vérifier, est un png 100% opaque !

-------
Nanoman

répondre

Hary1965 le 25 février 2009 à 18h01

Et si tu transformes ta deuxième image en .gif

spamophobe
ok pour le CSS, nettement plus simple pour paramètrer tous les boutons.

répondre

Nanoman le 25 février 2009 à 18h11

Ah làlà c'est dingue ça me rend fou !
Je viens d'essayer en GIF en local et ça ne marche pas mieux ! Toujours ce problème de transparence !
Quant au CSS, j'ai jeté un oeil sur la page de spamophobe, mais ça a l'air fait pour le texte, pas pour les images... En tout cas je ne vois pas comment réécrire ça pour une image.

-------
Nanoman

répondre

Hary1965 le 25 février 2009 à 18h20

A l'instant là tu as tout mis en .png d'après le code source ta page.
Tu avis bien modifié en .gif dans le 'head' et rectifié aussi dans le 'body'?

-->Message édité par Hary1965 le 25/02/2009 18:20:46<--

répondre

Nanoman le 25 février 2009 à 18h35

Non sur le site tout est encore en png, j'ai testé le gif en local. Maintenant je viens d'uploader avec la version gif du code et des fichiers, mais c'est toujours le même bazar...

-------
Nanoman

répondre

Hary1965 le 25 février 2009 à 18h41

Tu as plusieurs fichiers attachés .JS, je regarderais de ce coté là. non?

répondre

spamophobe le 25 février 2009 à 18h47

Mais... (gloups), ce n'est qu'une seule image ?! D'un seul tenant ?!!

Et si on est au fin fond de la campagne avec un vieux modem poussif en 56ko, et qu'on désactive les images pour surfer plus rapide, on voit quoi de ton site ?

Et si on est mal voyant et qu'on surfe avec une synthèse vocale ?

Et google, qui ne sait lire que du texte, comment va t-il faire pour te référencer ?

-->Message édité par spamophobe le 25/02/2009 18:54:28<--

répondre

Hary1965 le 25 février 2009 à 18h55

modem poussif en 56ko..
Ca existe encore ça et ils vendent toujours le pédalier pour recharger la dynamo?

Je plaisante.

répondre

Nanoman le 25 février 2009 à 19h06

Le site n'est pas DU TOUT fini. La version actuelle qui tourne sur un autre nom de domaine fonctionne très bien : Google me référence grâce aux titres de mes pages dans les balises méta pour chaque catégorie, et l'image qui est d'un seul tenant ne me sert que de repaire pour ensuite placer chaque catégorie découpée en une seule image. Pas de quoi s'affoler

-------
Nanoman

répondre

spamophobe le 25 février 2009 à 21h02

Les modems poussif à 56 ko, oui, ça existe encore. Toute la France n'est pas encore couverte par le haut débit. Et parfois, l'ADSL, ça tombe en rade et on est bien content d'avoir une liaison de secours en bas débit...

Et quid des malvoyants ou autre handicapé ?

Cela dit, si ton projet est de découper cette image pour la suite, au lieu de faire un javascript (inaccessible...), tu peux utiliser la technique des portes coulissantes.
http://www.pompage.net/pompe/portescoulissantes/

-->Message édité par spamophobe le 25/02/2009 21:05:36<--

répondre