Le tableau est un lien !

26 avr. 2005, 12:42

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 : Tout sélectionner

<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>

et le code css:

Code : Tout sélectionner

.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;
}

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

26 avr. 2005, 12:57

<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>

C'est pas top, mais c'est déjà plus HTML-valid !

26 avr. 2005, 14:26

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 : Tout sélectionner

<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 css :

Code : Tout sélectionner

.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;
}

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 ?

26 avr. 2005, 17:15

Javascript !

Le tableau est un lien !

Qui est en ligne