image survolée..bug?

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : image survolée..bug?

francescu

youpee !!

bonsoir,

j'essaie de faire un menu avec une image survolée a cote de chaque lien...Un truc simple en fait, mais ddes petits soucis se posent a moi.

Code :

<style>
a.barrenav:link {
color: #C03;
text-decoration: none;
background-image: url(images/alveole.gif);
background-repeat: no-repeat;
padding-left: 25px;
}
a.barrenav:hover {
color: #CCC;
text-decoration: none;
background-image: url(images/alveolePush.gif);
}
</style>
<A HREF="trucmachin.htm" class="barrenav">La production </A>
<A HREF="truc.htm" class="barrenav">L'hydromel </a>

Alors l image en roll over s'affiche a moitié...je ne vois pas pourquoi
Et lorque le lien a ete visité, l image n'apparait plus
voici un bout de mon probleme

Merci par avance pour votre aide :jap:

http://perso.wanadoo.fr/kulgana/Aristee/production.htm

Message édité par francescu le 01-12-2005 à 15:32:54

Publicité

The-Shadow

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

essaye plutot .barrenav a:link

The-Shadow

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

Rho zut, j'avais lu la question qu'à moitié vite fait.
fait un display block et donne des dimensions à ton css

francescu

youpee !!

merci...

ce serait abusé de te demander un exemple?

The-Shadow

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

Code :

a.barrenav:link {
display:block;
width:130px;
height:30px;
color: #C03;
text-decoration: none;
background-image: url(images/alveole.gif);
background-repeat: no-repeat;
padding-left: 25px;
}

J'ai mis n'importe quoi pour la largeur et la hauteur, toi, faut mettre les dimentions de ton image de fond.

francescu

youpee !!

rho merci beaucoup...
mais pourquoi l'image disparait elle une fois que l'on a visité le lien?

The-Shadow

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

Essayes :

Code :

a.barrenav:link, a.barrenav:visited {

en remplacement.

francescu

youpee !!

waou... je te remercie beaucoup...
Une derniere question apres je t'embete plus, promis : y a t il un moyen d'eviter le chergement de la deuxieme image? (pour supprimer cet effet de clignotement)

http://perso.wanadoo.fr/kulgana/Aristee/production.htm

The-Shadow

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

Tu parles de l'effet de clignotement la première fois ?

Perso, je fais un petit js qui précharge dans le head :

Code :

<script type="text/javascript">
precharg1 = new Image();
precharg1.src= 'chemin/dudossier/de/monimage.gif';
</script>

Enfin bon, ça n'arrive qu'une fois, une fois en cache, c'est okey si tu ne veux pas inclure de JS.

Mais je pense qu'il y a plus propre.

francescu

youpee !!

alors j'essaie de mettre tout ca dans une feuille de style quii se trouve dans le dossier includes...
j'ai ecrit ca mais plus rien ne s'affiche...
<link rel="stylesheet" type="text/css" href="./includes/classe.css">

Publicité

francescu

youpee !!

aie j'avais oublié un "."

background-image: url(../images/alveolePush.gif);

gatsu35

Blablaté par Harko

ou tout simplement utiliser la technique des portes coulissantes qui consiste à utiliser une seule et même image

francescu

youpee !!

coucou,
je n'arrive pas a supprimer cet effet de clignotmemnt(chargement de l'image)..meme en mettant le code en javascript... merci pour votre aide

http://perso.wanadoo.fr/kulgana/Aristee/production.htm

francescu

youpee !!

vraiment personne ne peut m'aider? :pt1cable:

Message édité par francescu le 01-12-2005 à 13:38:18

francescu

youpee !!

sur certaines machines il y a meme un sablier qui apparait... je comprends pas trop la

The-Shadow

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

Mon dieu, je viens de regarder le code source.
Tu utilises DreamWeaver en Wysiwig ?
Bon, déjà, y'a une erreur dans ton javascript, ensuite, il faut déclaré le CSS dans le header du site, entre <head> et </head>

francescu

youpee !!

Oki merci,
j'ai corrigé l'erreur, et j'ai mis l'appel de la feuille css la ou il faut...
L'image se charge toujours lors du survol.
il y aurait un moyen d'eviter cela?

The-Shadow

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

Chez moi c'est bon. :heink:

Mais sinon, la technique indiqué par Gatsu est intéressante dans le cas présent.
En gros tu mets tes 2 images sur une seule et même image et tu fais coulisé l'image quand on passe par dessus.
Je te fais un truc vite fait et je te montre.

