Hyperlink z Image [ASP.NET]

Witam,

mam taki problem, bo chciałbym zrobić linka składającego się z ikony oraz tekstu. Zrobiłem coś w tym stylu:

Chciałbym także, aby po najechaniu na link normalnie się podkreślał. Niestety, albo mogę w ogóle wyłączyć opcję Font Underline w Hyperlinku albo podkreśla mi Labela razem z Image… a powinno docelowo samego Labela. Może ktoś mi z tym pomóc? Szukałem rozwiązania i póki co nie znalazłem…

Pozdrawiam!

Osobiście nie spotkałem się z tym, żeby ktoś robił takie linki w HTML-u. No albo robisz link, który działa poprzez kliknięcie obrazka, albo robisz link, który działa poprzez kliknięcie tekstu. Jak chcesz mieć mix z tych dwóch to zrób obrazek zawierający ten tekst. Poza tym HyperLink można użyć w ten sposób:

jakis tekst

Niestety takie podejście zostało mi narzucone odgórnie.

Próbowałem robić tak jak pisałeś z czyli mniej więcej tak:

gdzie url i imageUrl Hyperlinka oraz text Labela uzupełniam w kodzie .cs, ale niestety teraz w ogóle nie widzę tekstu w Label. Dlaczego? :frowning:

Dlatego, że ten tekst, który wstawiasz do label-a, w kodzie HTML będzie przypisany do atrybutu alt w tag-u img (I to jest jak najbardziej pożądane działanie). Trochę źle do tego problemu podchodzisz. Najpierw zastanów się jakby to miało wyglądać w kodzie HTML. Ty potrzebujesz zrobić coś takiego:

jakistekst[/code]




czyli w kodzie ASP .NET to będzie

[code]jakis tekst jakis tekst

I teraz będziesz musiał użyć CSS-ów, żeby dodać odpowiednie podkreślenia, usunąć bordery itd.

I właśnie napisałeś tę wersję, którą miałem na samym początku, a która nie została zaakceptowana. Dzięki za pomoc, zostawię chyba w takiej formie.

Ta wersja jest poprawna :P. Poza tym jak robisz coś takiego -> HyperLink> to będziesz miał w kodzie HTML takie coś -> . Też się z takim zapisem nie spotkałem. Jak już chcesz wstawiać tekst programowo to zrób takie coś -> .

Anyway jak już poznasz rozwiązanie narzucone przez tą tajemniczą osobę to wrzuć je na forum. Jestem ciekaw co ten ktoś wymyślił :smiley:

A nie możesz użyć zwykłego htmlowego anchora z zagnieżdżonym img i napisem?

Nie (o ile dobrze kojarzę), bo wszystko się musi opierać na kontrolkach ASP.

Chyba mam to co chciałeś … Generalnie użyłem kodu, który podałeś na początku, dorzuciłem tylko właściwości + style …

kod ASP .NET

CSS:

img {

        border: none;

    }


	a {

		text-decoration: none;

	}


    a:hover span {

        text-decoration: underline;

    }

Sprawdziłem to w IE8 i firefox 3.6.12 i w obu wyświetla się poprawnie.

Tutaj się myliłem. Jeśli w HyperLink ustawi się właściwość ImageUrl, a potem umieści się jakąś kontrolkę pomiędzy tagiem otwierającym i zamykającym HyperLink, to ta umieszczona kontrolka nie zostanie w ogóle uwzględniona w kodzie wynikowym. Jeśli jednak umieści się czysty tekst to dopiero wówczas zostanie on przypisany do atrybutu alt w tag-u img. W sumie nie wiem czemu tak się dzieje :smiley: Czyli ten kod

nic nie zrobi, a ten kod

Tekst

ustawi atrybut alt na “Tekst”

:expressionless:

Czemu nie?

Kod HTML będzie przecież taki sam. :slight_smile:

Dzięki wielkie. Zaraz to będę testował.

I działa :wink:

Ano działa, ale mówię ja nie widziałem, żeby ktoś takie coś stosował. Nie zmienia to jednak faktu, że dobrze wiedzieć, że da się coś takiego zrobić.

Niestety na Chromie już nie tak jak trzeba… ale jakoś to obejdę :wink: Dzięki jeszcze raz.

Jeśli sobie poradzisz z tym na Chrome to daj znać tutaj na forum. Generalnie ta przeglądarka ma to do siebie, że lubi sprawiać problemy :smiley: Ciekawe, czy działa to w Operze.

Pozdrawiam,

Początkowo Opera też sprawiała problemy.

Okazało się, że wystarczy dodać tylko tyle, nic nie zmieniając w CSS:

Teraz w każdej przeglądarce hula. Co prawda faktycznie ten kod jest strasznie sztuczny, no ale cel uświęca środki powiedzmy :stuck_out_tongue:

Pozdrawiam!

Ale jaja … Zerknąłem, co dokładnie oznacza to Font-Underline=false i to jest nic innego jak text-decoration:none, czyli to co wstawiłem do CSS-ów :stuck_out_tongue: Generalnie powinno się unikać ustawiania styli bezpośrednio w kodzie ASP .NET. Od tego jest plik .css oraz .skin. Może spróbuj poeksperymentować … tzn. wywal to font-underline z kodu i pozmieniaj trochę CSS-y np. na

img {border: none;}

a:link {text-decoration: none}

a:visited {text-decoration: none}

a:active {text-decoration: none}

a:hover {text-decoration: none;}

a:hover span { text-decoration: underline;}

Z tą poprawką także wszystko śmiga :wink: