Tutoriel: menus rollover, images irrégulières, rollovers à distance...

Recherche :

Mot : Pseudo : Filtrer
Page : 1 2 Page Suivante Page Précédente Bas de page
Auteur	Sujet : Tutoriel: menus rollover, images irrégulières, rollovers à distance...

masklinn

í dag viðrar vel til loftárása

Reprise du message précédent :
Il ne les gère pas parce que son CSS est suffisament bien fait ( [:thierry3] ) pour ne pas avoir de problème avec les bugs d'interprétation d'IE (contrairement au mien).

En clair, il n'est à aucun moment dans un cas où il a besoin d'un IE hack, donc pas de hack [:cupra]

---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody

Publicité

Djebel1

Nul professionnel

bah il utilise une marge négative, et visiblement c'est ca qui te posait problème non?

masklinn

í dag viðrar vel til loftárása

Djebel1 a écrit :

bah il utilise une marge négative, et visiblement c'est ca qui te posait problème non?

il n'utilise pas que ça [:spamafote]

---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody

Harkonnen

Modérateur
Un modo pour les bannir tous

drapal pour le jour ou ça me prendra...

...en 2018 quoi [:petrus75]

---------------
J'ai un string dans l'array (Paris Hilton)

black_lord

Truth speaks from peacefulness

j'ai eu du mal à le retrouver sans drapal [:petrus75]

---------------
uptime is for lousy system administrators what Viagra is for impotent people - mes unixeries - github me

The-Shadow

Développeur
T'as été voir dans ton profil?

Très intéressant ce tuto.

Et ça ressemble pile poil à un truc que ma femme m'a demandé pour illustrer un article sur son site.
Bon, j'avoue, je voulais le faire en JS avec un image Map.

Du coup, je vais peut-être le faire en CSS, sauf que justement, c'est pour illustrer un article et non pour un menu, d'où ma question.
Y'a-t-il moyen de faire la même chose sans les positions absolus. Parce que l'illustration se placera toute seule en fonction du texte de l'article ?

masklinn

í dag viðrar vel til loftárása

pas très clair comme question.

Comment serait l'illustration?
Les zones réactives sont sur l'illustration ou ailleurs?
Où est donc Ornicar?
Où est passé Charlie?

---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody

The-Shadow

Développeur
T'as été voir dans ton profil?

Bah en fait, t'imagine un article au hasard http://www.gloriette-artemis.net/i [...] 12&noart=9

L'article sera contenu dans une cellule de texte, (désolé, c'est dans des tables, le site est plus tout jeune, je le rafraichirais too late
Et donc, dans l'exemple que je te donne, imagine qu'en dessous de l'image de titre, je mette une image de cocker anglais avec des zones réactives, un peu comme ça (c'est ma femme qui m'a fait une GIF vite fait pour que je pige ce qu'elle aimerait) : http://img259.echo.cx/img259/9443/animation0gn.gif

Dans l'idée, ça ressemble à ton menu, un chien avec des zones qui changent de couleurs au passage de la souris et qui renvoient sur la page concernant la partie du corp concerné.

masklinn

í dag viðrar vel til loftárása

The-Shadow a écrit :

:sweat:

Vu la complexité des zones je vois pas comment c'est faisable, les CSS ne gèrent que des zones rectangulaires (j'ai triché pour que ça en ait pas l'air, mais les zones réactives restent rectangulaires sur le menu).

Même avec des maps me semble pas qu'on puisse générer des zones à ce point complexe de toute façon... quoiqu'avec shape polygon si on a vraiment rien d'autre à faire on doit pouvoir y arriver [:pingouino]
Le plus simple ici ce serait quand même un machin en flash avec un menu textuel en redondance en dessous ou au dessus

---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody

The-Shadow

Développeur
T'as été voir dans ton profil?

Arf.
J'ai peur de devoir faire une image par zone, bonjour la lourdeur, mais l'image sera plus petite que le GIF d'exemple.
En fait, faute de mieux, je vais faire des images map poly détourant grossièrement et un p'tit coup de JS pour remplacer l'image entière. Comme ça, si le gars a pas de JS, les liens fonctionneront quand même et si il a le JS, ça changera l'image.
Qu'est-ce que j'me fais pas chier pour ma femme.

Publicité

chimelpremier