The-Shadow

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

Voilà, alors, tu peux piquer le code source ici :
http://ns31789.ovh.net/mielcorse/index.html
la feuille de style se trouve ici :
http://ns31789.ovh.net/mielcorse/classe.css
et les images ici :
http://ns31789.ovh.net/mielcorse/images/

Par contre, y'a des trucs louches dans ton code.
1 - Je ne suis pas un intégriste de la non utilisation des table, mais sur un design aussi simple, tu pourrais le faire assez facilement en CSS.
2 - Tu utilises des polices "spéciales" dans tes CSS, surement très jolies, seulement voilà, comme je ne les ai pas sur mon ordi, je ne les vois pas.
3 - Analyse bien mon code source et l'image qui me sert pour le roll-over et comment j'ai pratiqué dans le css, je veux bien bosser gratos, mais il faut ABSOLUMENT que tu comprennes ce que j'ai fait, autrement, c'est faire le boulot à ta place et ça ne t'aide pas beaucoup si tu n'y comprends rien, il n'y aura pas toujours quelqu'un pour t'aider alors regarde bien tout et repose une question si tu veux un supplément d'info, il faut que tu sois capable de le refaire sans personne. Spa bien compliqué en plus.

Voilà.

Message édité par The-Shadow le 01-12-2005 à 16:36:50

francescu

youpee !!

merci bcp !!
j'ai tout decortiquer pendant deux heures, je crois avoir bien compris les option de la feuille de style...
Seulement le changement n'est pas instantané... J'ai verifier sur plusieurs machines avec des connaxions diveers, ca fait tjs cet effet de clignotement.
Si on clique sur un lien, puis precedent, il apparait alors que le changement se fait instantanement.... c'est plutot bizrarre non?

The-Shadow

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

Peut-être un problème de cache chez toi, j'ai testé sous IE et Fx, aucun soucis chez moi, peut-être une tierce personne pourra-t-elle confirmer si elle lit ?

gatsu35

Blablaté par Harko

bon
il y a aussi cette méthode là en full CSS
http://gatsu.ftp.free.fr/Modele/Ruche/page.html

tu peux récupérer le tout ici :
http://gatsu.ftp.free.fr/Modele/Ruche/

C'est en full CSS et on garde ainsi un menu convaincant et correct. tout en faisant très très peu de HTML. donc réutilisabilité sur toutes les pages simple.

bon au niveau CSS ya quelques bidouilles.

et j'ai passé le site en 760 car un site en 800px de large ne passera jamais correctement sur le navigateur d'une personne en 800x600, puisqu'il faut compter en plus la barre de scroll+ la bordure du navigateur. donc c'est mal barré.

et je n'ai aucun problème en visitant la page de TS.
Mais the-shadow a raison, tu utilises 10x trop de tableaux

Message édité par gatsu35 le 02-12-2005 à 13:30:10

xtof_83

Freeride Spirit

[HS]Prkoi avoir changé de speudo gat?[/HS]

sympas l'idée de ceci :

http://gatsu.ftp.free.fr/Modele/Ru [...] lemenu.gif

:love: :love:

Message édité par xtof_83 le 02-12-2005 à 13:33:22

gatsu35

Blablaté par Harko

tout simplement que je préfère Gatsu35 que Gatsusat,
Gatsusat était un ancien pseudo lorsque j'était spécialisé un peu dans tout ce qui touchait de près ou de lieu au Sat
mais Gatsu est mon pseudo. Gatsu35 avait été banni sur HFR, alors comme j'avais Gatsusat de coté, je l'ai repris.

Puis comme Gatsu35 a été débanni, je le réutilise pour de bon cette fois-ci

Publicité

FORUM HardWare.fr

Programmation

HTML/CSS

image survolée..bug?

Sujets relatifs
Démarrer une animation à une certaine image	creer lien hypertexte sur image en différents points
Insérer une image 2D avec OpenGL ???	Insérer image avec GLFW (OpenGL......) ????
Comment réaliser cet alignement d'image svp	Probleme d'affichage d'image - code HTML tronqué en local
Image et div ?	problème d'affichage d'image avec firefox
[HTML/Javascript] gallerie avec image survolée et affichage séparé	Image survolée qui influe sur une autre
Plus de sujets relatifs à : image survolée..bug?

Page générée en 0.057 secondes