Utilizzando i CSS è possibile visualizzare immagini anzichè il valore testuale del link. Questa soluzione, oltre essere ottima a livello di designing accessibile, risulta comoda ad esempio per la gestione di colonne con pulsanti in una GridView, perchè permette di usare colonne di default e visualizzare immagini anzichè testo.
Supponiamo di avere un GridView con una colonna di tipo asp:HyperLinkField, perchè quello che vogliamo è di fatto un link, ma anzichè testo desideriamo visualizzare un'immagine.
Potremmo usare un TemplateField con all'interno un HyperLink, ma dato che a volte siamo pigri, non abbiamo voglia di scrivere quelle righe di codice in più, dato che c'è un oggetto già pronto per le nostre esigenze.
Assumendo che il rendering del controllo HyperLinkField sarà un tag , lo stratagemma basato sui css è molto semplice:
table td.btnEdit a{ font-size: 0; line-height: 0; display: block; width: 16px; padding: 16px 0 0 0; overflow: hidden; text-decoration: none } table td.btnEdit a{ background: Transparent url(img/Edit.gif) 0 0 no-repeat; } table td.btnEdit a:hover{ background: Transparent url(img/EditOver.gif) 0 0 no-repeat; }
Basta poi specificare una classe CSS per la colonna della GridView:
<asp:HyperLinkField ItemStyle-CssClass="btnEdit" ... />
Tenete presente che le proprietà width e padding-top devono essere equivalenti a larghezza ed altezza dell'immagine.
Commenti
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.