<img et background color

<img et background color - HTML/CSS - Programmation

Marsh Posté le 10-07-2006 à 11:39:14    

slt tlm, voila j'ai defini un style css pour mes liens dans lequel je defini un background color lorsqu'on passe sur les liens.
Probleme, quand je passe sur mes image qui ont un lien elle sont entouré avec le background color. j'ai bien essayé un border=0 mais ca ne change rien... comment virer cette couleur ?


---------------
In a world without walls and fences, who needs Windows and Gates
Reply

Marsh Posté le 10-07-2006 à 11:39:14   

Reply

Marsh Posté le 10-07-2006 à 11:57:52    

a img { border:01; } ?

Message cité 1 fois

---------------
♈ ♋ ♌ ♍ ♎ ♏ - Agora Fidelio | Galerie d'art Toulousaine
Reply

Marsh Posté le 10-07-2006 à 12:15:39    

j_lecruel a écrit :

a img { border:01; } ?


marche pas  :cry:


---------------
In a world without walls and fences, who needs Windows and Gates
Reply

Marsh Posté le 10-07-2006 à 12:27:54    

mon css ressemble a ca :  

a:link {color: #17179d; text-decoration:none;}
 a:visited {color: #17179d; text-decoration:none;}
 
 a:hover {background-color: #daeaff; color:#17179d text-decoration:none;}


si j'enleve le background-color: #daeaff; les image n'ont plus de probleme mais je perds la couleur sur les liens.
comment la garder sans devoir modifier les lien un a un et sans que les images soit affecté


---------------
In a world without walls and fences, who needs Windows and Gates
Reply

Marsh Posté le 10-07-2006 à 12:35:10    

avec quel navigateur ?
moi j'ai ça et ça marche bien sous IE 7 béta 2 (du coup je sais pas ce que ça donne avec le 6...)
 

Code :
  1. <html>
  2. <head>
  3.  <title>Test liens</title>
  4.  <style type="text/css">
  5.   img
  6.   {
  7.    border: none;
  8.   }
  10.   a:hover
  11.   {
  12.    background-color : red;
  13.   }
  14.  </style>
  15. </head>
  16. <body>
  17.  <a href="#">toto</a><br/><br/>
  18.  <a href="#"><img src="toto.jpg"/></a>
  19. </body>
  20. </html>

Message cité 1 fois
Reply

Marsh Posté le 10-07-2006 à 13:40:11    

Arjuna a écrit :

avec quel navigateur ?
moi j'ai ça et ça marche bien sous IE 7 béta 2 (du coup je sais pas ce que ça donne avec le 6...)
 

Code :
  1. <html>
  2. <head>
  3.  <title>Test liens</title>
  4.  <style type="text/css">
  5.   img
  6.   {
  7.    border: none;
  8.   }
  10.   a:hover
  11.   {
  12.    background-color : red;
  13.   }
  14.  </style>
  15. </head>
  16. <body>
  17.  <a href="#">toto</a><br/><br/>
  18.  <a href="#"><img src="toto.jpg"/></a>
  19. </body>
  20. </html>



bas j'ai fait un copié collé de ton code : ni IE 6 ni FF 1.5 ne comprennent j'ai tjs un contour coloré quand je passe la souris dessus


---------------
In a world without walls and fences, who needs Windows and Gates
Reply

Marsh Posté le 10-07-2006 à 13:45:40    

Code :
  1. a:hover img
  2.                 {
  3.                     background-color : none;
  4.                 }

Message cité 1 fois

---------------
my flick r - Just Tab it !
Reply

Marsh Posté le 10-07-2006 à 13:53:08    

zapan666 a écrit :

Code :
  1. a:hover img
  2.                 {
  3.                     background-color : none;
  4.                 }



marche pas non plus ....


---------------
In a world without walls and fences, who needs Windows and Gates
Reply

Marsh Posté le 10-07-2006 à 13:56:50    

moi je vote un padding dans le a ou un margin sur les images défini ailleurs , au choix !

Reply

Marsh Posté le 10-07-2006 à 14:40:43    

moi je vote, et c'est pas possible que mon code tel quel ne marche pas (sans rien de plus).
 
ou alors les images sont des gifs dont les bords sont transparents, c'est pas possible autrement (je vois ça gros comme une maison)
 
tu peux nous poster une de tes images en question ?

Message cité 1 fois
Message édité par Arjuna le 10-07-2006 à 14:41:20
Reply

Marsh Posté le 10-07-2006 à 14:40:43   

Reply

Marsh Posté le 10-07-2006 à 14:54:47    

Arjuna a écrit :

moi je vote, et c'est pas possible que mon code tel quel ne marche pas (sans rien de plus).
 
ou alors les images sont des gifs dont les bords sont transparents, c'est pas possible autrement (je vois ça gros comme une maison)
 
tu peux nous poster une de tes images en question ?


oui c'est bien une gif avec des bord transparent.......
ca pose tant probleme que ca ?

Message cité 1 fois

---------------
In a world without walls and fences, who needs Windows and Gates
Reply

Marsh Posté le 10-07-2006 à 15:08:46    

carot0 a écrit :

oui c'est bien une gif avec des bord transparent.......
ca pose tant probleme que ca ?


j'hésite entre hurler de rire et pleurer ...[:mlc][:mlc]
3 kudos pour Arjuna en tout cas :o
A ton avis si c'est transparent, c'est surprenant qu'on voit ce qu'il y a en dessous???

Message cité 1 fois
Reply

Marsh Posté le 10-07-2006 à 15:15:16    

anapajari a écrit :

j'hésite entre hurler de rire et pleurer ...[:mlc][:mlc]
3 kudos pour Arjuna en tout cas :o
A ton avis si c'est transparent, c'est surprenant qu'on voit ce qu'il y a en dessous???


bas non, mais justement je ne veux pas qu'on vois le changement de couleur dû au lien.
le transparent c'est pour voir le fond !


---------------
In a world without walls and fences, who needs Windows and Gates
Reply

Marsh Posté le 10-07-2006 à 15:26:41    

Code :
  1. a:hover img { background-color: white}


 
en fait "none" ça marche pas :D

Reply

Marsh Posté le 10-07-2006 à 15:28:26    

ps:mais white c'est pas heureux. si t'as une image en fond, ben... lâche l'affaire :D

Message cité 1 fois
Reply

Marsh Posté le 10-07-2006 à 15:32:52    

a:hover img { background-color: whitetransparent ;}  
 
(dans un souci de rigueur on n oublie pas le point-virgule final :o )

Message cité 2 fois
Reply

Marsh Posté le 10-07-2006 à 15:34:17    

Arjuna a écrit :

ps:mais white c'est pas heureux. si t'as une image en fond, ben... lâche l'affaire :D


c'est pas possible alors ?

Message cité 1 fois

---------------
In a world without walls and fences, who needs Windows and Gates
Reply

Marsh Posté le 10-07-2006 à 15:37:48    

mIRROR a écrit :

a:hover img { background-color: whitetransparent ;}  
 
(dans un souci de rigueur on n oublie pas le point-virgule final :o )


sauf que j'ai testé et ça marche pas.

Reply

Marsh Posté le 10-07-2006 à 15:38:19    

carot0 a écrit :

c'est pas possible alors ?


j'ai bien peut que non, ou alors ça va être chaud

Message cité 1 fois
Reply

Marsh Posté le 10-07-2006 à 15:39:27    

le mieux étant donc de faire comme avec l'ancienne méthode : un js qui s'occupe des rollover, au lieu d'utiliser le :hover du css
 
avec le js, tu peux checker dans le innerHTML l'existence d'un <img/> dans ton <a></a> et donc faire des traîtements différents

Reply

Marsh Posté le 10-07-2006 à 15:40:37    

mIRROR a écrit :

a:hover img { background-color: whitetransparent ;}  
 
(dans un souci de rigueur on n oublie pas le point-virgule final :o )


 

Arjuna a écrit :

j'ai bien peut que non, ou alors ça va être chaud


normal, mon exemple est faux : ca enelve le background de l'image mais pas du liens...
Mets une classe sur le lien contenant l'image, et sur ce lien, met un background transparent

Message cité 1 fois

---------------
my flick r - Just Tab it !
Reply

Marsh Posté le 10-07-2006 à 15:45:50    

zapan666 a écrit :

normal, mon exemple est faux : ca enelve le background de l'image mais pas du liens...
Mets une classe sur le lien contenant l'image, et sur ce lien, met un background transparent


tu peux detailler evec un exemple stp
car moi le css


---------------
In a world without walls and fences, who needs Windows and Gates
Reply

Marsh Posté le 10-07-2006 à 15:46:34    

Et voilà le travail :
 

Code :
  1. <html>
  2. <head>
  3.  <title>Test liens</title>
  4.  <style type="text/css">
  5.   img
  6.   {
  7.    border: none;
  8.   }
  9.  </style>
  11.  <script type="text/javascript">
  13.   function prepare()
  14.   {
  15.    for (var i = 0; i < document.links.length; i++)
  16.    {
  17.     if (document.links[i].getElementsByTagName("img" ).length == 0)
  18.     {
  19.      document.links[i].onmouseover = RollOn;
  20.      document.links[i].onmouseout = RollOff;
  21.     }
  22.    }
  23.   }
  25.   function RollOn()
  26.   {
  27.    this.oldBg = this.style.backgroundColor;
  28.    this.style.backgroundColor = "red";
  29.   }
  31.   function RollOff()
  32.   {
  33.    this.style.backgroundColor = this.oldBg;
  34.   }
  36.   window.onload = prepare;
  37.  </script>
  38. </head>
  39. <body>
  40.  <a href="#">toto</a>
  41.  <br/>
  42.  <br/>
  43.  <a href="#"><img src="toto.jpg"/></a>
  44. </body>
  45. </html>

Reply

Marsh Posté le 10-07-2006 à 15:47:46    

Sinon, en effet, tu donnes une classe particulière à tous tes liens qui doivent changer de couleur, mais c'est un peu relou... Perso je préfère ma solution, même si elle est plus "crade", elle est générique (pas besoin de se prendre la tête à chaque modification de page)

Message cité 1 fois
Reply

Marsh Posté le 10-07-2006 à 15:51:16    

euh c'est pas faire un peu complique de mettre du JS pour juste ca ?
 
CSS

Code :
  1. a {
  2. background-color : red;
  3. }
  5. a.img {
  6. background-color : transparent;
  7. }


 
HTML

Code :
  1. <a href='...'>blabla</a>
  2. <a href='...' class='img'><img src='...'/></a>


Arjuna a écrit :

Sinon, en effet, tu donnes une classe particulière à tous tes liens qui doivent changer de couleur, mais c'est un peu relou... Perso je préfère ma solution, même si elle est plus "crade", elle est générique (pas besoin de se prendre la tête à chaque modification de page)


Tu deporte le probleme : si tu as envie de changer ton CSS, il faut changer ton CSS + ton JS...

Message cité 1 fois
Message édité par zapan666 le 10-07-2006 à 15:53:24

---------------
my flick r - Just Tab it !
Reply

Marsh Posté le 10-07-2006 à 15:53:33    

on peut meme eviter une balise <a>
 
<a href=#><img /><span>mon lien</span></a>

Message cité 1 fois
Reply

Marsh Posté le 10-07-2006 à 16:01:42    

j'ai essayé les 2 et ca marche pas ni l'un ni l'autre ...

Message cité 1 fois

---------------
In a world without walls and fences, who needs Windows and Gates
Reply

Marsh Posté le 10-07-2006 à 16:03:03    

zapan666 a écrit :

Tu deporte le probleme : si tu as envie de changer ton CSS, il faut changer ton CSS + ton JS...


Bah nan, tu peux tout à fait appeler une class CSS depuis le JS. Là je force le background à une couleur, mais je pourrai tout à faire changer le className ;)
 
Sinon, ta solution ne résoud rien :
 

Code :
  1. a:hover
  2. {
  3.     background-color: red;
  4. }


 
Du coup, faut :
 

Code :
  1. <a href="#" class="changeLink">toto</a>
  2. <a href="#"><img/></a>


 
et ça en css :
 

Code :
  1. a.changeLink:hover
  2. {
  3.     background-color: red;
  4. }


 
Mais du coup, faut bien penser à mettre la bonne classe sur chaque lien, ce qui rend la maintenance un peu plus chiante.

Message cité 1 fois
Reply

Marsh Posté le 10-07-2006 à 16:03:30    

carot0 a écrit :

j'ai essayé les 2 et ca marche pas ni l'un ni l'autre ...


mon truc marche pas ? :o
 
menteur :o

Message cité 1 fois
Reply

Marsh Posté le 10-07-2006 à 16:06:00    

Arjuna a écrit :

mon truc marche pas ? :o
 
menteur :o


nan c'est vrais ca marche po!!! :o  
j'ai meme des temoins !  :pt1cable:


---------------
In a world without walls and fences, who needs Windows and Gates
Reply

Marsh Posté le 10-07-2006 à 16:07:45    

c pas vrai moi ça marche chez moi, sous ie et moz :o

Reply

Marsh Posté le 10-07-2006 à 16:15:29    

allez montre nous ton code pour les 2 solutions ...

Spoiler :

qu'on rigole :o


Message édité par anapajari le 10-07-2006 à 16:16:01
Reply

Marsh Posté le 10-07-2006 à 16:17:30    

Arjuna a écrit :


Du coup, faut :
 

Code :
  1. <a href="#" class="changeLink">toto</a>
  2. <a href="#"><img/></a>



 
j ai encore parlé tout seul  [:barthaliastoxik]  
 

mIRROR a écrit :

on peut meme eviter une balise <a>
 
<a href=#><img /><span>mon lien</span></a>


 

Message cité 1 fois
Reply

Marsh Posté le 10-07-2006 à 16:17:33    

svp j'ai vraiment besoin d'un truc qui marche car la j'ai ma chef qui arrete pas de puis 2-3h... je vais craquer....
( en plus elle est aussi mignone que chiante ...)

Message cité 1 fois

---------------
In a world without walls and fences, who needs Windows and Gates
Reply

Marsh Posté le 10-07-2006 à 16:25:57    

mIRROR a écrit :

j ai encore parlé tout seul  [:barthaliastoxik]


j'ai pas dit que ton truc marchait pas :p juste qu'entre rajouter un nom de class partout, ou des span partout, je préfère encore ajouter des noms de class ;)

Reply

Marsh Posté le 10-07-2006 à 16:27:04    

carot0 a écrit :

svp j'ai vraiment besoin d'un truc qui marche car la j'ai ma chef qui arrete pas de puis 2-3h... je vais craquer....
( en plus elle est aussi mignone que chiante ...)


prends on code de là-haut (avec le JS)
tu enregistres tel quel dans un fichier, et dis-nous ce que tu vois.
 
moi j'ai testé sous ff et ie, ça marche dans les deux cas, donc si ça marche pas chez toi, c'est pas normal.

Message cité 1 fois
Reply

Marsh Posté le 10-07-2006 à 16:27:36    

ps: tu nous la présente ? (si ça se trouve quand ça marche, elle est aussi reconnaissante que mignone aussi :love:)

Reply

Marsh Posté le 10-07-2006 à 16:30:32    

Arjuna a écrit :

prends on code de là-haut (avec le JS)
tu enregistres tel quel dans un fichier, et dis-nous ce que tu vois.
 
moi j'ai testé sous ff et ie, ça marche dans les deux cas, donc si ça marche pas chez toi, c'est pas normal.


tu as changé un truc a ce code ?? car la ca semble marcher ...

Message cité 1 fois

---------------
In a world without walls and fences, who needs Windows and Gates
Reply

Marsh Posté le 10-07-2006 à 16:44:29    

carot0 a écrit :

tu as changé un truc a ce code ?? car la ca semble marcher ...


bon bas ca amrche merci !!
ma chef est contente ( mais elle me facilite tjs le transite intestinal )


Message édité par carot0 le 10-07-2006 à 16:44:57

---------------
In a world without walls and fences, who needs Windows and Gates
Reply

Marsh Posté le 10-07-2006 à 17:08:22    

si non je rencontre encore un légé probleme : dans un de mes liens text j'ai un onmouseover et du coup il ne marche plus avec la fct JS. c'est possible d'avoir les 2 ou je doit choisir ?


---------------
In a world without walls and fences, who needs Windows and Gates
Reply

Marsh Posté le    

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed