<img et background color

Recherche :

Mot : Pseudo : Filtrer
Page : 1 2 Page Suivante Page Précédente Bas de page
Auteur	Sujet : <img et background color

carot0

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

Publicité

j_lecruel

☀ ☁ ☂

a img { border:01; } ?

Message cité 1 fois

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

carot0

j_lecruel a écrit :

a img { border:01; } ?

marche pas :cry:

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

carot0

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

Arjuna

Aircraft Ident.: F-MBSD

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 :

<html>
<head>
<title>Test liens</title>
<style type="text/css">
img
{
border: none;
}
a:hover
{
background-color : red;
}
</style>
</head>
<body>
<a href="#">toto</a><br/><br/>
<a href="#"><img src="toto.jpg"/></a>
</body>
</html>

Message cité 1 fois

carot0

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 :

<html>
<head>
<title>Test liens</title>
<style type="text/css">
img
{
border: none;
}
a:hover
{
background-color : red;
}
</style>
</head>
<body>
<a href="#">toto</a><br/><br/>
<a href="#"><img src="toto.jpg"/></a>
</body>
</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

zapan666

Tout est relatif

Code :

a:hover img
{
background-color : none;
}

Message cité 1 fois

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

carot0

zapan666 a écrit :

Code :

a:hover img
{
background-color : none;
}

marche pas non plus ....

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

anapajari

s/travail/glanding on hfr/gs;

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

Arjuna

Aircraft Ident.: F-MBSD

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

Publicité

carot0

Arjuna a écrit :

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

anapajari

s/travail/glanding on hfr/gs;

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
A ton avis si c'est transparent, c'est surprenant qu'on voit ce qu'il y a en dessous???

Message cité 1 fois

carot0

anapajari a écrit :

j'hésite entre hurler de rire et pleurer ... [:mlc] [:mlc]
3 kudos pour Arjuna en tout cas
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

Arjuna

Aircraft Ident.: F-MBSD

Code :

a:hover img { background-color: white}

en fait "none" ça marche pas

Arjuna

Aircraft Ident.: F-MBSD

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

Message cité 1 fois

mIRROR

Chevreuillobolchévik

a:hover img { background-color: ~~white~~transparent ;}

(dans un souci de rigueur on n oublie pas le point-virgule final )

Message cité 2 fois

carot0

Arjuna a écrit :

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

c'est pas possible alors ?

Message cité 1 fois

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

Arjuna

Aircraft Ident.: F-MBSD

mIRROR a écrit :

a:hover img { background-color: ~~white~~transparent ;}

(dans un souci de rigueur on n oublie pas le point-virgule final )

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

Arjuna

Aircraft Ident.: F-MBSD

carot0 a écrit :

c'est pas possible alors ?

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

Message cité 1 fois

Arjuna

Aircraft Ident.: F-MBSD

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

zapan666

Tout est relatif

mIRROR a écrit :

a:hover img { background-color: ~~white~~transparent ;}

(dans un souci de rigueur on n oublie pas le point-virgule final )

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 !

carot0

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

Arjuna

Aircraft Ident.: F-MBSD

Et voilà le travail :

Code :

<html>
<head>
<title>Test liens</title>
<style type="text/css">
img
{
border: none;
}
</style>
<script type="text/javascript">
function prepare()
{
for (var i = 0; i < document.links.length; i++)
{
if (document.links[i].getElementsByTagName("img" ).length == 0)
{
document.links[i].onmouseover = RollOn;
document.links[i].onmouseout = RollOff;
}
}
}
function RollOn()
{
this.oldBg = this.style.backgroundColor;
this.style.backgroundColor = "red";
}
function RollOff()
{
this.style.backgroundColor = this.oldBg;
}
window.onload = prepare;
</script>
</head>
<body>
<a href="#">toto</a>
<br/>
<br/>
<a href="#"><img src="toto.jpg"/></a>
</body>
</html>

Arjuna

Aircraft Ident.: F-MBSD

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

zapan666

Tout est relatif

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

CSS

Code :

a {
background-color : red;
}
a.img {
background-color : transparent;
}

HTML

Code :

<a href='...'>blabla</a>
<a href='...' class='img'><img src='...'/></a>

Arjuna a écrit :

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 !

mIRROR

Chevreuillobolchévik

on peut meme eviter une balise <a>

<a href=#><img /><span>mon lien</span></a>

Message cité 1 fois

carot0

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

Arjuna

Aircraft Ident.: F-MBSD

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 :

a:hover
{
background-color: red;
}

Du coup, faut :

Code :

<a href="#" class="changeLink">toto</a>
<a href="#"><img/></a>

et ça en css :

Code :

a.changeLink:hover
{
background-color: red;
}

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

Arjuna

Aircraft Ident.: F-MBSD

carot0 a écrit :

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

mon truc marche pas ?

menteur

Message cité 1 fois

carot0

Arjuna a écrit :

mon truc marche pas ?

menteur

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

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

Arjuna

Aircraft Ident.: F-MBSD

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

anapajari

s/travail/glanding on hfr/gs;

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

Spoiler :

qu'on rigole

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

mIRROR

Chevreuillobolchévik

Arjuna a écrit :

Du coup, faut :

Code :

<a href="#" class="changeLink">toto</a>
<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

carot0

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

Arjuna

Aircraft Ident.: F-MBSD

mIRROR a écrit :

j ai encore parlé tout seul [:barthaliastoxik]

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

Arjuna

Aircraft Ident.: F-MBSD

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

Arjuna

Aircraft Ident.: F-MBSD

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

carot0

Arjuna a écrit :

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

carot0

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

carot0

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

Publicité

Page : 1 2

Page Suivante

Page Précédente

Haut de page

FORUM HardWare.fr

Programmation

HTML/CSS

<img et background color

Sujets relatifs
PB Background JFrame netbeans Matisse	Cellule d'un tableau avec image étirable en background ?
background de tableau	Comment etendre le background d'un <div> jusqu'au footer de ma page ?
Background pour dt	[CSS] Répétition de background
[Resolu] Probleme avec une CSS de Background sous Firefox	[CSS] padding & background de TD
[CSS] Problème de background-color	[HTML, JS] Bug IE6 et background-color en CSS ?
Plus de sujets relatifs à : <img et background color

Page générée en 0.119 secondes