Visual PHP™ - Visual web development environment for PHP - Other - Nápady na vylepšení

Obsah fora > Other > Nápady na vylepšení > Načítání obrázkových tlačítek

Načítání obrázkových tlačítek

od Alois Trojan (july 8, 2009 5:12:57 PM)

Přesto, že je v body tagu aplikovaná js událost

onload="onLoad();

obrázková tlačítka při první hover události před nakešováním stránky probliknou, tedy tlačítko visitorovi na okamžik zmizí. Když promažu paměť, problém se opakuje. To je ale známí věc.

Proto se zeptám, možnost záměny obr. při hover události, ať u pro submity nebo navigační menu, pozicováním "dvouobrázků" by asi byla náročným zásahem do skriptu komponenty (?)

od: Alois Trojan (Enterprise)

Načítání obrázkových tlačítek

od Master Developer (july 15, 2009 4:20:30 PM)

JavaScript událost volaná v onload nemá s preloadováním obrázků nic společného.

Komponenta Menu má v sobě již naimplementovaný preloader, tedy tam není nutné načítání obrázků řešit. Pro ostatní HTML prvky jako např. buttony je potřeba stylovat právě pomocí dvouobrázku.

Příklad:

<input type="submit" class="my_submit" />

CSS:

.my_submit {
    background-image: url(/repository/layout/my_submit.png);
    background-position: top left;
}

.my_submit:hover {
    background-position: bottom left;
}

Jak vypadá takový dvouobrázek je ukázáno v příloze

Přílohy:

Obrázek pro tlačítko

od: Master Developer (Technická podpora)

Načítání obrázkových tlačítek

od Josef Prokop (november 7, 2011 3:54:00 PM)

Dobrý den, při normálním odkaze s tímto použití image nemám problémy. Chtěl jsem to aplikovat na tlačítko, ale u type="image" když nevyplním obrázek tak se mi přes tlačítko brané z css napíše odeslat dotaz. U type="submit" se mi pod obr. ukáže nějaké nevzhledné standardní tlačidlo.

Nevíte jak na to? JP

od: Josef Prokop (Enterprise)

Načítání obrázkových tlačítek

od Josef Prokop (november 7, 2011 5:46:46 PM)

Ahoj/Dobrý den, tak už to mám. Poradil mi Alois ;-)

Zde uvádím css pro ty, kteří by případně tápali jako já :-)

.odeslat_index {
    display: block;
    width: 48px;
    height: 35px;
    border: none;
    background-color: #FAC728;
    background-image: url("/repository/layout/tlacitko-novinky-index.png");
    background-position: top left;
}

.odeslat_index:hover {
    cursor: hand;
    cursor: pointer;
    background-position: bottom left;
}

od: Josef Prokop (Enterprise)

Pages: 1

* Tato technická podpora není jen otázkou klienta a odpovědí tvůrce software. Slouží i jako fórum mezi Vámi, našimi klienty samotnými. Nebojte se reagovat na příspěvek, když znáte odpovědi. Vyměňujte si zkušenosti s produktem Visual PHP™. Systém Visual PHP™ je jedinečný a lze v něm provádět jednu operaci více způsoby. Pochlubte se ostatním, pokud naleznete nový a jednodušší způsob, jak určitou součást řešit. Pomáháte tím sami sobě a zároveň se spolupodílíte na rozvoji celého systému.