Menus qui apparaissent

Fab'Fab

Fab'Fab

Voight-Kampf Tester
Club iGen
5 Décembre 2000
16 055
3 184
là
J'ai créé ce site :


J'aimerai utiliser chaque carré comme lien vers différentes rubriques.
Je voudrais que le nom de la rubrique apparaisse par un Mouse-Over, mais rien à faire, je n'y arrive pas.
Je savais le faire du temps de Dreamwaver MX, mais on dirait que ça a bien changé depuis que j'ai abandonné le HTML!!
Si vous avez une idée, je suis preneur!!

Merci :up:
 
Fab'Fab a dit:
J'ai créé ce site :


J'aimerai utiliser chaque carré comme lien vers différentes rubriques.
Je voudrais que le nom de la rubrique apparaisse par un Mouse-Over, mais rien à faire, je n'y arrive pas.
Je savais le faire du temps de Dreamwaver MX, mais on dirait que ça a bien changé depuis que j'ai abandonné le HTML!!
Si vous avez une idée, je suis preneur!!

Merci :up:
Cliquez pour agrandir...
Tes carrés sont tous sur la même image ?

Dans ce cas une map et des area, en plus pour des carrés c'est simple :)
http://www.w3schools.com/tags/tag_area.asp

Je pense que certaines appli te permette de faire ça graphiquement (en sélectionnant la zone à la souris), si tu retouche le html après pour qu'il soit propre :)
 
Tout avec CSS sans javascript :

Bloc de code: 
<!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>Hind Boukli</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css" media="screen">
<!--
body {
    margin: 0 0;
    background: url(index.jpg) center center no-repeat;
    background-color: #000;
}
h1 {
    left: -5000px;
    top: -5000px;
    text-indent: -5000px;
    font-size: 1px;
}
#image {
    position: absolute;
    left: 50%; 
    top: 50%;
    width : 300px;
    height: 425px;
    list-style : none;
    margin-top: -300px;
    margin-left: -400px;
    border: 1px dotted white;
    padding: 175px 250px 0px 250px;
}
#image a {
    float: left;
    height: 73px;
    width: 73px;
    margin-right: 13px;
    margin-bottom: 10px;
    border: 1px dotted white;
    color: #fff;
    padding: 2px;
}
#image a span {
    position: absolute;
    left: -5000px;
    top: -5000px;
    text-indent: -5000px;
}
#image a:hover span {
    position: relative;
    left: 0px;
    top: 0px;
    text-indent: 0px;
}

-->
</style>
</head>
<body>
<h1>Hind Boukli</h1>
<ul id="image">
    <li><a href="page1.html" title="Page 1"><span>Page 1</span></a></li>
    <li><a href="page2.html" title="Page 2"><span>Page 2</span></a></li>
    <li><a href="page3.html" title="Page 3"><span>Page 3</span></a></li>
    <li><a href="page1.html" title="Page 4"><span>Page 4</span></a></li>
    <li><a href="page2.html" title="Page 5"><span>Page 5</span></a></li>
    <li><a href="page3.html" title="Page 6"><span>Page 6</span></a></li>
    <li><a href="page1.html" title="Page 7"><span>Page 7</span></a></li>
    <li><a href="page2.html" title="Page 8"><span>Page 8</span></a></li>
    <li><a href="page3.html" title="Page 9"><span>Page 9</span></a></li>
</ul>
</body>
</html>
Les fichiers

:)

P.S. : j'ai laissé un filet autour des zones (<a>) pour mieux voir ce que ça donne…
 
Ça fonctionne dans Safari, Firefox et Opera mais ça déconne dans IE 6/7. Il y a encore du boulot. En attendant, j'ai mis les fichiers à jour.

Bloc de code: 
<!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>Hind Boukli</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css" media="screen">
<!--
body {
    margin: 0 0;
    background-color: #000;
    font-family: helvetica, arial, "sans serif";
    font-size: 80%;
}
h1 {
    left: -5000px;
    top: -5000px;
    text-indent: -5000px;
    font-size: 1px;
}
#image {
    position: absolute;
    left: 50%; 
    top: 50%;
    width : 300px;
    height: 425px;
    list-style : none;
    margin-top: -300px;
    margin-left: -400px;
    /*border: 1px dotted white;*/
    padding: 175px 250px 0px 250px;
    background: url(index.jpg) center center no-repeat;
}
#image li {
    float: left;    
    height: 73px;
    width: 73px;
    margin-right: 14px;
    margin-bottom: 12px;
    padding: 2px;
    /*border: 1px dotted white;*/
}
#image a {
    display: block;
    height: 100%;
    width: 100%;
    color: #fff;
    padding-left: 0.5em;
}
#image a.noir {
    color: #000;
}
#image a span {
    position: absolute;
    left: -5000px;
    top: -5000px;
    text-indent: -5000px;
}
#image a:hover span {
    position: relative;
    left: 0px;
    top: 0px;
    text-indent: 0px;
}
p.avertissement {
    position: absolute;
    margin: 0 auto 0.5em auto;
    bottom: 0px;
    color: #777;
    font-size: small;
}
-->
</style>
</head>
<body>
<h1>Hind Boukli</h1>
<ul id="image">
    <li><a href="page1.html"><span>Page 1</span></a></li>
    <li><a href="page2.html"><span>Page 2</span></a></li>
    <li><a class="noir" href="page3.html"><span>Page 3</span></a></li>
    <li><a href="page1.html"><span>Page 4</span></a></li>
    <li><a href="page2.html"><span>Page 5</span></a></li>
    <li><a href="page3.html"><span>Page 6</span></a></li>
    <li><a href="page1.html"><span>Page 7</span></a></li>
    <li><a href="page2.html"><span>Page 8</span></a></li>
    <li><a href="page3.html"><span>Page 9</span></a></li>
