logo elektroda
logo elektroda
X
logo elektroda
REKLAMA
REKLAMA
Adblock/uBlockOrigin/AdGuard mogą powodować znikanie niektórych postów z powodu nowej reguły.

[HTML] Niewidzialny odnośnik (klikanie w obszar na stronie)

MES Mariusz 11 Sie 2007 11:11 5335 20
REKLAMA
  • #1 4167141
    MES Mariusz
    Poziom 36  
    Posty: 5452
    Pomógł: 8
    Ocena: 223
    Witam. Czy ktoś wie może jak zrobić niewidzialny odnośnik na stronie? Chodzi o otwarcie nowej strony po kliknięciu w zadeklarowany obszar na stronie napisanej w HTMLu.

    Z góry dziękuję za podpowiedzi.

    Pozdrawiam
    Mariusz
  • REKLAMA
  • #2 4167155
    Konto nie istnieje
    Konto nie istnieje  
  • REKLAMA
  • #3 4167186
    kosmita
    VIP Zasłużony dla elektroda
    Posty: 4103
    Pomógł: 218
    Ocena: 136
    może tak:
    dla elementu blokowego:
    <div style="width: 40px; height: 20px"><a href="#" style="display: block; width: 100%; height: 100%;"> </a></div>

    dla elementu inline
    <span style="width: 40px; height: 20px"><a href="#" style="display: block; width: 100%; height: 100%;"> </a></span>

    Można to wszystko umieścić w stylu <a> ale moim zdaniem taka konstrukcja jest elastyczniejsza w późniejszych modyfikacjach.
    Oczywiście style można umieścić w oddzielnym pliku css i tylko dodać class do znaczników wtedy będziesz mógł zrobić kilka takich samych elementu bez przepisywania wszystkiego jeszcze raz.
  • #4 4167189
    MES Mariusz
    Poziom 36  
    Posty: 5452
    Pomógł: 8
    Ocena: 223
    kpitan napisał:
    Może przeźroczysty obrazek? Albo zwykły z mapą linków, czy jak to się nazywało.

    No właśnie wolałbym bez żadnych obiektów powiązanych z linkiem, wolałbym, żeby to działało jakoś na współrzędnych ekranu, może w JavaScript ?
  • Pomocny post
    #5 4167190
    krzychoocpp
    VIP Zasłużony dla elektroda
    Posty: 1866
    Pomógł: 387
    Ocena: 58
    Witam, po co obrazek ? Przecież wystarczy normalny link trochę stuningować w CSS:
    
    <html>
            <head>
            </head>
            <style type="text/css">
                    a{ 
                            display: block;
                            width: 200px;
                            height: 200px;
                            background-color: blue;
                    }  
                    body
                    {  
                            background-color: red;
                    }  
            </style>
            <body>
                    <a href="http://www.elektroda.pl" title="elektroda"></a>
            </body>
    </html>


    Pozdrawiam, Krzysztof.
  • #6 4167220
    kosmita
    VIP Zasłużony dla elektroda
    Posty: 4103
    Pomógł: 218
    Ocena: 136
    MES Mariusz napisał:

    No właśnie wolałbym bez żadnych obiektów powiązanych z linkiem, wolałbym, żeby to działało jakoś na współrzędnych ekranu, może w JavaScript ?


    Czyli nie chcesz mieć znaczników <a> </a> ??
  • #7 4167347
    MES Mariusz
    Poziom 36  
    Posty: 5452
    Pomógł: 8
    Ocena: 223
    kosmita napisał:
    Czyli nie chcesz mieć znaczników <a> </a> ??

    No właśnie tak byłoby najlepiej.

    Pomysł z modyfikacją znacznika a podoba mi się, i częściowo rozwiązuje problem.

    
    a {
         display: BLOCK;
         width: 160PX;
         height: 57PX; 
         margin-left:619; 
         margin-top:103; 
       }
    


    Tyle, że dla każdej podstrony serwisu będę musiał modyfikować wartości margin-left i margin-top, bo umieszczenie obszaru na stronie uzależnione jest od zamieszczenia znaczników a.

    Rzeczywiście dużo łatwiejsze byłoby posługiwanie się współrzędnymi ekranu, i nawet niekoniecznie stosowanie znaczników a.

    Dodatkowo powyższy kod (niestety) inaczej jest interpretowany przez Internet Explorer (wszystko ok) a Firefox i Operę (obszar nie jest przezroczysty tylko czarny, oraz przesunięty o 4 pixele w dół i trzy w lewo względem położenia obszaru w IE)
  • REKLAMA
  • #8 4167382
    krzychoocpp
    VIP Zasłużony dla elektroda
    Posty: 1866
    Pomógł: 387
    Ocena: 58
    Trochę nie rozumiem - te linki mają być w przypadkowych, losowych miejscach na stronie, czy mają być ustawione zależnie od jakiegoś innego elementu ? Jeśli to drugie, to znacznie prościej ustawić jednak reguły w CSS, może niech kolega dokładniej opisze co chce osiągnąć.

    Nie powinno się tworzyć strony w całkowitym oparciu o JavaScript. Użytkownik z wyłączonym JS (na przykład pan Google) musi mieć pełny dostęp do strony, co najwyżej bez bajerków.

    BTW: Jeśli Opera i FF wyświetlają tak samo, a IE inaczej, to na 99% to błąd IE.

    Pozdrawiam, Krzysztof.
  • #9 4167616
    MES Mariusz
    Poziom 36  
    Posty: 5452
    Pomógł: 8
    Ocena: 223
    krzychoocpp napisał:
    Trochę nie rozumiem - te linki mają być w przypadkowych, losowych miejscach na stronie, czy mają być ustawione zależnie od jakiegoś innego elementu ?

    Mają być to obszary (prostokąty) które na każdej stronie serwisu występują dokładnie w tym samym miejscu, bez względu na cokolwiek i niezależnie od czegokolwiek. Na stronie ma być kilka takich obszarów z różnymi targetami.

    W tle strony jest obrazek, dajmy na to screen z Windowsowej aplikacji z różnymi buttonami, zakładkami, i trzeba teraz tą wirtualną aplikację ożywić, poprzez zdefiniowanie określonych obszarów i przypisanie im funkcji linku.
  • #10 4169382
    Akane
    Poziom 27  
    Posty: 638
    Pomógł: 144
    Ocena: 33
    każdy element ma event onclick, któremu można przypisać dowolną akcję.
    <div onclick="document.URL='obszar1.htm';"
    style="cursor:hand;position:absolute;left:0;top:0;width:100;height:100">
    </div>
  • #11 4196390
    Spiochu
    Poziom 12  
    Posty: 88
    Pomógł: 1
    Ocena: 1
    Cytat:

    Może przeźroczysty obrazek? Albo zwykły z mapą linków, czy jak to się nazywało.

    -Mapa odsyłaczy
  • #12 4204772
    MES Mariusz
    Poziom 36  
    Posty: 5452
    Pomógł: 8
    Ocena: 223
    Mapa odsyłaczy byłaby rozwiązaniem idealnym.

    Tylko, że ja to miałem tak rozwiązane, że obrazek (imitacja aplikacji dla Windows) była tłem strony, dzięki czemu miałem możliwość umieszczenia na obrazku tekstów, za pomocą zwyczajnych znaczników <p> i </p>. Na obrazku osadzonym za pomocą <img src=""> już niestety nie umieszczę tekstu. Gdyby było inaczej mapa odsyłaczy byłaby idealnym rozwiązaniem.

    Chyba, że da się w jakiś sposób umieścić tekst na osadzonym obrazku ?
  • Pomocny post
    #13 4204876
    maciek_slon
    Poziom 29  
    Posty: 942
    Pomógł: 143
    Ocena: 27
    Żaden problem. Wystarczy wykorzystać CSS.

    Dla obrazka ustawiasz:

    <img src="..." style="position: relative; top: -200px; z-order: 1">

    I wtedy w źródle strony wpisujesz najpierw tekst a pod nim wstawiasz obrazek. Za pomocą parametru top przesuwasz obrazek w górę i w dół :-)
  • #14 4204965
    MES Mariusz
    Poziom 36  
    Posty: 5452
    Pomógł: 8
    Ocena: 223
    maciek_slon napisał:
    Żaden problem. Wystarczy wykorzystać CSS.

    Dla obrazka ustawiasz:

    <img src="..." style="position: relative; top: -200px; z-order: 1">

    I wtedy w źródle strony wpisujesz najpierw tekst a pod nim wstawiasz obrazek. Za pomocą parametru top przesuwasz obrazek w górę i w dół :-)


    Tak, tylko, że obrazek zasłania mi wtedy tekst :-/
  • #15 4205011
    Konto nie istnieje
    Konto nie istnieje  
  • #16 4205082
    maciek_slon
    Poziom 29  
    Posty: 942
    Pomógł: 143
    Ocena: 27
    o przepraszam, powinnoi być z-index a nie z-order :P
  • #17 4205718
    MES Mariusz
    Poziom 36  
    Posty: 5452
    Pomógł: 8
    Ocena: 223
    Nie bardzo chce mi to zadziałać :-/
  • REKLAMA
  • #18 4206251
    maciek_slon
    Poziom 29  
    Posty: 942
    Pomógł: 143
    Ocena: 27
    Możesz pokazać fragment kodu z obrazkiem i paragrafem?

    Mi działa np. takie coś:

    
    <p>tutaj dużo tekstu</p>
    <img src="img004.jpg" style="position: relative; top: -150px; z-index: -1;">
    
  • #19 4324932
    Spiochu
    Poziom 12  
    Posty: 88
    Pomógł: 1
    Ocena: 1
    <a href = link> &nbsp </a>
  • #20 4325021
    tzok
    VIP Zasłużony dla elektroda
    Posty: 38789
    Pomógł: 3174
    Ocena: 6529
    MES Mariusz napisał:
    Tyle, że dla każdej podstrony serwisu będę musiał modyfikować wartości margin-left i margin-top, bo umieszczenie obszaru na stronie uzależnione jest od zamieszczenia znaczników a.

    Rzeczywiście dużo łatwiejsze byłoby posługiwanie się współrzędnymi ekranu, i nawet niekoniecznie stosowanie znaczników a.


    Możesz napisać odpowiedni arkusz CSS i podpiąć go do wszystkich stron - to tylko jedna linijka.

    Pomysł z tłem nie jest dobry, pozycjonuj wszystkie elementy przy użyciu CSS lub zainteresuj się PHP i możliwością dynamicznego generowania grafiki.
  • #21 4327716
    DjCzarny
    Poziom 2  
    Posty: 4
    Najłatwiejsze rozwiązanie to graficzny button np strona będzie czarna zrobić czarny pixel ustawić go przy pomocy, stylów i gotowe.