Bonjour,
Très intéressant ce projet de rendre accessible ce joli menu graphique. Masklinn, bravo pour ce tutoriel plein de bonne humeur !
Le test sur ma machine win98/400mhz donne le mème résultat pour ta version et celle d'OlivierPatry : Moz 1.4, NS6.2, Firefox 0.8 :RAS, mais avec IE6, le survol du lien fait apparaitre la 2ème image avec un retard d'une demi seconde. J'ai tenté de remédier en optimisant encore le css, notamment en remplaçant display:none par left:-999px, mais rien n'y fait, c'est IE6/win98 qui semble recharger l'image d'arrière-plan à chaque fois. Le phénomène disparait hors connexion.
voici le code :

Code :

* {margin:0;padding:0}
h1#header{width:785px;height:247px;background:url(design/header.jpg);}
h1#header span{display: none ;}
ul#menu{width:785px;height:103px;background:url(design/vignettes.jpg)}
ul#menu li{display:inline ;}
#menu li a{display:block;height:92px;position:relative;color: #A8B4F3;text-decoration:none ;background:url(design/vignettes.jpg) 0 -103px;}
li#news a {width:139px;margin-left:133px}
li#projets a {width:60px;margin-left:-15px}
li#team a {width:83px;margin-left:-21px}
li#forum a {width:88px;margin-left:-14px}
li#livre a {width:108px;margin-left:-22px}
li#liens a {width:108px;margin-left:-26px}
li#news a:hover {left:0}
li#projets a:hover{left:-139px }
li#team a:hover {left:-199px}
li#forum a:hover {left:-282px}
li#livre a:hover {left:-370px}
li#liens a:hover {left:-478px}
#menu li a span{position:absolute;width:150px;left:-999px;z-index:99}
#menu li a:hover span{top: 65px ;}
#news a:hover span { left: 500px ; }
#projets a:hover span { left: 376px ; }
#team a:hover span { left: 337px ; }
#forum a:hover span { left: 269px ; }
#livre a:hover span { left: 203px ; }
#liens a:hover span { left: 120px ; }

Opéra 7.23 bizarre : l'infobulle title n'apparait pas :ouch:
sur IE5.0 il n'y a pas de retard au survol mais, j'ai un autre problème : le petit message à droite n'apparait pas. Je n'ai pas trouvé de parade, mais avec l'infobulle ça fait presque double emploi non ?
Juste une question : pourquoi ul#menu, il ne peut y avoir un seul id="menu" non ?
J'ai simplifié par #menu me trompe-je ?

Message édité par chimelpremier le 30-06-2005 à 01:18:06

masklinn

í dag viðrar vel til loftárása

chimelpremier a écrit :

c'est IE6/win98 qui semble recharger l'image d'arrière-plan à chaque fois. Le phénomène disparait hors connexion.
voici le code

Oui, ie6 a pas mal de merde au niveau du cache [:spamafote]

Normalement la version d'Olivier n'a pas cela

---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody

chimelpremier

masklinn a écrit :

Normalement la version d'Olivier n'a pas cela

si :fou:
le problème avec Opéra était local.

chimelpremier

Bonjour Masklinn, mon problème de clignotement IE6/win est résolu; Il concernait le paramétrage du cache :
Outils > Options Internet > onglet Général > bouton Paramètres > vérifier s'il éxiste une page enregistrée plus récente > automatiquement.

seb306bzh

salut Masklinn :hello:

j'ai suivi ton super tutoriel pour faire un menu de ce type sur un site perso que je débute : http://forum.foresti.free.fr

et donc voila mon menu pour l'instant grace à ton tuto : http://forestiforum.free.fr/menu.htm

testé sous firefox, je sais pas si ça marche bien sur les autres naviguateur...

en tout cas c'est original ! :bounce:

PC: il me reste juste une puce en a gauche :??:

Message édité par seb306bzh le 04-07-2005 à 22:31:09

gatsusat

met un DTD sur ta page car IE ne peut pas l'afficher il prend ca pour du XML

gatsusat

c'est pas assez explicite l'image. Moi ca me dis pas d'aller sur la page du premier coup.

faudrait mettre l'appareil photo en filigrane et quand la souris passe dessus elle change de couleur, fait pareil pour les autres objets.

masklinn

