28172 sujets

CSS et mise en forme, CSS3

Vérification code pour un Rollover ! thanks

Bonjour , voila j'aimerais faire un effet rollover, je voudrais que quand on clique sur l'image menu, apparaisse à coté de cette image une autre image texte (Agence), j'ai trouvé ce code que j'ai modifié, mais cela ne marche pas bien, l'image source n'est pas la bonne. je vous remercie par avance de votre aide !

Voici le lien et le code !!
http://dreadstock.110mb.com/index.html#
#logo {



	position:absolute;

	top:130px;

	left:300px;

	margin:0px;

	height: 482px;

	width: 355px;

}

#conteneur1 {

	height: 670px;

    width: 1280px;

	position:absolute;

}

#conteneur2 {

	height: 130px;

    width: 100%;

	background-image:url(images/1px.jpg);

	background-repeat:repeat;

	top:670px;

	position:absolute;

}

#menu1 {

	position:absolute;

	top:430px;

	left:220px;

	margin:0px;

	height: 104px;

	width: 62px;

}

#hover_menu1 {

	position:absolute;

	top:450px;

	left:80px;

	margin:0px;

	height: 39px;

	width: 119px;

}

<script language="JavaScript">

bouton = new Image();

bouton.src = "images/menu1.png";

</script>







</style>

</head>



<body>



<div id="conteneur1">

<div id="menu1"><img src="images/menu1.png" alt="Agence" />

</div>

<div id="hover_menu1"><a href="#" onmouseover="bouton.src = 'images/hover_menu1.png';" onmouseout="bouton.src = 'images/menu1.png';"><img src="images/menu1.png" border=0 width="119" height="39" name=bouton></a>

</div>
Bonjour,

Ta méthode est bonne, ce sont tes boutons qui sont mal fait, je t'expliques cela aprés,
Voici donc uniquement pour menu1 et menu2 comment écrire (comme dans ta page)
aprés tu fera le reste pareil !


<script language="JavaScript">
bouton1 = new Image();bouton1.src = "images/menu1.png";
bouton1a = new Image();bouton1a.src = "images/hover_menu1.png";
bouton2 = new Image();bouton2.src = "images/menu2.png";
bouton2a = new Image();bouton2a.src = "images/hover_menu2.png";

</script>
//======= PUIS ENSUITE===============
<div id="hover_menu1">
<a href="#" onmouseover="xmenu1.src = bouton1a.src" onmouseout="xmenu1.src = bouton1.src;"><img src="images/menu1.png" border=0 width="119" height="39" id="xmenu1" name="xmenu1" alt"xxx" /></a>
</div>
<div id="menu2">
<a href="#" onmouseover="xmenu2.src = bouton2a.src" onmouseout="xmenu2.src = bouton2.src;"><img src="images/menu2.png" border=0 width="119" height="39" id="xmenu2" name="xmenu2" alt"realisation" /></a>
</div>
<div id="menu3">
// ============ ETC..............

<img src="images/menu3.png" alt="projet" />
</div>
<div id="menu4"><img src="images/menu4.png" alt="mobilier" />
</div>
<div id="menu5"><img src="images/menu5.png" alt="contact" />
</div>


fais attention a quelques détails,
sur ta page tu ferme dans le body STYLE apres SCRIPT !!
autre chose n'écris pas de ID="" ayant un nom déjas utilisé !

Bon courage Smiley biggrin

A oui j'oubliais les imagesTu dois les revoir, en effet elles doivent avoir la même taille
par paire ... Donc menu1 même taille que hover_menu1
etc...
Et si j'essais de te dessiner un cas
XXXXXXXXXXXX
XXXXXXXXXXXX
TTTTTTTTTTTT

Bon on va dire que les XXXXXXX c'est la zone image
et les TTTTTTTTTT c'est le texte et sur le HOVER du transparent !!!
XXXXXXXXXXXX
XXXXXXXXXXXX
Merci pour ton aide, mais n'est il pas plus simple de le faire en CSS. Ca serait le même résultat.
Car j'ai cru que je pouvais, avec javascript, effectuer un rollover seulement sur l'image menu1 et qu'ensuite apparaisse a droite de l'image, l'image texte.
Sans qu les 2 images fasses la même taille.
Javascript ne peut il pas faire cela ?
Pour le background tu peux faire :

tadiv{
background-repeat:no-repeat;
}

Et là il ne répète ton fond qu'une seule fois Smiley cligne .
j'ai trouvé, j'ai mis repeat-x pour qu'il ne se répète que sur la droite et j'ai mis une couleur background noir !!
dreadstock a écrit :
j'ai trouvé, j'ai mis repeat-x pour qu'il ne se répète que sur la droite et j'ai mis une couleur background noir !!

Trop super bravo et A++ Smiley biggrin
Sujet clos
Aller à