Probleme avec des liens images
Fermé
lilouetfredo
Messages postés
45
Date d'inscription
mardi 20 mai 2008
Statut
Membre
Dernière intervention
12 août 2019
-
Modifié par lilouetfredo le 17/06/2010 à 12:07
lilouetfredo Messages postés 45 Date d'inscription mardi 20 mai 2008 Statut Membre Dernière intervention 12 août 2019 - 17 juin 2010 à 19:15
lilouetfredo Messages postés 45 Date d'inscription mardi 20 mai 2008 Statut Membre Dernière intervention 12 août 2019 - 17 juin 2010 à 19:15
A voir également:
- Probleme avec des liens images
- Créer un lien pour partager des photos - Guide
- Des images - Guide
- Ia qui crée des images - Guide
- Sommaire word avec lien - Guide
- Dans le document à télécharger, placez les 2 images côte à côte et donnez-leur la même hauteur. marie a gagné un lot à l’un des trois tirages. qu’a-t-elle gagné ? ✓ - Forum Word
17 réponses
avion-f16
Messages postés
19249
Date d'inscription
dimanche 17 février 2008
Statut
Contributeur
Dernière intervention
15 juin 2024
4 503
17 juin 2010 à 12:19
17 juin 2010 à 12:19
L'affichage de ces pointillés est tout à fait normal.
Ils permettent principalement à se repérer lorsqu'on navigue au clavier.
Je te conseil de les laisser, mais si tu veux les masquer, il faudra utiliser « outline: none; »
Ils permettent principalement à se repérer lorsqu'on navigue au clavier.
Je te conseil de les laisser, mais si tu veux les masquer, il faudra utiliser « outline: none; »
lilouetfredo
Messages postés
45
Date d'inscription
mardi 20 mai 2008
Statut
Membre
Dernière intervention
12 août 2019
Modifié par lilouetfredo le 17/06/2010 à 13:03
Modifié par lilouetfredo le 17/06/2010 à 13:03
d'accord merci, mais a la limite oui les masquer serait bien car honnetement je ne trouve pas cela tres professionnel. je vais essayer ce que tu as mis mais je le met ou exactement? :-)
un autre point :
pour mes liens, ce sont des images, je voudrais aussi avoir des images sur les liens au passage de la souris et une autre image sur les liens cliqué, hors je n'arrive pas a les insérer, j'ai mis a:link , a:visited, a:hover et a:active. dans a:active par exemple je mets :
mais ca ne fonctionne pas. comment dois je faire pour avoir des images différentes a chaque action du bouton, s'il vous plait?
mon html :
un autre point :
pour mes liens, ce sont des images, je voudrais aussi avoir des images sur les liens au passage de la souris et une autre image sur les liens cliqué, hors je n'arrive pas a les insérer, j'ai mis a:link , a:visited, a:hover et a:active. dans a:active par exemple je mets :
element_menu:link, element_menu:visited /*lien visité - lien non visité*/
{
text-decoration: none;
}
element_menu:hover /*lien survolé*/
{
}
element_menu:active /*lien activé*/
{
background-image: url("images/ ... .png");
}
.element_menu
{
margin-left: 20px;
margin-top: 150px;
float: left;
}
mais ca ne fonctionne pas. comment dois je faire pour avoir des images différentes a chaque action du bouton, s'il vous plait?
mon html :
<div id="menu">
<!-- Ici on mettra le menu -->
<div class="element_menu">
<a href="http://... .free.fr"><img src="images/... .png" alt="bouton" /></a>
</div>
</div>
avion-f16
Messages postés
19249
Date d'inscription
dimanche 17 février 2008
Statut
Contributeur
Dernière intervention
15 juin 2024
4 503
17 juin 2010 à 13:09
17 juin 2010 à 13:09
Ce n'est pas le div qui doit changer mais le lien.
Donc c'est ".element_menu a:hover" et pas ".element_menu:hover"
Donc c'est ".element_menu a:hover" et pas ".element_menu:hover"
lilouetfredo
Messages postés
45
Date d'inscription
mardi 20 mai 2008
Statut
Membre
Dernière intervention
12 août 2019
17 juin 2010 à 13:14
17 juin 2010 à 13:14
wouaa super ^^ tout fonctionne j'ai mis outline: none; egalement et ca fonctionne c'est top !
Merci beaucoup, je n'ai plus qu'a regler la position de l'image lien survolé, car c'est en décalage. Et dire que c'etait juste une lettre, il en faut peu c'est dingue :).
Merci beaucoup avion-f16.
Merci beaucoup, je n'ai plus qu'a regler la position de l'image lien survolé, car c'est en décalage. Et dire que c'etait juste une lettre, il en faut peu c'est dingue :).
Merci beaucoup avion-f16.
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
lilouetfredo
Messages postés
45
Date d'inscription
mardi 20 mai 2008
Statut
Membre
Dernière intervention
12 août 2019
17 juin 2010 à 16:06
17 juin 2010 à 16:06
Encore un soucis avec ces boutons, voici mes boutons actuellement :
https://www.casimages.com/i/100617040036638176.png.html
ils sont donc a la vertical, mais je les voudrais a l'horizontal. Comment puis je modifier cela, s'il vous plait.
En vous remerciant par avance.
https://www.casimages.com/i/100617040036638176.png.html
ils sont donc a la vertical, mais je les voudrais a l'horizontal. Comment puis je modifier cela, s'il vous plait.
En vous remerciant par avance.
avion-f16
Messages postés
19249
Date d'inscription
dimanche 17 février 2008
Statut
Contributeur
Dernière intervention
15 juin 2024
4 503
17 juin 2010 à 16:45
17 juin 2010 à 16:45
Il faut utiliser la propriété "float".
lilouetfredo
Messages postés
45
Date d'inscription
mardi 20 mai 2008
Statut
Membre
Dernière intervention
12 août 2019
17 juin 2010 à 16:55
17 juin 2010 à 16:55
d'accord mais comment l'utiliser? surtout où la mettre?
avion-f16
Messages postés
19249
Date d'inscription
dimanche 17 février 2008
Statut
Contributeur
Dernière intervention
15 juin 2024
4 503
17 juin 2010 à 16:57
17 juin 2010 à 16:57
Sur les "li", avec "left" comme valeur.
lilouetfredo
Messages postés
45
Date d'inscription
mardi 20 mai 2008
Statut
Membre
Dernière intervention
12 août 2019
17 juin 2010 à 17:04
17 juin 2010 à 17:04
le soucis c'est que je n'ai pas de "li", mes liens sont des images :
voici mon code html :
et le CSS:
voici mon code html :
<body> <div id="en_tete"> <!-- Ici on mettra la bannière --> </div> <div id="menu"> <!-- Ici on mettra le menu --> <div class="element_menu"> <div class="element_flash"> <a href="http://... .free.fr"><img src="images/boutonflash.png" alt="bouton flash" /></a> </div> <div class="element_web"> <a href="http://... .free.fr"><img src="images/boutonweb.png" alt="bouton web" /></a> </div> <div class="element_travaux"> <a href="http://... .free.fr"><img src="images/boutontravaux.png" alt="bouton travaux" /></a> </div> <div class="element_multimedia3d"> <a href="http://... .free.fr"><img src="images/boutonmultimedia3d.png" alt="bouton multimedia3d" /></a> </div> <div class="element_refcv"> <a href="http://... .free.fr"><img src="images/boutonrefcv.png" alt="bouton refcv" /></a> </div> <div class="element_contact"> <a href="http://... .free.fr"><img src="images/boutoncontact.png" alt="bouton contact" /></a> </div> </div> </div> <div id="corps"> <!-- Ici on mettra le contenu principal de la page (tout le texte quoi) --> </div> <div id="pied_de_page"> <!-- Enfin, on mettra en bas de la page le nom de l'auteur, un copyright... --> </div> </body>
et le CSS:
body
{
width: 1000px;
height: 1000px;
margin: auto; /* Pour centrer la page */
background-color: #303030; /* Couleur de fond du site */
background-image: url("images/fond_blanc.png");
background-repeat: no-repeat;
background-position: center;
}
/* Le menu */
.element_menu
{
border: none;
margin-top: 120px;
margin-left: 30px;
}
a img
{
border: none;
}
/* Le lien bouton Flash*/
.element_flash a:link, .element_flash a:visited
{
text-decoration: none;
outline: none;
margin-left: 5px;
}
.element_flash a:hover
{
background-image: url("images/boutonweb.png");
background-repeat: no-repeat;
}
.element_flash a:active
{
}
/*Le lien bouton Web*/
.element_web a:link, .element_web a:visited
{
text-decoration: none;
outline: none;
margin-left: 5px;
}
.element_web a:hover
{
background-image: url("images/boutonweb.png");
background-repeat: no-repeat;
}
.element_web a:active
{
}
/*Le lien bouton Travaux*/
.element_travaux a:link, .element_travaux a:visited
{
text-decoration: none;
outline: none;
margin-left: 5px;
}
.element_travaux a:hover
{
background-image: url("images/boutontravaux.png");
background-repeat: no-repeat;
}
.element_travaux a:active
{
}
/*Le bouton Multimédia 3D*/
.element_multimedia3d a:link, .element_multimedia3d a:visited
{
text-decoration: none;
outline: none;
margin-left: 5px;
}
.element_multimedia3d a:hover
{
background-image: url("images/boutonmultimedia3d.png");
background-repeat: no-repeat;
}
.element_multimedia3d a:active
{
}
/*Le bouton ref cv*/
.element_refcv a:link, .element_refcv a:visited
{
text-decoration: none;
outline: none;
margin-left: 5px;
}
.element_refcv a:hover
{
background-image: url("images/boutonrefcv.png");
background-repeat: no-repeat;
}
.element_refcv a:active
{
}
/*Le bouton contact*/
.element_contact a:link, .element_contact a:visited
{
text-decoration: none;
outline: none;
margin-left: 5px;
}
.element_contact a:hover
{
background-image: url("images/boutoncontact.png");
background-repeat: no-repeat;
}
.element_contact a:active
{
}
avion-f16
Messages postés
19249
Date d'inscription
dimanche 17 février 2008
Statut
Contributeur
Dernière intervention
15 juin 2024
4 503
17 juin 2010 à 17:23
17 juin 2010 à 17:23
D'abord sur les div.
lilouetfredo
Messages postés
45
Date d'inscription
mardi 20 mai 2008
Statut
Membre
Dernière intervention
12 août 2019
17 juin 2010 à 17:36
17 juin 2010 à 17:36
excuse moi par mon ignorance mais je ne vois pas ce que tu veux me dire :s par les div. Dois je le mettre dans le html ou le CSS? j'ai essayer de le mettre dans le
mais ca me laisse toujours le menu a la vertical mais cette fois ci sur la droite.
.element_menu
{
float: right;
}
mais ca me laisse toujours le menu a la vertical mais cette fois ci sur la droite.
avion-f16
Messages postés
19249
Date d'inscription
dimanche 17 février 2008
Statut
Contributeur
Dernière intervention
15 juin 2024
4 503
Modifié par avion-f16 le 17/06/2010 à 17:39
Modifié par avion-f16 le 17/06/2010 à 17:39
.element_flash, .element_web, .element_travaux, .element_multimedia3d, .element_refcv, .element_contact {
float:left;
}
Ton ordinateur ne fait pas ce que tu veux ... mais ce que tu lui dis de faire.
lilouetfredo
Messages postés
45
Date d'inscription
mardi 20 mai 2008
Statut
Membre
Dernière intervention
12 août 2019
17 juin 2010 à 17:51
17 juin 2010 à 17:51
oki ^^ super ca fonctionne je te remercie beaucoup. Tu es vraiment tres doué :)
excuse moi vraiment pour t'avoir dérangé autant de fois :p .
excuse moi vraiment pour t'avoir dérangé autant de fois :p .
avion-f16
Messages postés
19249
Date d'inscription
dimanche 17 février 2008
Statut
Contributeur
Dernière intervention
15 juin 2024
4 503
17 juin 2010 à 17:55
17 juin 2010 à 17:55
De rien, et tu ne déranges pas.
lilouetfredo
Messages postés
45
Date d'inscription
mardi 20 mai 2008
Statut
Membre
Dernière intervention
12 août 2019
Modifié par lilouetfredo le 17/06/2010 à 19:03
Modifié par lilouetfredo le 17/06/2010 à 19:03
une derniere petite question si c'est possible :p
pour remplacer mon image lien par une autre image lien au survol de la souris, comment dois je faire? j'ai lu qu'il fallait utiliser z-index:
ou peut etre onmouseover
je souhaiterais plutot que ca se fasse dans le CSS plutot que de surcharger le html :)
le soucis actuel c'est que mon image de survol se trouve en dessous de l'image fixe et décalé :s
merci d'avance :)
pour remplacer mon image lien par une autre image lien au survol de la souris, comment dois je faire? j'ai lu qu'il fallait utiliser z-index:
ou peut etre onmouseover
je souhaiterais plutot que ca se fasse dans le CSS plutot que de surcharger le html :)
le soucis actuel c'est que mon image de survol se trouve en dessous de l'image fixe et décalé :s
merci d'avance :)
avion-f16
Messages postés
19249
Date d'inscription
dimanche 17 février 2008
Statut
Contributeur
Dernière intervention
15 juin 2024
4 503
17 juin 2010 à 19:06
17 juin 2010 à 19:06
Avec la balise <img />, il faudra utiliser onmouseover et onmouseout.
Tes boutons ressemblent à du texte au-dessus d'un fond simple, pourquoi ne pas se passer des images ? Tu pourrais facilement changer la couleur de fond et celle du texte en CSS.
Tes boutons ressemblent à du texte au-dessus d'un fond simple, pourquoi ne pas se passer des images ? Tu pourrais facilement changer la couleur de fond et celle du texte en CSS.
lilouetfredo
Messages postés
45
Date d'inscription
mardi 20 mai 2008
Statut
Membre
Dernière intervention
12 août 2019
Modifié par lilouetfredo le 17/06/2010 à 19:20
Modifié par lilouetfredo le 17/06/2010 à 19:20
j'ai trouver sur le net la façon "barbare" (surcharger le HTML) avec cette façon :
<img src="image1.png" name="image" onmouseover="image.src='image2.png'" onmouseout="image.src='image1.png'" onmousedown="image.src='image3.png'" />
image1 : normale
image2 : sulvolée
image3 : enfoncée
en fait ca donne ca
ca fonctionne en tout cas, mais j'aurais préféré mettre ca dans le CSS.
l'image première est simple en effet, mais la deuxième (au survol souris) commence a devenir un peu plus détaillé et pareil pour l'image cliqué.
le soucis c'est que si j'enlève l'image simple et la remplacer par un fond derrière un lien, je risque de ne pas retrouver les même position avec la deuxième image qui sera plus compliqué et ou là, il est obligé d'avoir une image. Je sais pas si tu vois ce que je veux dire :)
<img src="image1.png" name="image" onmouseover="image.src='image2.png'" onmouseout="image.src='image1.png'" onmousedown="image.src='image3.png'" />
image1 : normale
image2 : sulvolée
image3 : enfoncée
en fait ca donne ca
<div class="element_flash"> <a href="http://blabla.free.fr"><img src="images/boutonflash.png" alt="bouton flash" onmouseover="src='images/boutonflashsurvol.png'" onmouseout="src='images/boutonflash.png'" onmousedown="src='images/boutonflashappuis.png' /></a> </div>
ca fonctionne en tout cas, mais j'aurais préféré mettre ca dans le CSS.
l'image première est simple en effet, mais la deuxième (au survol souris) commence a devenir un peu plus détaillé et pareil pour l'image cliqué.
le soucis c'est que si j'enlève l'image simple et la remplacer par un fond derrière un lien, je risque de ne pas retrouver les même position avec la deuxième image qui sera plus compliqué et ou là, il est obligé d'avoir une image. Je sais pas si tu vois ce que je veux dire :)