í dag viðrar vel til loftárása

seb306bzh a écrit :

Menu incompréhensible et inutilisable, désolé, j'appelle pas ça un menu [:spamafote]

---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody

seb306bzh

ok je vais modifier ça ...

Message édité par seb306bzh le 04-07-2005 à 23:09:36

---------------
merci http://forum.hardware.fr !!

gatsusat

mets à la rigueur du texte sur les parties de la nana

seb306bzh

gatsusat a écrit :

met un DTD sur ta page car IE ne peut pas l'afficher il prend ca pour du XML

Comment on fait ça ?

gatsusat a écrit :

mets à la rigueur du texte sur les parties de la nana

ouep je vais faire des essais...

:hello:

Gonzoide

Les cochons... dans l'espâââce

Deterrage de topic : j'ai utilise cette methode pour faire un menu sur mon site ( http://plongeursmasques.free.fr, XHTML Strict, en construction).

Ca marche pile-poil, sauf que quand je passe rapidement avec la souris au-dessus des menus, ca freeze sans raison, sous IE et FF :??:

EDIT : resolu sous FF, mon span contenait une image qui s'etendait jusque sous le <a>, visiblement FF aime pas (en deplacant mon <span>, c'est bon. Mais IE deconne toujours ...

Message édité par Gonzoide le 19-10-2005 à 23:49:11

gatsusat

colle ton code !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

---------------
Les CSS c'est bon mangez-en

Gonzoide

Les cochons... dans l'espâââce

CSS :

@media screen {

/* Style generique */

body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10pt;
font-weight: normal;
margin-top: 0px;
margin-left: 0px;
margin-right: 0px;
margin-bottom:50px;
padding-bottom: 50px;
background:url(images/newbottom.jpg);
background-color:#15049e;
color:#f0f000;
}

p {
margin-bottom:10px;
}

a {
text-decoration:none;
color:#FFA000;
}

h1 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14pt;
color:#ffff00;
border-bottom:solid 2px #ffff00;
border-left:solid 2px #ffff00;
padding-left:5px;
}

h2 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12pt;
color:#ffff00;
border-bottom:solid 1px #ffff00;
border-left:solid 1px #ffff00;
padding-left:5px;
}

h3 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10pt;
color:#ffff00;
}

table {
border:solid 1px #D0FFFF;
border-collapse:collapse;
text-align:left;
}

td {
border:solid 1px #D0FFFF;
border-collapse:collapse;
padding:5px;
}

th {
border:solid 1px #D0FFFF;
border-collapse:collapse;
background-color:#D0FFFF;
color:#00034E;
font-weight:bold;
text-align:center;
padding:5px;
}

/* Menu */

#menu {
position: absolute;
left:0px;
top:0px;
font-size: 10pt;
padding-top:250px;
padding-left:35px;
z-index:6;
}

#menu ul {
list-style-type: none
}

#menu li {
margin-bottom: 0px;
border:solid 0px #6B5721;
display: block;
background: #C9AB50;
width: 100px;
color: black;
text-align: center;
}

#menu img {
border:none;
}

#menu a {
display:block;
background: #C6DFF2;
width: 100px;
color: black;
text-align: center;
text-decoration: none;
}

#menu a:hover {
background: #ffff00;
}

#menu a span {
display: none;
width: 100px;
color: #000;
position: absolute;
top: 10px;
left: 10px;
text-align: left;
}

#menu a:hover span {
display:block
}

/* Degrade de fond */

#deco1 {
height:512px;
background:url(images/newback.jpg) left center repeat-x;
z-index:0;
}

/* Titre en haut de page */

#deco2 {
position:relative;
top:-512px;
height:150px;
width:100%;
background:url(images/titre.png) top center no-repeat;
}

/* Etoile de mer, a gauche */

#deco3 {
position:absolute;
right:0px;
top:0px;
width:85px;
height:88px;
background:url(images/etoile.png);

}

/* Manometre */

#deco4 {
position:absolute;
left:10px;
top:10px;
width:127px;
height:239px;
background:url(images/mano.png);
z-index:4;
}

/* Flexible */

#deco5 {
position:absolute;
left:12px;
top:249px;
width:127px;
height:200px;
background:url(images/flexible.png) repeat-y;
z-index:3;
}

/* Bloc principal */

