28172 sujets

CSS et mise en forme, CSS3

Bonjour,

J'aimerais que lors du passage de ma souris sur une zone de mon image cliquable, une autre image s'affiche.
Voici mon code html :

<img class="mappe_monde" src="Images/Mappe_monde.png" width="1000" height="500" border="0" usemap="#map" />
	<map name="map">								
			<area  shape="circle" coords="194,127,11" href="Parcs/Yellowstone.php" Title="Yellowstone" />
			<area  shape="circle" coords="532,116,12" href="Parcs/Mercantour-Alpi_Marittime.php" Title="Mercantour-Alpi_Marittime" />
			</map>


J'aimerais qu'a la place de mon title, s'affiche une petite image correspondant aux parcs de yellowstone et du Mercantour. Ces images sont contenus dans le même fichier que mon image mappe_monde.

J'ai déjà vu des techniques qui consiste a mettre des balise span, mais lorsque je les mets dans mes balises area il ne se passe rien.
Je ne connaît rien en javascript donc si vous pouviez me donnez des astuces en CSS se serait bien venu Smiley biggrin

J'espère que c'est compréhensible et pas trop bourrez de fautes.

Merci.
Modifié par Sinnincio (09 May 2014 - 16:08)
Et si tu rajoute une class a ta balise <area> avec un background-image et une opacity à 0 et en :hover tu la passe a 1 ?
Modifié par remif (10 May 2014 - 08:56)
J'ai essayé en mettant ça :
<area class="Zone_Yellowstone" shape="circle" coords="194,127,11" href="Parcs/Yellowstone.php" Title="Yellowstone" />

Avec en css :
.Zone_Yellowstone {
	background-image: url(Yellowstone.png);
	opacity:0;	
}

.Zone_Yellowstone :hover {
	opacity: 1;	
}


Mais ça ne m'affiche toujours que mon Title.
J'ai aussi essayé
.Zone_Yellowstone Title:hover {

Et d'autre code approximative mais rien n'y fait.

Désolé de ne pas avoir essayé plus de choses mais je suis pressé par le temps et j'ai déjà passé pas mal de temps sur cette image, donc je pense que je vais un peu laisser tomber.

En tout cas merci pour la réponse Smiley smile