Podsumowanie tematu

✨ Dyskusja dotyczy sposobów tworzenia niewidzialnych odnośników w HTML, które umożliwiają kliknięcie w określony obszar strony i otwarcie nowej strony. Proponowano różne metody, m.in. użycie przezroczystego obrazka, mapy odsyłaczy (image map), a także stylizację elementów <a> z wykorzystaniem CSS (display: block; szerokość i wysokość) dla definiowania klikalnych obszarów. Autor preferuje rozwiązanie niezależne od znaczników <a>, oparte na współrzędnych ekranu i JavaScript, aby obszary były stałe i niezależne od układu strony. Zaproponowano użycie elementów <div> z eventem onclick i pozycjonowaniem absolutnym (position: absolute) do definiowania prostokątnych, klikalnych obszarów. Poruszono problem nakładania tekstu na obrazek tła, gdzie rozwiązaniem jest manipulacja pozycją i kolejnością warstw za pomocą CSS (position: relative, z-index). Wskazano, że mapa odsyłaczy jest idealna, ale ograniczona, gdy obrazek jest tłem strony, a nie elementem <img>. Podkreślono, że stosowanie JavaScript nie powinno wykluczać dostępności strony dla użytkowników bez JS. Wskazano także na różnice w interpretacji stylów między przeglądarkami (IE, Firefox, Opera). Ostatecznie rekomendowano stosowanie CSS do pozycjonowania i definiowania klikalnych obszarów oraz eventów onclick dla funkcjonalności linków.
Podsumowanie AI na podstawie dyskusji. Może zawierać błędy.
REKLAMA