#panel {
position: absolute;
left:200px;
top:150px;
padding-left:0px;
padding-right:160px;
padding-bottom:50px;
text-align:justify;
}

#panel li {
list-style-image:url(images/bullet.png);
padding-left:5px;
}

/* Etat de connection du visiteur */

#login {
position:absolute;
left:3px;
top:0;
font: 8pt verdana, sans-serif;
}

}

le XHTML :

<!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" />
<meta name="author" content="Plongeurs Masqués" />
<meta name="description" content="Site web du club de plongée 'Les Plongeurs Masqués', Thionville." />
<meta name="keywords" content="plongée, plongee, thionville, club de plongée, moselle, lorraine, cmas, ffessm, padi, mf1" />
<meta name="robots" content="all" />
<title>Plongeurs Masqués - Accueil</title><style type="text/css" title="currentStyle" media="screen">@import "/style.css";</style>
<style type="text/css" title="currentStyle" media="print">@import "/styleprint.css";</style>
</head>
<body>

<div id="deco1"> </div>
<div id="deco2"> </div>
<div id="deco3"> </div>
<div id="deco4"> </div>
<div id="deco5"> </div>

<div id="menu">
<ul>
<li><a href="">Accueil <span><img src="/images/aiguille01.gif" alt="aiguille" /></span></a></li>
<li>Le club</li>
<li><a href="">Test <span><img src="/images/aiguille02.gif" alt="aiguille" /></span></a></li>

<li><a href="">Statuts <span><img src="/images/aiguille03.gif" alt="aiguille" /></span></a></li>
<li><a href="">Règlement<span><img src="/images/aiguille04.gif" alt="aiguille" /></span></a></li>
<li><a href="">Trombino <span><img src="/images/aiguille05.gif" alt="aiguille" /></span></a></li>
<li><a href="">Contact <span><img src="/images/aiguille06.gif" alt="aiguille" /></span></a></li>
<li>Espace Membres</li>
<li><a href="">Connexion<span><img src="/images/aiguille07.gif" alt="aiguille" /></span></a></li>
<li><a href="">Fosses <span><img src="/images/aiguille08.gif" alt="aiguille" /></span></a></li>
</ul>
</div>

<div id="panel">
<p>Bienvenue sur le site web blabla</p>
</div>
</body>

</html>

gatsusat

si tu virais ton truc
@media screen { }
qui ne sert pas à grand chose et qui plus est, c'est la premiere fois que je vois un truc pareil.
normalement je pense que ca sert à importer une feuille de style.

et puis utiliser plutot la balise link que faire du @import dans les styles inline.
je trouve ça plus clean. et puis les vieux navigateurs on s'en branle.
ensuite pourquoi faire : <span><img></span> alors que IMG s'en sort très bien tout seul.

puis pourquoi utiliser des images, alors que tu aurait pu utiliser un background et le mettre dans le span !

rajoute aussi cette ligne dans tes CSS, jsute après un de tes a:hover :

a:hover {border-bottom:0px;}/* indispensable pour IE seulement */

---------------
Les CSS c'est bon mangez-en

gatsusat

et quand on te demande le CSS on te demande ke le menu hein !!

---------------
Les CSS c'est bon mangez-en

Gonzoide

Les cochons... dans l'espâââce

Le media screen, c'est parce que j'ai une feuille de style pour imprimer egalement ... c'est pas comme ca, la meilleure methode pour specifier une feuille de style en fonction du media ?
Pour le <span><img> au lieu de juste <img> c'est exact, j'ai pas trop reflechi comme le tuto de base etait pour du texte
Pour le coup de mettre un background dans le span, je ne sais pas si on peut le faire puisque les images sont differentes a chaque fois

gatsusat

faudrait alors specifier un id et bon laisse l'img dans ce cas. Mais il ne faut pas que l'image soit du texte alors.

sinon pour la feuille de style utilise plutot la balise link

exemple du code de openweb :

Code :

