On MouseOver - zamiana tekstu z zachowaniem nagłówka h1

(Bzyt_ek) #1

Dzień dobry,
Czy spotkał się ktoś z rozwiązaniem takiego zagadnienia ?
Mam nagłówek [h1] z przykładową treścią ( Taispeántas de chuid na hÉireann agus na Polainne maidir leis an nGorta Mór á oscailt go hoifigiúil ag an Uachtarán ).
Oczywiście nie mieści się on w jednej linii nagłówka dlatego:

  1. Chciałbym go przełamać {przy pomocy [ br / ] - to chyba można ;)
  2. I druga kwestia ważniejsza - czy za pomocą On MouseOver? w .css można podmienić treść (też jako [h1] ) na angielską - bardziej zrozumiałą. Nawiasem - wiem co znaczy to "niezrozumiałe " zdanie.
    Czy może ktoś zaproponować w miarę proste rozwiązanie w css? Nie chciałbym używać do tego .js ani jQuery bo chodzi tylko o jedną stronę z takim tytułem.
(xBotekx) #2

Nie jestem pewien czy cię dobrze zrozumiałem ale jeśli chodzi ci o zmiana treści po najechaniu na nagłówek to możesz użyć .

p:hover a p.new-label:after{
   content: 'ADD';
}

Coś w tym stylu.

Tutaj masz przykład (nie mój)
http://jsfiddle.net/fLMSd/14/

1 Like
(Fizyda) #3
  1. Nie powinieneś używać br bo w pewnych przypadkach jeśli strona jest responsywna (a powinna być) może to spowodować, że będzie ona wyglądała jeszcze gorzej
  2. Nie powinieneś robić tego ani w css ani w js ze względu na SEO, taki tekst nie zostanie zindeksowany

Rozwiązanie problemu pierwszego jest takie by nagłówek był poprawnie ostylowany, normalnie tekst powinien zawijać się do kolejnej linii bez stosowania br.
Co do drugiego to zależy od tego co i dlaczego chcesz zrobić, za mało informacji by podpowiedzieć dobre rozwiązanie.

1 Like
(Bzyt_ek) #4

Dzięki za uwagi merytoryczne - niemniej rozwiązania problemu nie widać.
Pytasz do czego toto ma być. Po prostu chodzi o zaciekawienie czytelnika dalszą częścią tekstu. Nie sadzę by wójcio google indeksował treść nagłówka po irlandzku. Chodzi tylko o efekt. :wink: Przecież nie zrobię tego jako gif albo flash :wink: Widziałeś kiedyś nagłówek strony po irlandzku a dalszą część po angielsku :wink: ?
Nie mają to być dwa nagłówki [ h1] tylko podmieniana ma być treść tego pierwszego jako właściwego.
Co do zawijania tekstu . Jak widzisz jest on dość długi - angielski jest krótszy. Całość ma być "ładnie " wycentrowwana i stąd moja sugesta o przełamaniu tym [br /]

(Bzyt_ek) #5

Przykład troochę niezbyt fortunny. Zwróć uwagę na długość tekstu do podmiany

(Fizyda) #6

No nie wiem, mi się tam łamie bez problemu automatycznie bez używania br.
https://jsfiddle.net/upg7ca6k/

Ważniejsze jest to co on jednak robi i uwierz mi, że zindeksuje. Poza tym widać, że nie zależ Ci na indeksowaniu wersji po irlandzku, ale już po angielsku prawdopodobnie tak i w poprzedniej części pisząc o problemach z indeksowaniem właśnie chodziło mi o wersje przetłumaczoną.
Jeśli już koniecznie chcesz się bawić w podmienianie to poszedłbym raczej w takim kierunku:
https://jsfiddle.net/upg7ca6k/1/
Plus trzeba ogarnąć JS tak by strona nie zmieniała swojej wysokości w momencie podmiany tekstu. Ale to już zależy od tego jak chcesz to obsługiwać, bo podmieniany tekst może być krótszy jak w przykładzie wyżej co jest stosunkowo proste do zrobienia, ale drugi tekst może być również dłuższy i tutaj trzeba pomyśleć jak to zrobić dobrze by użytkownika nie zdezorientować i żeby to nie miało negatywnego wpływu na UX.

