18041 sujets

Questions générales et questions de débutants

[RESOLU] Roll Over et Image MAP

Bonsoir,

J'ai une problématique avec un de mes menus CSS.
Je travaille avec ce fichier :
upload/20953-menu1.jpg
Comme vous pouvez le constater il s'agit d'un menu roll Over en CSS.
Par contre je souhaiterais que les phrases "Editorial du groupe" et "Ce que nous avons promis" soient deux liens cliquables.
Voici le CSS pour mon menu :

ul#menu {
margin:0;
padding:0;
list-style-type:none;
}
ul#menu li {
margin:0 0 0px 0;
padding:0;
}
ul#menu li a {
display:block;
width:274px;
height:68px;
text-decoration:none;
}
#menu1 a {
background:url('../Images/menu1.jpg') no-repeat 0 0;
}
#menu1 a:hover {
background:url('../Images/menu1.jpg') no-repeat 0 -68px;
}

Est-ce que je peux utiliser les balises MAP pour me permettre de rendre cliquables ces deux liens ?

Par avance merci.
Modifié par ChrisFX (13 Apr 2009 - 14:51)
Tu peux donner l'adresse du web, ou au moins le code html ...
pour te dire comment faire car la feuille de style ne suffit pas Smiley eek
Salut !

Merci pour ta réponse.

Voici le site en ligne en version bêta :
http://www.zenpcmulhouse.com/grpmajo/

et le code HTML du menu : 


<table cellpadding="0" cellspacing="0">
<tr><td width="274">
<ul id="menu">
<li id="menu1"><a href="index.php?page=projet"></a></li>
<li id="menu2"><a href="index.php?page=equipe"></a></li>
<li id="menu3"><a href="#"></a></li>
<li id="menu4"><a href="index.php?page=pointdevue"></a></li>
<li id="menu5"><a href="#"></a></li>
<li id="menu6"><a href="#"></a></li>
<li id="menu7"><a href="#"></a></li>
<li id="menu8"><a href="#"></a></li>
<li id="menu9"><a href="#"></a></li>
<li id="menu10"><a href="#"></a></li>
<li id="menu11"><a href="#"></a></li>
</ul>
</td></tr>
</table>


A ta disposition si tu as besoin d'autres éléments.

Merci.
Modifié par ChrisFX (12 Apr 2009 - 07:03)
Hello ChrisFX et bienvenue sur le forum, Smiley smile

la première chose est que ta page est inaccessible puisque tu as mis le contenu dans des images en background css alors qu'il faut le mettre dans le code html :
contenu = html / présentation = css.

En effet il suffit que...
1) les images soient désactivées/indisponibles
2) les css soient désactivées/indisponibles
3) le "visiteur" n'utilise pas un navigateur graphique (lecteurs d'écrans, moteurs de recherche...)
...pour que le contenu lui même ne soit pas accessible !

D'autre part il manque (au minimum) un doctype et une déclaration de l'encodage (<meta http-equiv="Content-Type") à ta page.

Cela pourrait donner :
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Test</title>
<style type="text/css" media="screen">
body {
	font-family: Verdana, "DejaVu Sans", "Bitstream Vera Sans", Geneva, sans-serif;
	font-size: .7em;
	color: #009DE0;
}

#menu {
	list-style: none;
	margin: 0;
	padding: 10px;
}

#menu li {
	width: 190px;
	padding: 20px;
}

#menu li:hover {
	background-color: #009DE0;
	color: #fff;
}

#menu li:hover a {
	color: #fff;
}

#menu li h2 {
	font-size: 1em;
	margin: 0;
	padding: 0;
}

#menu li a {
	text-decoration: none;
	display: block;
	color: #009DE0;
}

</style>
</head>
<body>
<ul id="menu">
	<li>
		<h2>Notre projet pour Mulhouse</h2>
		<a href="lien1.php">Editorial du président du groupe</a>
		<a href="lien2.php">Ce que nous avions promis</a>
	</li>
	<li>
		<h2><a href="lien3.php">Une équipe au service de votre ville</a></h2>
	</li>
</ul>
</body>
</html>
Il faudra prévoir un peu de JavaScript si tu veux obtenir le même rendu avec IE6 (à l'aide de commentaires conditionnels) car il ne comprend la pseudo-class :hover que sur les liens.
Bonsoir !
Rien a rajouter a Heyoan tout y est, ...
sauf une question, j'ais vu justement sur ton site que toi aussi tu utilisais largement ces commentaires conditionnels, je trouve que ça fait rafistolage, mais je ne vois pas comment y échapper Smiley eek En fait comme toujours, peut a peut tout cela va disparaitre ?

Je vois par exemple ce bouton magique sur IE8 qui fais basculer tout les sites que l'on veut en en mode restreint pour réparer la vision ... ça me fait penser au format automatique de ma télévision .. c' est imparfait mais déjas pas mal !

Escusez cette digression Smiley biggrin
Hello !


Je n'ai qu'une remarque pour toi Heyoan :
JE T'AIME lol

Non plus sérieusement merci beaucoup, ta solution marche à merveille.


A bientôt ! Smiley biggrin
Cool !

Ma copine me demande de te dire qu'elle, elle n'aime pas trop tes familiarités ! Smiley lol


Si tu considères que ce sujet est [Résolu] merci de l'indiquer en éditant ton premier post et en modifiant le titre. Smiley cligne
Sujet clos
Aller à