Hyperlink z Image [ASP.NET]


(szydera_) #1

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!


(Tomek Matz) #2

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

(szydera_) #3

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:


(Tomek Matz) #4

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.


(szydera_) #5

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.


(Tomek Matz) #6

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:


(somekind) #7

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


(szydera_) #8

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


(Tomek Matz) #9

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:


(somekind) #10

Czemu nie?

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


(szydera_) #11

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

I działa :wink:


(Tomek Matz) #12

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


(szydera_) #13

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


(Tomek Matz) #14

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,


(szydera_) #15

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!


(Tomek Matz) #16

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

(szydera_) #17

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