PS. Zaproponowane prze zemnie rozwiązanie jest pierwszym jakie wpadło mi do głowy, z punktu widzenia SEO nie jest ono najlepsze i trzeba wymyślić coś sensowniejszego.

(Bzyt_ek) #7

Nie wpadłem na pomysł żeby tekst umieścić we “wraperze” :wave:. Niemniej wymodziłem cóś takiego.
Ale twoje podejście wydaje się lepsze.
Ogólnie cała witryna jest po angielsku a ten zmieniający sie tytuł po irlandzku to tylko taki ozdobnik :wink:
Co w nim braknie dla SEO? przecież jest jeden znacznik [ h1] - a tytuły właściwie dwa :wink:

(Fizyda) #8

H1 teoretycznie ma dość silną moc pozycjonującą zawarty w nim tekst względem reszty kontentu. Całość powinna być spójna językowo i tematycznie (h1 i reszta treści). W moim przypadku masz 2 różne teksty (bo w dwóch językach) w jednym nagłówku, co jest błędne.

Ja bym zrobił tekst po angielsku w h1, po irlandzku w span, a całość dać we wrapper po najechaniu na którego będzie wyświetlana jedna wersja.

1 Like
(Bzyt_ek) #9

A co powiesz na takie rozwiązanie ??
Tyle że napisu info o kursorze nie mogę przesunąć do lewej :wink: :frowning: Mógłby też on zniknąć po wskazaniu
O tyle jest to “lepsze” ? że cały napis nie skacze
Cały czas nad tym teraz "pracuję "
Przy odwrotnym umieszczeniu treści irlandzki nachodzi na info o kursorze więc jakby co można by rzeczywiście zrobić znikanie tego info w tym wypadku

(Fizyda) #10

Dla mnie tragiczne rozwiązanie, CSS nie służy do umieszczania treści. To tylko wprowadza bałagan na stronie i utrudnia jej rozwój i zwiększa koszty utrzymania. HTML służy do serwowania danych, a CSS odpowiada za ich prezentacje.

(Bzyt_ek) #11

Strona jest “jednostkowa” bez rozbudowywania jej zawartości. Treść to konspekt przemówienia i nic więcej . O jakich kosztach piszesz- nie rozumiem :frowning:
:wink: poza tym skoro sposób spełnia zadanie to dlaczego go nie stosować :wink:
Wrzucę ją na serwer i podeślę link - ok ?

(Fizyda) #12

W pierwszym poście napisałem:

Nie podałeś nic więcej więc założyłem że to typowa strona jak 90% innych stron w sieci. Nie siedzę w Twojej głowie i nie wiem co robisz, sam też tego nie napisałeś więc mogę tylko próbować zgadnąć jakie będzie dobre rozwiązanie w Twoim przypadku.

Na Morskie Oko można dojechać dorożką, ale czy to dobre i słuszne rozwiązanie to można dyskutować.

(Bzyt_ek) #13

Już wrzucam stronę na serwer
luknij na tutaj
jest tam trochę " bałaganu" w css ale dla sprawdzenia działa

(Bzyt_ek) #14

Ta akurat nie jest typowa :wink:

(Bzyt_ek) #15

Opisałem chyba dokładnie mój problem w pierwszym poście

(Fizyda) #16

Move the cursor to the title

Nie powinno znajdować się w h1. Nie powinno być tekstu w css jak pisałem wcześniej. Masz niepotrzebnego br’a, zagnieżdżasz dwukrotnie small.

(Bzyt_ek) #17

dwukrotny [small] po to by zmniejszyć czcionkę - stosowanie small nie jest błędem Masz może “pomysła” jak rozwiązać ten komunikat o kursorze zgodnie z zasadami SEO ?

(Fizyda) #18

Wywalić go z tagu h1. Używanie small nie jest błędem, ale dwukrotne już nie ma semantycznego sensu, jeśli domyślny rozmiar Ci nie odpowiada to go zmniejszasz w tedy CSSem.

(Bzyt_ek) #19

tyle że jak zrobić zanikanie wyświetlania?

czytałem że można tak to stosować

(Bzyt_ek) #20

w znaczniku [title] jest tylko treść angielska z [h1]