28172 sujets

CSS et mise en forme, CSS3

[RESOLU] Remplacer une image précise au survol d'un lien avec CSS ?

Bonjour,

Je travaille sur un site portfolio qui permet de visualiser des images (une par une) dans une balise <div> en survolant des vignettes situées dans une autre balise <div>

en clair je souhaite survoler une image-lien (vignette) pour remplacer la source d'une autre image (visualisation) AILLEURS dans la page.

Je l'ai déjà fait en JS comme ceci:

Dans <head>...


<script type="text/javascript">
<!--
  image1 = new Image;
  image1.src = "im/1.gif";
  image2 = new Image; 
  image2.src = "im/2.gif";
-->
</script>


..et dans <body>


<img src="im/1.gif" alt="home" width="600" height="350" name="preview">

<a href="a.html" onMouseOver="preview.src=image2.src" onMouseOut="preview.src=image1.src"><img src="im/vignette.gif" alt="home" width="30" height="30" name="vignette"></a>



Je me demandais si on pouvais arriver à faire quelque chose d'équivalent en utilisant seulement du CSS ?
J'ai trouvé comment remplacer ou décaler (méthode Pixy Smiley cligne une image en rollover en utilisant un style css, mais je n'ai pas trouvé comment le faire pour une autre image que celle survolée ?

Idées? Conseils? Smiley help

En vous remerciant d'avance
david
Modifié par davidg (13 Mar 2008 - 23:52)
Bonjour,

a écrit :
Remplacer une image précise au survol d'un lien [...]
Oui.

a écrit :
[...] avec CSS ?
Non.

CSS n'est pas prévu pour. Javascript, si. Smiley smile

PS: et le premier qui parle de la pseudo-classe :hover et d'imbrication d'éléments en display:none dans des liens a un blâme. Smiley lol
a écrit :
PS: et le premier qui parle de la pseudo-classe :hover et d'imbrication d'éléments en display:none dans des liens a un blâme.


ah , mais c'est toi qui en as parlé le premier Smiley cligne
Smiley jap
ok réponse claire, concise et rapide.
merci beaucoup


j'ai découvert alsacréation, les tutoriaux, le forum ... aujourd'hui, et je suis complétement fan.
Smiley love
trop bien, bravo


david
Bonsoir David,

Pourquoi vouloir se passer de JavaScript? Un script, de préférence externalisé, est pourtant parfaitement adapté à ce genre de situation.
Si toutefois tu dois t'en passer pour une raison qui m'échappe, tu peux essayer quelque chose de ce genre:
[#black][b]HTML[/b][/#]

<p>
	<a href="#">
		<img alt="" src="image1.png" width="100" height="100" />
	</a>
</p>


[#black][b]CSS[/b][/#]

a img {border:none;}
a {display:block; overflow:hidden; width:100px; height:100px;}
p a:hover {background:url('image2.png'); padding-top:100px; height:0;}

On pourrait théoriquement faire ça plus proprement grâce au pseudo-élément :before, mais Internet Explorer ne l'implémente toujours pas.

a img {border:none;}
a {display:block; overflow:hidden; width:100px; height:100px;}
a:hover:before {content:url(image2.png);}
Bonsoir Benjamin

merci pour ta réponse
Effectivement je pense utiliser du Javascript, mais vu que je suis en train de (re)découvrir le css (notamment grace à alsacreation Smiley cligne ) je me posais la question

bon j'avoue que j'aimais l'idée de tout faire en css, mais ça doit etre mon coté geek/maniaque qui avait pris le dessus Smiley lol je vais utiliser un script javascript externalisé, ce sera effectivement plus raisonnable.


merci, je pense que le sujet est résolu (comment fait-on pour le signaler?)

david
davidg a écrit :
Effectivement je pense utiliser du Javascript
Sage résolution! Smiley jap

davidg a écrit :
je pense que le sujet est résolu (comment fait-on pour le signaler?)
Comme ceci Smiley cligne
Smiley fut

Smiley vieux "il jura, mais un peu tard, que ne l'on ne l’y reprendrait plus."

alsacreationS
alsacreationS
alsacreationS
alsacreationS
alsacreationS
alsacreationS
alsacreationS
alsacreationS
alsacreationS
alsacreationS
alsacreationS
...
Modifié par davidg (14 Mar 2008 - 10:31)
davidg a écrit :

alsacreationS
alsacreationS
alsacreationS
alsacreationS
alsacreationS
alsacreationS
alsacreationS
alsacreationS
alsacreationS
alsacreationS
alsacreationS
...

Smiley clapclap
Sujet clos
Aller à