Redimensionnement d'image au survol

Redimensionnement d'image au survol - HTML/CSS - Programmation

Marsh Posté le 05-07-2006 à 17:17:52    

Bonjour, j'ai une page html contenant dans images miniatures et j'aimerais qu'en survolant celles ci, les images apparaissent dans leur taille réelle.
 
Voici le code :

Code :
  1. <html>
  2. <head>
  3. <title></title>
  4. <style type="text/css">
  5. .imgRedim {width:50px;}
  6. .imgRedim:hover {width:300px;}
  7. </style>
  8. </head>
  10. <body>
  11. <img class="imgRedim" src="../images/bandeau.jpg" name="Essai" />
  12. </body>
  13. </html>


 
La partie css est conforme d'après le w3c. Ceci fonctionne très bien sous Firefox mais Internet Explorer n'y comprend pas grand chose apparemment.
 
Comment faire pour que IE ait le meme fonctionnement que Firefox ?
 
Merci d'avance

Reply

Marsh Posté le 05-07-2006 à 17:17:52   

Reply

Marsh Posté le 05-07-2006 à 17:33:55    

soit JS, soit tu te dermerde pour faire en sorte que le :hover soir sur un <a>
 
Car c'est le seul :hover qu'il gére..
 
Aller c'est pas dur ;)

Reply

Marsh Posté le 05-07-2006 à 19:02:00    

Ok merci. Ca va beaucoup alourdir le code mais tant pis...

Reply

Marsh Posté le 05-07-2006 à 19:15:42    

rajouter <a href="#1"></a> t'appelles ça beaucoup alourdir le code ? :D

Message cité 1 fois
Reply

Marsh Posté le 05-07-2006 à 19:27:35    

The-Shadow a écrit :

rajouter <a href="#1"></a> t'appelles ça beaucoup alourdir le code ? :D


 
C'est quoi #1 ? Pas une adresse en tous cas. :/

Reply

Marsh Posté le 05-07-2006 à 19:28:34    

#1 ça veut dire "ancre nulle", ça évite au navigateur de bouger quand tu fais un lien mort.

Message cité 1 fois
Message édité par The-Shadow le 05-07-2006 à 19:29:15
Reply

Marsh Posté le 05-07-2006 à 19:31:38    

The-Shadow a écrit :

#1 ça veut dire "ancre nul", ça évite au navigateur de bouger quand tu fais un lien mort.


 
mwé, moi je préfère mettre une adresse dans un href.
 
Ensuite, pour ce qu'il veut faire, je trouve que du JS externalisé répond parfaitement. Les comportements dynamiques devraient idéalement mieux être traités avec du JS et évitent en particulier d'utiliser des éléments sémantiques qui ne correspondent pas à ce qu'on veut faire.
Dans son cas, il veut agrandir une image lors du survol, pas renvoyer le visiteur sur une autre page en cas de click sur une image, donc utiliser un <a> est faux sémantiquement. [:spamafote]
 
Du JS externalisé ne nuit en aucune façon à l'accessibilité en plus.
 
Les gens finissent (je parle pas de toi) par exagérer en voulant éviter tout recours à JS. Quand JS n'est pas indispensable à l'accessibilité d'une page, il n'y a aucune raison de s'en passer. ;)


Message édité par Hermes le Messager le 05-07-2006 à 19:32:13
Reply

Marsh Posté le 05-07-2006 à 19:35:40    

Moi j'aurais dit que les gens finissent par exagérer en voulant faire du 100% sémantique quand une petite encartade facilite grandement la vie pour un inconvénient proche de zéro.

Message cité 1 fois
Reply

Marsh Posté le 05-07-2006 à 19:37:31    

The-Shadow a écrit :

Moi j'aurais dit que les gens finissent par exagérer en voulant faire du 100% sémantique quand une petite encartade facilite grandement la vie pour un inconvénient proche de zéro.


 
En l'occurence, ya rien de compliqué. [:spamafote]
 
Suffit d'avoir sa petite bibliothèque de fonction javascript qui va automatiquement s'occuper de tout. Ya rien à reprogrammer à chaque fois hein. C'est donc encore plus simple qu'une tricherie aussi simple soit-elle.
 
Et puis de toutes manières, un lien est un lien. Point.

Message cité 1 fois
Reply

Marsh Posté le 05-07-2006 à 19:40:05    

Hermes le Messager a écrit :

Et puis de toutes manières, un lien est un lien. Point.


ça sert à rien de continuer vu ta démonstration d'ouverture d'esprit. :jap:
C'est très scolaire comme réaction, mais libre à toi, sujet clos pour moi, Harko va encore se ramener sinon.

Reply

Marsh Posté le 05-07-2006 à 19:40:05   

Reply

Marsh Posté le 05-07-2006 à 22:14:06    

en fait un simple href="#" est suffisant pour le lien.
il est vrai que c'est mieux de mettre un lien et patati et patata :/ histoire que tu mettes un lien vers la grande image.

Message cité 1 fois
Reply

Marsh Posté le 05-07-2006 à 22:32:10    

gatsu35 a écrit :

en fait un simple href="#" est suffisant pour le lien.


Non. :D
 
Quand tu as un lien, si tu rajoutes juste '#', ça demande une ancre vide, dans un navigateur normal, il y a donc direction de la page vers une ancre qui n'existe pas donc qui se conclue donc par une remonté de page.
Avec une ancre nulle telle que '#1', la page ne bouge pas.
 
Tsss, ses newb, faut tout leur apprendre. :D
#1, c'est une ancre null, c'est pas une invention, c'est fait pour, de toute façon, une ancre qui enverrait sur un numéro d'id composé uniquement d'un numéro, c'est impossible (enfin, c'est incorrect), le W3C n'autorise pas les ancre ou les ID uniquement nommé par des numéros et pour cause. :D
 
