28173 sujets

CSS et mise en forme, CSS3

Problème de background (affichage) lors de l'usage de a:hover

Bonjour,

Merci d'avance pour l'aide que vous pourrez m'apporter. J'ai passé la journée à faire des recherches sous Google et sur ce Forum pour trouver une solution mais rien n'y fait. C'est ainsi que je poste pour vous soumettre mon problème.

Ce que j'aimerais faire : afficher une miniature qui ouvre une nouvelle fenetre avec l'image en grande lorsqu'on clique dessus. Cependant, j'aimerais que quand on passe sur l'image, il y ait une autre miniature qui s'affiche.

Exemple : http://photoxbc2.free.fr/pbe/miniature.htm

HTML
<div class="der"><a href="Copie de Schav_mar_001.jpg" target=new_window>
<img src="trans.gif" widht=160 height=120></a></div>


CSS
.der {
	background: url("Schav_mar_001.jpg");
	width : 160px;
	height: 120px;
}
	 
.der a:hover {
	background: url("clic.png");
	width: 160px;
	height: 120px;
}


Mon but est de réduire le temps de chargement de la page en ne proposant que des miniatures dans un premier temps.

Mais peu importe comment je note mon CSS ou mon HTML, je n'y arrive jamais : sous IE parfois cela fonctionne (j'ai l'image clic.png qui s'affiche à la place de Schav_mar_001.jpg) quand je passe avec le pointeur sur l'image mais sous FF, clic.png ne s'affiche qu'à partir du bas du div à environ 10px du bas du cadre.

Exemple
http://photoxbc2.free.fr/pbe/exemple.jpg

Bref, j'ai pas trouvé comment m'en sortir. Vous allez probablement me dire qu'il n'est pas nécessaire de passer par un GIF transparent mais il ne se passait rien du tout si je laissais le Div vide. Maintenant, l'erreur vient peut-être de là.

Je m'excuse d'avance si la réponse est évidente mais pour ma part, je suis largué Smiley ohwell
Modifié par Ludo67 (09 Aug 2006 - 16:08)
C'est pour faire un rollover d'une image?

Normalement ca ne doit pas bien être difficile à trouver.

Ceci peut-il t'aider?
Mhmm rollover ? Je ne sais pas.

J'aimerais que quand on survole une image, cette dernière soit remplacée par uen autre, de même dimension, au même endroit mais à l'aspect différent.

J'ai suivi le tuto. Je vais le relire mais c'est dans le cadre d'un menu où chaque bouton a les mêmes vignettes au départ puis quand on survole. Dans mon cas, chaque vignette de départ sera différente.

Merci pour le lien. Je vais voir cela de plus près.

EDIT :

Si je m'inspire du tuto, j'ai un problème similaire.

HTML
<ul id="menu">
	<li><a href="Copie de Schav_mar_001"></a></li>
</ul>


Il n'y qu'uen fine barre horizontale qui d'affiche car je n'ai rien entre les balises <a>...</a>.
Modifié par Ludo67 (09 Aug 2006 - 16:30)
Tu peux essayer qq chose dans le genre :

le code html
<a href="javascript:popup();" class="der"><img src="trans.gif" width="160" height="120" border="0" alt="" /></a>



les css
a:link.der {
	background-image: url(Schav_mar_001.jpg);
	width: 160px;
	height: 120px;
}
a:hover.der{
	background-image: url(clic.png);
	width: 160px;
	height: 120px;
}


le javascript pour ouvrir ton popup :


<script type="text/javascript" language="JavaScript">
function popup() {
    // ouvre une fenetre sans barre d'etat, ni ascenceur et non resizable
    w=open("page2.htm",'popup','width=400,height=200,toolbar=no,scrollbars=no,resizable=no');
}
</script>
regarde un peu cet article, ca devrait mieux aller:

ici

il faut évidemment un peu modifier.

Ta balise <a> doit avoir un display:block ainsi que ton image.
Modifié par Oryo (09 Aug 2006 - 16:46)
Merci merci merci : avec display:block cela s'affiche.

J'aurais encore cherché longtemps avant de tomber là-dessus ! Maintenant, j'aimerais avoir une précision.

Si pour une miniature, j'ai le code suivant,

HTML
<div class="mini"><a href="Copie de Schav_mar_001.jpg"
target=new_window></a></div>


CSS
  .mini a {
	background: url("Schav_mar_001.jpg");
	width : 160px;
	height: 120px;
	display: block;
	}
	
  .mini a:hover {
	background: url("clic.png");
	width: 160px;
	height: 120px;
	display: block;
	}


Cela peut poser des problèmes si j'en ajoute plusieurs car à chaque fois l'image background pour l'élément <a> sera différente alors qu'à l'inverse, l'image background pour l'élément a:hover sera commune à toutes les vignettes.

Dans ce cas, dois-je plutot utiliser CLASS ou ID ? Si je le note en ID, je dois changer le . pour un # dans ma feuille de style c'est bien cela ?

Merci Smiley cligne Smiley smile
Bonjour,

Ludo67 a écrit :
Si pour une miniature, j'ai le code suivant,

HTML
<div class="mini"><a href="Copie de Schav_mar_001.jpg"
target=new_window></a></div>


Navré d'avoir encore à le dire, mais l'utilisation détournée des images d'arrière-plan CSS pour réaliser des effets de ce type n'est ni conforme à la séparation du contenu et de sa présentation, ni accessible.

Le code concerné est à revoir entièrement, en utilisant pour les vignettes des éléments <img...>, et un javascript pour les effets au survol.
Modifié par Laurent Denis (10 Aug 2006 - 05:41)
Mais je souhaitais justement éviter l'utilisation du Javascript qui me semble beaucoup plus difficile à utiliser...

Mais si Javascript il faut pour être croyant et pratiquant, quelle forme il aurait pour avoir un résultat identique ? Smiley murf

EDIT : D'ailleurs, c'est ici que j'ai trouvé l'idée de ne pas chercher à le faire en Javascript, Cf. http://css.alsacreations.com/Construction-de-menus-en-CSS/Une-image-reactive-rollover-sans-javascript Smiley cligne
Modifié par Ludo67 (10 Aug 2006 - 11:22)
Est-ce que cette formulation serait meilleure ?

<html>
<head>
	<title>Test</title>
	<script language="JavaScript">
<!-- Begin
bouton = new Image();
bouton.src = "clic.png";
end -->
        </script>
</head>
	
<body>

<a href="#" onmouseover="bouton.src = 'clic.png';" onmouseout="bouton.src = 'Schav_mar_001.jpg';">
<img src="Schav_mar_001.jpg" border=0 width="160" height="120" name=bouton></a>

</body>
</html>


Si tel est le cas, je vais bien entendu me lancer là-dedans mais je pensais bien faire en évitant le Javascript Smiley bawling Smiley cligne
Sujet clos
Aller à