Scriam acum ceva vreme despre posibilitatea de a crea butoane bogate grafic dar editabile ca text.
Prima problema cu abordarea respectiva era una de optimizare: pentru acelasi buton trebuiau folosite 2 imagini, deci 2 requesturi diferite pe server. In timp, si pe un server mai aglomerat, orice problema de genul asta incepe sa se faca simtita si sa se ceara optimizata.
A doua problema: pe langa asta, m-am mai lovit de o problema: lipsa unui efect la roll-over.
Treaba asta m-a facut sa re-gandesc un pic abordarea intregii chestii, in felul urmator:
1. Inainte foloseam 2 tag-uri, unul in altul, sub forma:
A) <li> <a>buton aici</a> </li>
Noua abordare foloseste tot 2 tag-uri, doar ca de data asta un pic diferit:
B) <a>buton aici<div class=end></div></a>
Noul DIV, marcat cu clasa “end”, are rolul de a defini, grafic, partea din dreapta a butonului. O sa introduc aici o schema explicativa, dupa care o sa continui cu explicatiile mai jos:
Dupa cum se vede in imaginea de mai sus, in loc sa folosim mai multe imagini, vom folosi o singura imagine, suficient de lunga incat sa acopere orice scenariu* si avand inaltimea dubla: un rand pentru starea normala si unul pentru starea de “over”.
