Redimensionnement d'image au survol

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : Redimensionnement d'image au survol

mifinoufou

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 :

<html>
<head>
<title></title>
<style type="text/css">
.imgRedim {width:50px;}
.imgRedim:hover {width:300px;}
</style>
</head>
<body>
<img class="imgRedim" src="../images/bandeau.jpg" name="Essai" />
</body>
</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

Publicité

xtof_83

Freeride Spirit

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

mifinoufou

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

The-Shadow

Développeur
T'as été voir dans ton profil?

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

Message cité 1 fois

Hermes le Messager

Breton Quiétiste

The-Shadow a écrit :

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

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

The-Shadow

Développeur
T'as été voir dans ton profil?

#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

Hermes le Messager

Breton Quiétiste

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

The-Shadow

Développeur
T'as été voir dans ton profil?

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

Hermes le Messager

Breton Quiétiste

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

The-Shadow

Développeur
T'as été voir dans ton profil?

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.

Publicité

gatsu35

Blablaté par Harko

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

The-Shadow

Développeur
T'as été voir dans ton profil?

gatsu35 a écrit :

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

Non.

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.
#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.

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

gatsu35

Blablaté par Harko

The-Shadow a écrit :

:jap:

anapajari

s/travail/glanding on hfr/gs;

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.

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

Hermes le Messager

Breton Quiétiste

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.

The-Shadow

Développeur
T'as été voir dans ton profil?

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

anapajari

s/travail/glanding on hfr/gs;

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

Code :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>Exemple</title>
</head>
<body>
<p>
<a name="1">1</a>
</p>
</body>
</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

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

The-Shadow

Développeur
T'as été voir dans ton profil?

Un bug dans le validateur, ce ne serait pas le premier.

En revanche, Tidy me dit ça :

Code :

... cannot copy name attribute to id
Cause:
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.
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]).
Solution:
BAD <a name="123456">...</a>
BAD <a id="123456">...</a>
DEPRECATED <a name="my_link">...</a>
GOOD <a id="my_link">...</a>
GOOD <a id="my_link" name="my_link">...</a>
References:
XHTML W3c spec: name attribute: http://www.w3.org/TR/xhtml1/#h-4.10
XHTML W3c spec: name and id http://www.w3.org/TR/xhtml1/#C_8
ID W3C spec: http://www.w3.org/TR/html4/types.html#h-6.2

FORUM HardWare.fr

Programmation

HTML/CSS

Redimensionnement d'image au survol

Sujets relatifs
CSS : changer le backgound d'un autre bloc au survol et au clic	Couper une image pour en faire une vignette[résolu]
Problème au survol d'un lien dans un div	comment charger une image de substitution ?
Une image bien encadrée dans un <a>[résolu]	Image aléatoire
HTML - mettre une image de fond une seule fois	[Resolu] [SDL] taille d'une image en px
Envoi Mail html avec inline image	Problème envoie image + redimenssionnement : marche pas
Plus de sujets relatifs à : Redimensionnement d'image au survol

Page générée en 0.066 secondes