Bonjour à tous et à toute
Premier message que je place ici (sorry si ce n'est pas au bon endroit)
Content de rejoindre cette communauté.
Légère présentation :
Je commence à me mettre sérieusement au couple XHTML/CSS et honnêtement c’est un pur bonheur. J’ai cependant encore pas mal de difficulté sur certains points qui s’effacerons (comme dans tous les domaines) au fur et à mesure et surtout via la pratique.
Actuellement entrain de construire une interface d’administration, je me suis dit que c’était le bon moment de mettre en pratique tout ce que j’avais lu et appris dans de nombreux bouquins et sur certains sites.
L’objet de ma visite : Un effet onmouseover/onmouseout
D’habitude (et c’est ce que j’aimerais changer) je décore dynamiquement via du javaScript discret mes boutons pour leur procurer un effet visuel. Effet au survol.
Exemple qui me vient comme ça et qui n’est pas réel (je sais c pas du javaScript discret):
Après je ne sais plus combien d’essai et de recherche ici et là, je me décide enfin à venir vers vous.
Voici le code qui illustre mon souci :
Sur firefox j’obtiens un trait qui va de la gauche de l’écran jusqu'à mon image.
Chose que je n’ai pas sous IE ou Opéra. Si j’avais mis text-indent: +9000px; le trait irait de mon image jusqu'à la droite de l'écran.
Que se passe t’il ?
Comment expliquer cette effet là et comment y remédier SVP ?
Malgré que mon Admin. soit destiné à une cible ayant IE (Admin. pour un gros groupe qui tourne sous les produits Microsoft) je ne peux laisser passer ça.
Je ne tourne pas sous IE et donc cela me pose problème …
J’espère avoir assez détaillé mon souci. Si vous avez des idées, une autre façon de faire je suis preneur. Un grand merci à l’avance.
Christophe.
PS : Prochain épisode les fichiers HTC pour les PNG transparent découvert grâce à Mr Meyer.
Modifié par nosoucy (07 Apr 2005 - 22:48)
Premier message que je place ici (sorry si ce n'est pas au bon endroit)
Content de rejoindre cette communauté.
Légère présentation :
Je commence à me mettre sérieusement au couple XHTML/CSS et honnêtement c’est un pur bonheur. J’ai cependant encore pas mal de difficulté sur certains points qui s’effacerons (comme dans tous les domaines) au fur et à mesure et surtout via la pratique.
Actuellement entrain de construire une interface d’administration, je me suis dit que c’était le bon moment de mettre en pratique tout ce que j’avais lu et appris dans de nombreux bouquins et sur certains sites.
L’objet de ma visite : Un effet onmouseover/onmouseout
D’habitude (et c’est ce que j’aimerais changer) je décore dynamiquement via du javaScript discret mes boutons pour leur procurer un effet visuel. Effet au survol.
Exemple qui me vient comme ça et qui n’est pas réel (je sais c pas du javaScript discret):
<a onclick="changeImages(....);" onmouseover=" changeImages(....);" onmouseout=" changeImages(....);" href="accueil.htm"><img id="ok_off" src="images/ok_off.jpg" alt="" name="ok_off" height="20" width="32" border="0"></a>
Après je ne sais plus combien d’essai et de recherche ici et là, je me décide enfin à venir vers vous.
Voici le code qui illustre mon souci :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
<title>XXX</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
html
{
margin: 0;
padding: 0;
}
body
{
margin: 0;
padding: 0;
font-size: 80%;
font-family: verdana, helvetica, arial, sans-serif;
background-color: #FFFFFF;
color: #000;
}
a#ok_btn
{
margin: 10px auto; /*Pour voir le trait sur FF */
width: 32px;
height: 20px;
display: block;
background: url(ok_off.jpg) top left no-repeat;
text-indent: -9000px;
}
a#ok_btn:hover
{
background: url(ok_over.jpg) top left no-repeat;
}
</style>
</head>
<body>
<a id='ok_btn' href='#' title='valider xxx'>ok</a> </body>
</html>
Sur firefox j’obtiens un trait qui va de la gauche de l’écran jusqu'à mon image.
Chose que je n’ai pas sous IE ou Opéra. Si j’avais mis text-indent: +9000px; le trait irait de mon image jusqu'à la droite de l'écran.
Que se passe t’il ?
Comment expliquer cette effet là et comment y remédier SVP ?
Malgré que mon Admin. soit destiné à une cible ayant IE (Admin. pour un gros groupe qui tourne sous les produits Microsoft) je ne peux laisser passer ça.
Je ne tourne pas sous IE et donc cela me pose problème …
J’espère avoir assez détaillé mon souci. Si vous avez des idées, une autre façon de faire je suis preneur. Un grand merci à l’avance.
Christophe.
PS : Prochain épisode les fichiers HTC pour les PNG transparent découvert grâce à Mr Meyer.
Modifié par nosoucy (07 Apr 2005 - 22:48)
