28173 sujets

CSS et mise en forme, CSS3

Rollover affichant une 3ème image déporté possible en css ?

Bonjour tous,
j'ai fait une recherche sur le forum, sur le site et sur google mais ne trouve toujours pas de solution en css.
Soit je loupe un truc en ne comprenant pas un tuto soit ...
Dreamweaver sait le faire , avec des tableaux et avec un code pourri mais cela me semble stupéfiant que les css ne sache pas le faire.

partez du principe que l'on a 1 rollover avec 2 images (ou textes) et une troisième image (ou texte) qui s'affiche que lorsque le rollover est actif et dans u autre endroit. C'est à dire lorque la souris est sur le bouton du rollover, ma troisième image s'affiche dans une position spécifiable en position X et Y.

Un petit dessin pour être le plus clair possible http://perso.orange.fr/la-ptiote/rollovers.gif

Merci de vos réponses Smiley biggrin

Bonjour !!! (j'avais zappé la politesse Smiley lol )

Si j'ai bien compris ton problème, ce n'est pas gérable en CSS.

ton rollover ne peut avoir d'effet (avec les CSS) que sur les élements fils de l'élement HTML que tu pointes (et sur l'élement lui même evidemment).

si tu veux modifier une autre partie de ton site, il te faut du javascript.

Smiley cligne Smiley edit Modifié par Zeke (15 Dec 2006 - 10:20)[/edit]
Humm !
Ce serait pour cela que je trouve rien !!!
Dans ce cas tu associes CSS et javascript ?
Ou tu repars carrément à l'ancienne avec tableaux et comportements sous dream ?
c'est un truc comme ca que tu veux faire ?

C'est très simpliste sur la fonction JS. Tu peux gérer différentes images en fonction de tes liens en gérant plus de paramètres dans la fonction.


<!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="fr" lang="fr">
<head>
<title></title>
<style type="text/css">
body{
	font-family:"Trebuchet MS";
	font-size:0.9em;
}
a.lien{
	color:black;
	font-weight:bold;
	text-decoration:none;
}
a.lien:hover{
	color:red;
	font-weight:bold;
}

div#image{
	margin-top:20px;
	border:1px solid black;
	background-color:#FFFFCC;
	padding:20px;
	width:20px;
}

</style>
<script type="text/javascript">
	function rollover(isOver,img){
	
		url = "http://forum.alsacreations.com/smilies/cligne.gif";
		if(isOver){
			url = "http://forum.alsacreations.com/smilies/lol.gif";
		}
		document.getElementById(img).src = url;
		
	}
</script>
</head>
<body>

<a class="lien" href="#" onmouseover="rollover(true,'myImg')" onmouseout="rollover(false,'myImg')">Ceci est mon lien</a>

<div id="image">
	<img id="myImg" src="http://forum.alsacreations.com/smilies/cligne.gif" alt="" />
</div>

</body>
</html>
Je viens de regarder vite fait le résultat et cela semble prometteur.
Je décortique le code cet après 'm

Je te tiens au courant mais ... merci merci merci
Ha justement !!!

J'avais essayer de partir de ce tuto que j'avais modifié. Tout va bien sur Firefox mais IE déconne et le texte en dessous est au dessus du calque réactif.

J'ai posté un message dans ce sens et on m'a dit que cela semblais pas possible.

Mais celui là je l'avais trouvé
la ptiote a écrit :
J'ai posté un message dans ce sens et on m'a dit que cela semblais pas possible.
Ah, et bien dans ce cas-là...
je n'ai pas cherché dans les tutos si il en avait un qui correspondait... Smiley sweatdrop

Visuellement parlant, les deux solutions donnent le même résultat.
Par contre niveau organisation des élements et code, ca change tout (javascript en plus notamment).

A la ptiote de choisir en fonction de sa charte graphique et de l'organisation de ses élements.

Smiley cligne
Bonjour,

Politiquement, sémantiquement incorrect Smiley biggol
mais sans JS ni hack, juste du détournement de balise Smiley lol 

<style type="text/css">	

#conteneur{
width: 400px;
height: 250px;
position: relative;
}

 a { 
display: block;
width: 400px;
height: 250px;
text-decoration: none;
color: #000;
background: url(pic1.jpg); 
}

a:hover {
overflow: hidden; 
}

a span.deux{ 
display: none;
width: 400px;
height: 250px;
position: absolute;
left: -9999px;
}

a:hover span.deux{ 
left: 0px;
display: inline;
background: url(pic2.jpg);
}

a em{
width: 400px;
height: 250px;
position: absolute;
left: -9999px;
}

a:hover em{
left: 0;
top: 280px;
}
</style>
</head>
<body>

<div id="conteneur">
<a href=""<span><span class="deux"></span></span><em><img src="pic3.jpg" /></em></a>
</div>

</body>


Le bloc #conteneur c'est pour le positionnement en relatif et afin que les images en rollover puissent s'afficher et le double (laid !!) span c'est pour IE... dans ce cas il ne comprend pas bien les simples...
Bien, je vais regarder ta solution aussi car elle est interessante et me parle plus, car je n'ai pas trop l'habitude de modifier les Javascript.
Comme j'ai 2 choses un peu différentes à faire pour 2 sites, je devrai finir par trouver mon boheur grace à vous.
Merci les coapins.
La p'tiote
Sujet clos
Aller à