</ul>
<p class="avertissement">Ce site nécessite d'avoir les images activées pour naviguer</p>
</body>
</html>

:)
 
Bon c'est un peu chiant de passer de la machine virtuelle avec ubuntu/IE67 et le mac quand on a 1Go de mémoire. :sleep: J'essayerai de régler le problème demain au boulot. ;)
 
Voilà, le fichier zip est à jour et toujours au même endroit :

Bloc de code: 
<!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>Hind Boukli</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css" media="screen">
<!--
body {
    margin: 0 0;
    background-color: #000;
    font-family: helvetica, arial, "sans serif";
    font-size: 80%;
}
h1 {
    left: -5000px;
    top: -5000px;
    text-indent: -5000px;
    font-size: 1px;
}
#image {
    position: absolute;
    left: 50%; 
    top: 50%;
    width : 300px;
    height: 425px;
    margin-top: -300px;
    margin-left: -400px;
    /*border: 1px dotted white;*/
    padding: 175px 250px 0px;
    background: url(index.jpg) center center no-repeat;
}
#image ul {
    margin: 0 0;
    padding: 0 0;
    /*width: 285px; si on met les filets sinon*/
    width: 285px;
    list-style : none;
}
#image li {
    float: left;    
    height: 73px;
    width: 73px;
    margin-right: 14px;
    margin-bottom: 12px;
    padding: 2px;
    /*border: 1px dotted white;*/
}
#image a {
    display: block;
    height: 100%;
    color: #fff;
    padding-left: 0.5em;
}
#image a.noir {
    color: #000;
}
#image a {
    text-indent: -5000px;
}
#image a:hover {
    text-indent: 0px;
}
p.avertissement {
    position: absolute;
    margin: 0 auto 0.5em auto;
    bottom: 0px;
    color: #777;
    font-size: small;
}
-->
</style>
</head>
<body>
<h1>Hind Boukli</h1>
<div id="image">
    <ul>
        <li><a href="page1.html"><span>Page 1</span></a></li>
        <li><a href="page2.html"><span>Page 2</span></a></li>
        <li><a class="noir" href="page3.html"><span>Page 3</span></a></li>
        <li><a href="page1.html"><span>Page 4</span></a></li>
        <li><a href="page2.html"><span>Page 5</span></a></li>
        <li><a href="page3.html"><span>Page 6</span></a></li>
        <li><a href="page1.html"><span>Page 7</span></a></li>
        <li><a href="page2.html"><span>Page 8</span></a></li>
        <li><a href="page3.html"><span>Page 9</span></a></li>
    </ul>
</div>
<p class="avertissement">Ce site nécessite d'avoir les images activées pour naviguer</p>
</body>
</html>
 
J'ai oubli&#233; la meta description (&#224; placer dans la partie head du document). C'est elle qui est affich&#233;e lors du r&#233;sultat d'une recherche dans un moteur de recherche, de plus elle aide au r&#233;f&#233;rencement si les mots de la phrase sont bien choisis.


Bloc de code: 
<meta name="description" content="Hind Boukli : la description du site en une phrase" />
 

Sujets similaires

Chamyky
Centrer un div et un lien, ensemble
Réponses
2
Affichages
2K
Développement web
Chamyky
Chamyky
A
Menu Flash dans iWeb
Réponses
5
Affichages
6K
Développement web
zepatente
zepatente
N
Mootools et CMS/framework PHP?
Réponses
4
Affichages
3K
Développement web
NeoDym.art
N
S
partager et échanger ses photos
Réponses
11
Affichages
2K
Développement web
p4bl0
p4bl0
omzen
Comment centre le texte de son menu ?
Réponses
4
Affichages
2K
Développement web
omzen
omzen
Haut Bas