Javascript !

Oui j'y ai pensé.
Mais le prob ici c'est que le lien c'est uniquement le texte et pas l'image.

Finalement j'ai changé, ce sont les lien qui prennent une classe css.

code html
[code]
<table cellspacing="0" cellpadding="0">
<tr>
<td>
<a href="?page=album" class="lienbouttong">&nbsp;</a>
</td>
<td>
<a href="?page=album" class="lienbouttonr">A</a>
</td>
<td>
<a href="?page=album" class="lienbouttonc">lbum</a>
</td>
<td>
<a href="?page=album" class="lienbouttond">&nbsp;</a>
</td>
</tr>
</table>
[/code]

code css :
[code]
.lienbouttonr{
background: url(image/bouttonr.jpg);
background-repeat: no-repeat;
width:36px;
height:48px;
text-align:center;
font-size: 32px;
color: #000000;
}
.lienbouttonc{
background: url(image/bouttonc.jpg);
background-repeat: repeat;
width:68px;
height:48px;
font-size: 25px;
vertical-align:center;
color: #000000;
}
.lienbouttong{
background: url(image/bouttong.jpg);
background-repeat: no-repeat;
background-position: right;
width:3px;
height:48px;
}
.lienbouttond{
background: url(image/bouttond.jpg);
background-repeat: no-repeat;
width:3px;
height:48px;
}
.lienbouttonr:hover{
background: url(image/bouttonr.jpg);
background-repeat: no-repeat;
width:36px;
height:48px;
text-align:center;
font-size: 32px;
text-decoration: none;
color: #ffffff;
}
.lienbouttonc:hover{
background: url(image/bouttonc.jpg);
background-repeat: repeat;
width:68px;
height:48px;
font-size: 25px;
text-decoration: none;
color: #ffffff;
}
.lienbouttong:hover{
background: url(image/bouttong.jpg);
background-repeat: no-repeat;
background-position: right;
width:3px;
height:48px;
text-decoration: none;
}
.lienbouttond:hover{
background: url(image/bouttond.jpg);
background-repeat: no-repeat;
width:3px;
height:48px;
text-decoration: none;
}
[/code]


Etrangement j'ai était obligé de préciser l'alignment de l'image bouttong et le mettre à droit afin qu'il colle au reste de l'image sinon il y avait un espace de quelque pixel. J'ai pas eut le problème du coté droit.

Par contre comment faire un rollver qui modifie toutes l'image. C'est à dire que si je passe au dessus du A le rollover cela déclanche le code css du A mais aussi des autres éléments ?

<table cellspacing="0" cellpadding="0">
<tr><td class="bouttong"><a href="?page=album">&nbsp;</a></td>
    <td class="bouttonr"><a href="?page=album">A</a></td>
    <td class="bouttonc"><a href="?page=album">lbum</a></td>
    <td class="bouttond"><a href="?page=album">&nbsp;</a></td></tr>
</table>

[php]<table cellspacing="0" cellpadding="0">
<tr><td class="bouttong"><a href="?page=album">&nbsp;</a></td>
<td class="bouttonr"><a href="?page=album">A</a></td>
<td class="bouttonc"><a href="?page=album">lbum</a></td>
<td class="bouttond"><a href="?page=album">&nbsp;</a></td></tr>
</table>[/php]C'est pas top, mais c'est déjà plus HTML-valid ! ;)

Bonjour,

J'ai une image que je génère à l'aide de CSS. Et j'aimerais que cette image soit un lien.

Mon image est composée 4 éléments :
-le bord gauche
-un cercle contenant une majuscule
-le centre répété plusieurs fois
-le bord droit

voici le code html:
[code]<a href="?page=album">
<table cellspacing="0" cellpadding="0">
<tr>
<td class="bouttong"></td>
<td class="bouttonr">A</td>
<td class="bouttonc">lbum</td>
<td class="bouttond"></td>
</tr></table>
</a>
[/code]

et le code css:
[code]
.bouttond{
background: url(image/bouttond.jpg);
background-repeat: no-repeat;
width:3px;
height:48px;
}
.bouttong{
background: url(image/bouttong.jpg);
background-repeat: no-repeat;
width:3px;
height:48px;
}
.bouttonr{
background: url(image/bouttonr.jpg);
background-repeat: no-repeat;
width:36px;
height:48px;
text-align:center;
font-size: 32px;
}
.bouttonc{
background: url(image/bouttonc.jpg);
background-repeat: repeat;
width:68px;
height:48px;
font-size: 25px;
}
[/code]

Comment faire pour que si je clique sur l'un des 4 élément de mon image le lien se déclenche ?