18041 sujets

Questions générales et questions de débutants

Exemples Rollovers

Pages :
Bonjour, Smiley biggrin

J'ai trouvé cette exemple de rollover génial à ce lien avec seulement une image http://css.alsacreations.com/xmedia/exemples/roll_over/
sauf que je l'ai utilisé dans une balise <a href id="......

Mais il y a une petit souci, en effet essayez d'appuyer en raccourci sur CTRL et molette si jamais l'internaute lui prend l'envie d'agrandir la taille des caractères et l'image unique va dévoiler le stratagème utilisé Smiley confus

Donc y-a-til un moyen de figer l'image par une instruction dans le CSS.

Merci pour votre aide.

Gil
Modifié par Gil88 (28 Jul 2008 - 21:50)
arff excuses bon ben vaut mieux que le modo supprimes le sujet alors.

Merci bien pour la réponse ça va m'aider mais j'en profite pour dire que c'est un forum vraiment complet et félicitations à vous ...surtout que je débute aussi donc..

Merci encore Smiley cligne
Gil88 a écrit :
arff excuses bon ben vaut mieux que le modo supprimes le sujet alors.
Il n'y avait aucun reproche dans mon précédent post mais juste un lien pour une solution à ton problème. Smiley smile

Et d'après ta réponse je supposes que tu considères que ce sujet est [Résolu] ? Smiley cligne
Notons aussi qu'avec des liens de largeur fixe (en pixels), on peut placer les deux portions d'image côte-à-côte plutôt que l'une en dessous de l'autre. Et utiliser la couleur du bas (ou du haut) de la portion d'image de fond comme couleur de fond.

Bref, il s'agit de jouer avec la construction des images, avec les différentes propriétés background-, etc. Un exercice très formateur. Smiley smile
heu nan nan pas de problème Heyoan j'avais très bien compris que tu était très sympa Smiley cligne

Florent V. oui merci mais justement moi j'ai mes boutons l'un à côté de l'autre mais mes 2 images sont l'une en-dessous de l'autre peut-être aussi il faut que je revois ça Smiley confus en plus je n'ai pas de texte sur mes boutons et j'ai dû mettre un simple espace insécable sinon j'ai pas d'affichage de l'image
Modifié par Gil88 (28 Jul 2008 - 22:49)
Gil88 a écrit :
en plus je n'ai pas de texte sur mes boutons

Ah ben ça pour le coup c'est un problème...

Si tes boutons sont des pictogrammes ou contiennent le texte dans l'image, il ne faut pas utiliser cette technique, mais utiliser un élément IMG dans tes liens et faire le rollover en JavaScript. Du moins si tu cherches à faire quelque chose d'un peu accessible.
ha Smiley confus mais le seul problème c'est que le javascript et moi lol tu vois quoi ça fait deux

Y-a-t-il déjà un sujet qui traite du javascript pour du rollover dans ce cas de figure ?

Edit : c'est bon j'ai trouvé ceci en Css et javascript mais apparemment en CSS cela fonctionne d'après l'exemple donné http://moncastel.9online.fr/rollover/rollover.htm
Modifié par Gil88 (28 Jul 2008 - 23:37)
Gil88 a écrit :
Y-a-t-il déjà un sujet qui traite du javascript pour du rollover dans ce cas de figure ?
Parmi les mots-clés à rechercher (sur Google ou ici-même) il y a rollover, javascript, mouseover, mouseout... Smiley murf
Ne pas oublier le texte alternatif sur les images (décrivant la fonction du lien ou la signification du pictogramme, donc pas «icône de boite-aux-lettres» mais plutôt «Nous contacter»), à placer dans l'attribut alt de l'image.
Bonjour,

Cela ne fonctionne pas chez moi

J'ai bien suivi l'exemple :

J'ai fait un test que se soit IE FF Safari

Dans mon Body
<body>
  <img alt="Bouton accueil" src="roll/boutonaccueil2.png" width="75" height="26" title="accueil" />
</body>


dans le head j'ai bien mis 
<script type="text/javascript" src="rollover.js"></script>


Dans le répertoire de ma page test.html j'ai bien un fichier rollover.js
j'ai créé un répertoire roll et dedans j'ai mis les 2 images boutonaccueil2.png et ov_boutonaccueil2.png

sur ma page test apparaît bien boutonaccueil2.png mais autrement aucune réaction

J'ai même mis l'autre solution en mettant le script directement dans lapage html mais rien du tout....
C'est à devenir ouf quand même Smiley confus

et ne me dites pas que cela vient de l'extension de l'image png parce que dans les autres méthodes j'ai toujours utilisé cette extension
Modifié par Gil88 (29 Jul 2008 - 10:39)
Hello,

tu te doutes que sans voir ce que contient le fichier rollover.js c'est un peu vague... et d'ailleurs comme il n'y a ni id, ni class associés à ton image je pense qu'il y a de grandes chances pour que ton script ne cible pas le bon élément Smiley murf !
oui je sais mais ils donnent simplement les instructions à suivre dans le lien que j'ai donné ici

http://moncastel.9online.fr/rollover/rollover.htm

donc je pense qu eleur script de rollover automatique a été vérifié et cela fonctionne bien sur la page de démonstration
A moins que comme tu dis, en montrant leur fichier source dans le lien qu'il y est une erreur Smiley confus mais n'étant pas un expert du javascript là je ne peux rien dire.

EDIT : peut-être que je viens de découvrir le problème, mon fichier javascript ne s'ouvre pas come un js mais comme un txt avec le bloc note pourtant l'extension pourtant le fichier j'ai bien fait enregistré sous js. en plus ayant installé dernièrement HTMLPAD2008 le fichier y est associé.
normalement avant l'icône était bien du JS Smiley confus
Modifié par Gil88 (29 Jul 2008 - 11:06)
Hello,

Le script a l'air correct. Tu as dû te tromper quelque part en l'intégrant. On peut voir ta page de test quelque part en ligne?
ok je vais voir sur quel espace je peux la mettre; mais ce n'est qu'une page avec un bouton donc très simple
a++

Edit : en attendant voici en images :

mon repertoire test avec ouverture du js
http://img237.imageshack.us/my.php?image=repertoiretestrolloverca8.png

mon répertoire roll

http://img237.imageshack.us/my.php?image=repertoirerollik4.png

mon code source
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>

  <title>test rollover</title>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15" />
  <meta http-equiv="Content-Style-Type" content="text/css" />
  <meta http-equiv="Content-Language" content="fr" />
  <script type="text/javascript" src="rollover.js"></script>

</head>


<body>

  <img alt="Bouton accueil" src="roll/boutonaccueil2.png" width="75" height="26" title="accueil" />
</body>

</html>

Modifié par Gil88 (29 Jul 2008 - 11:38)
apparemment le problème vient qu'il n'interprète pas du JS donc c'est sûr, là j'ai un gros problème Smiley rolleyes
Tu devrais modifier les options d'affichage de Windows pour qu'il affiche toujours les extensions de fichier. C'est vital si tu fais un peu de développement web.

De mémoire, quand tu as un dossier ouvert: Options > Options des dossiers > ... > décocher «masquer les extensions de fichiers dont le type est connu».

À vue de nez, ton fichier javascript n'a pas d'extension (si j'en crois ce qui est affiché dans la barre de titre du bloc-notes).

Il se peut aussi que le JavaScript soit bloqué pour les fichiers locaux, notamment si tu testes avec Internet Explorer.
oui je sais pour la manip mais avant d'installer HTMLPAD2008 j'avais pas de problème c'est après qu'il m'a tout associé.

en plus du JS je ne m'en occupais pas si tu veux car j'essaye de me former au CSS et là cette extension s'ouvre direct avecle bloc notes donc voilà pour la pitite info Smiley lol
Modifié par Gil88 (29 Jul 2008 - 11:59)
Voilà donc rien ne change j'ai même désinstallé HTMLPAD2008 sauf que quand je clique sur le js dans windows il me met un message d'erreur comme quoi il ne peut l'ouvrir avec le moteur de script

j'ai donc mis le dossier roll le fichier rollover.js qui a bien une extension js et mon fichier testrollover.html ici en lien
http://nobleconnection.fr/testrollover.html
Pages :
Sujet clos
Aller à