<link rel="stylesheet" type="text/css" href="/style/original/screen.css" media="screen" title="Normal" />
<link rel="stylesheet" type="text/css" href="/style/original/print.css" media="print" title="Normal" />
<link rel="alternate stylesheet" type="text/css" href="/style/fondnoir/screen.css" media="screen" title="Fond noir" />
<link rel="alternate stylesheet" type="text/css" href="/style/fondnoir/print.css" media="print" title="Fond noir" />
<link rel="alternate stylesheet" type="text/css" href="/style/fondnoir_medium/screen.css" media="screen" title="Fond noir/gros caractères" />
<link rel="alternate stylesheet" type="text/css" href="/style/fondnoir_medium/print.css" media="print" title="Fond noir/gros caractères" />
<link rel="alternate stylesheet" type="text/css" href="/style/minimale/screen.css" media="screen" title="Minimal" />
<link rel="alternate stylesheet" type="text/css" href="/style/minimale/print.css" media="print" title="Minimal" />
<link rel="alternate stylesheet" type="text/css" href="/style/sanshabillage/screen.css" media="screen" title="Sans habillage" />
<link rel="alternate stylesheet" type="text/css" href="/style/sanshabillage/print.css" media="print" title="Sans habillage" />

---------------
Les CSS c'est bon mangez-en

Gonzoide

Les cochons... dans l'espâââce

:jap: Merci

Je sais pas si ca va changer grand chose, mais je vais essayer de supprimer le <span>, a part ca je vois pas quoi faire. T'as constate aussi le probleme en allant sur mon site ?

EDIT : si j'enleve le <span>, ca marche plus du tout => retour a la case depart :cry:

Message cité 1 fois
Message édité par Gonzoide le 20-10-2005 à 09:52:55

pascal_

Gonzoide a écrit :

Sous Opera ça marche bien

gatsusat

a toi de modifier la CSS en consequent nunuche

Message cité 1 fois

---------------
Les CSS c'est bon mangez-en

Gonzoide

Les cochons... dans l'espâââce

gatsusat a écrit :

a toi de modifier la CSS en consequent nunuche

Ben si je comprenais le probleme, j'aurais peut-etre une idee de la solution

Gonzoide

Les cochons... dans l'espâââce

Pour info, je m'en suis sorti en jouant sur le background avec comme CSS:

#menu a span {
display: block;
position:absolute;
top: 10px;
left: 10px;
width:127px;
height:127px;
background:none;
}

#menu a#aiguille01:hover span { background:url(images/aiguille01.gif); }
#menu a#aiguille02:hover span { background:url(images/aiguille02.gif); }
#menu a#aiguille03:hover span { background:url(images/aiguille03.gif); }
#menu a#aiguille04:hover span { background:url(images/aiguille04.gif); }
#menu a#aiguille05:hover span { background:url(images/aiguille05.gif); }
#menu a#aiguille06:hover span { background:url(images/aiguille06.gif); }
#menu a#aiguille07:hover span { background:url(images/aiguille07.gif); }
#menu a#aiguille08:hover span { background:url(images/aiguille08.gif); }

et comme HTML:

<div id="menu">
<ul>
<li><a href="" id="aiguille01">Accueil <span> </span></a></li>
<li>Le club</li>
<li><a href="" id="aiguille02">Test <span> </span></a></li>

<li><a href="" id="aiguille03">Statuts <span> </span></a></li>
<li><a href="" id="aiguille04">Règlement<span> </span></a></li>
<li><a href="" id="aiguille05">Trombino <span> </span></a></li>
<li><a href="" id="aiguille06">Contact <span> </span></a></li>
<li>Espace Membres</li>
<li><a href="" id="aiguille07">Connexion<span> </span></a></li>
<li><a href="" id="aiguille08">Fosses <span> </span></a></li>
</ul>
</div>

En plus c'est plus propre, y'a plus de reference aux images dans le HTML

Publicité

Page : 1 2

Page Suivante

Page Précédente

Haut de page

FORUM HardWare.fr

Programmation

HTML/CSS

Tutoriel: menus rollover, images irrégulières, rollovers à distance...

Sujets relatifs
Supprimer le blancs entre 2 images	Images tiff avec wxwidgets
pb d'excution d'une commande a distance sur une otre machine	images pour interface
Besoin de conseils pour ouvrir des images sur une casio graph100+(calc	Protection des images
Rollover a distance	[CSS][Nioub] affichage de morceaux d'images
RollOver mais pas de lien (CSS).
Plus de sujets relatifs à : Tutoriel: menus rollover, images irrégulières, rollovers à distance...

Page générée en 0.154 secondes