Par contre, c'est vrai que dans l'idéal, suffit de faire un lien vers une page qui affiche l'image en grand.
Comme ça, tout le monde est content, la CSS et les fanas de la sémantique.

Message cité 2 fois
Message édité par The-Shadow le 05-07-2006 à 22:33:56
Reply

Marsh Posté le 05-07-2006 à 22:39:41    

The-Shadow a écrit :

Non. :D
 
Quand tu as un lien, si tu rajoutes juste '#', ça demande une ancre vide, dans un navigateur normal, il y a donc direction de la page vers une ancre qui n'existe pas donc qui se conclue donc par une remonté de page.
Avec une ancre nulle telle que '#1', la page ne bouge pas.
 
Tsss, ses newb, faut tout leur apprendre. :D
#1, c'est une ancre null, c'est pas une invention, c'est fait pour, de toute façon, une ancre qui enverrait sur un numéro d'id composé uniquement d'un numéro, c'est impossible (enfin, c'est incorrect), le W3C n'autorise pas les ancre ou les ID uniquement nommé par des numéros et pour cause. :D
 
Par contre, c'est vrai que dans l'idéal, suffit de faire un lien vers une page qui affiche l'image en grand.
Comme ça, tout le monde est content, la CSS et les fanas de la sémantique.


 :jap:

Reply

Marsh Posté le 06-07-2006 à 09:55:41    

The-Shadow a écrit :

#1, c'est une ancre null, c'est pas une invention, c'est fait pour, de toute façon, une ancre qui enverrait sur un numéro d'id composé uniquement d'un numéro, c'est impossible (enfin, c'est incorrect), le W3C n'autorise pas les ancre ou les ID uniquement nommé par des numéros et pour cause. :D


T'es sur de toi ???
Ok c'est pas possible d'avoir un id="1" mais sur le name ça passe. Or les ancres avant étaient basées sur le name d'où mes doutes sur le fait que ça soit "fait pour".
En fait le comportement que tu décrit on l'a avec n'importe quelle ancre qui "n'existe pas" dans la page, non ?
Regarde si tu mets un href="#unTrucQuiNestNiUnIdDeTaPageNiUnName" ça fait pareil...
Enfin moi je dis ça hein, je suis de parti pris les # dans les hrefs s'pas bo !

Message cité 2 fois
Message édité par anapajari le 06-07-2006 à 09:56:14
Reply

Marsh Posté le 06-07-2006 à 10:02:23    

anapajari a écrit :

T'es sur de toi ???
Ok c'est pas possible d'avoir un id="1" mais sur le name ça passe. Or les ancres avant étaient basées sur le name d'où mes doutes sur le fait que ça soit "fait pour".
En fait le comportement que tu décrit on l'a avec n'importe quelle ancre qui "n'existe pas" dans la page, non ?
Regarde si tu mets un href="#unTrucQuiNestNiUnIdDeTaPageNiUnName" ça fait pareil...
Enfin moi je dis ça hein, je suis de parti pris les # dans les hrefs s'pas bo !


 
Clairement oui. :o

Reply

Marsh Posté le 06-07-2006 à 14:44:31    

anapajari a écrit :


Ok c'est pas possible d'avoir un id="1" mais sur le name ça passe.


Non, ça passe pas, <a name="1"></a> n'est pas valide W3C, même en HTML. Pas de numéro seuls et pas de nom commençant par un numéro dans les id ou les names.


Message édité par The-Shadow le 06-07-2006 à 14:44:59
Reply

Marsh Posté le 06-07-2006 à 14:55:12    

Bin ecoute tu prends le code suivant ( et c'est du xhtml hein):

Code :
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  2.   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
  4. <head>
  5.   <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
  6.   <title>Exemple</title>
  7. </head>
  8. <body>
  9. <p>
  10. <a name="1">1</a>
  11. </p>
  12. </body>
  13. </html>


Et le validateur (celui-la) il te fait ça roulèze, alors qui si je mets un id="1" il hurle [:spamafote]
 
Maintenant c'est vrai que si je regarde la spec du html4.01 tu as raison, http://www.w3.org/TR/html4/types.html#type-cdata :

Citation :

ID and NAME tokens must begin with a letter ([A-Za-z]) and may be followed by any number of letters, digits ([0-9]), hyphens ("-" ), underscores ("_" ), colons (":" ), and periods ("." ).


 
Mais bon ça passe hein :o


Message édité par anapajari le 06-07-2006 à 14:56:44
Reply

Marsh Posté le 06-07-2006 à 15:37:53    

Un bug dans le validateur, ce ne serait pas le premier.
 
En revanche, Tidy me dit ça :

Code :
  1. ... cannot copy name attribute to id
  2. Cause:
  4. In XHTML, the "name" attribute has been deprecated and replaced by the "id" attribute. If you want to keep both tags for compatibility reason, name and id, the values should be the same.
  5. This error is generated when only the name exists and that tidy try to copy the value of the name in the id attribute. But an "id" must begin with a letter ([A-Za-z]).
  6. Solution:
  8. BAD         <a name="123456">...</a>
  9. BAD         <a id="123456">...</a>
  11. DEPRECATED  <a name="my_link">...</a>
  13. GOOD        <a id="my_link">...</a>
  14. GOOD        <a id="my_link" name="my_link">...</a>
  16. References:
  18. XHTML W3c spec: name attribute: http://www.w3.org/TR/xhtml1/#h-4.10
  19. XHTML W3c spec: name and id  http://www.w3.org/TR/xhtml1/#C_8
  20. ID W3C spec: http://www.w3.org/TR/html4/types.html#h-6.2


Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed