Elektroda.pl
Elektroda.pl
X
Proszę, dodaj wyjątek www.elektroda.pl do Adblock.
Dzięki temu, że oglądasz reklamy, wspierasz portal i użytkowników.

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

MES Mariusz 11 Sie 2007 11:11 3427 20
  • #1 11 Sie 2007 11:11
    MES Mariusz
    Poziom 36  

    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

    0 20
  • #2 11 Sie 2007 11:16
    Anonymous
    Użytkownik usunął konto  
  • #3 11 Sie 2007 11:26
    kosmita
    VIP Zasłużony dla elektroda

    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.

    0
  • #4 11 Sie 2007 11:26
    MES Mariusz
    Poziom 36  

    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 ?

    0
  • Pomocny post
    #5 11 Sie 2007 11:27
    krzychoocpp
    VIP Zasłużony dla elektroda

    Witam, po co obrazek ? Przecież wystarczy normalny link trochę stuningować w CSS:

    Code:

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

    0
  • #6 11 Sie 2007 11:35
    kosmita
    VIP Zasłużony dla elektroda

    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> ??

    0
  • #7 11 Sie 2007 12:13
    MES Mariusz
    Poziom 36  

    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.

    Code:

    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)

    0
  • #8 11 Sie 2007 12:23
    krzychoocpp
    VIP Zasłużony dla elektroda

    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.

    0
  • #9 11 Sie 2007 13:49
    MES Mariusz
    Poziom 36  

    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.

    0
  • #10 12 Sie 2007 00:19
    Akane
    Poziom 27  

    każdy element ma event onclick, któremu można przypisać dowolną akcję.

    Code:
    <div onclick="document.URL='obszar1.htm';"
    
    style="cursor:hand;position:absolute;left:0;top:0;width:100;height:100">
    </div>

    0
  • #11 20 Sie 2007 14:25
    Spiochu
    Poziom 12  

    Cytat:

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

    -Mapa odsyłaczy

    0
  • #12 22 Sie 2007 19:43
    MES Mariusz
    Poziom 36  

    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 ?

    0
  • Pomocny post
    #13 22 Sie 2007 20:05
    maciek_slon
    Poziom 29  

    Ż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ół :-)

    0
  • #14 22 Sie 2007 20:27
    MES Mariusz
    Poziom 36  

    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 :-/

    0
  • #15 22 Sie 2007 20:36
    Anonymous
    Użytkownik usunął konto  
  • #16 22 Sie 2007 20:51
    maciek_slon
    Poziom 29  

    o przepraszam, powinnoi być z-index a nie z-order :P

    0
  • #17 22 Sie 2007 23:14
    MES Mariusz
    Poziom 36  

    Nie bardzo chce mi to zadziałać :-/

    0
  • #18 23 Sie 2007 08:21
    maciek_slon
    Poziom 29  

    Możesz pokazać fragment kodu z obrazkiem i paragrafem?

    Mi działa np. takie coś:

    Code:

    <p>tutaj dużo tekstu</p>
    <img src="img004.jpg" style="position: relative; top: -150px; z-index: -1;">

    0
  • #20 27 Wrz 2007 15:54
    tzok
    Moderator Samochody

    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.

    0
  • #21 28 Wrz 2007 11:30
    DjCzarny
    Poziom 2  

    Najłatwiejsze rozwiązanie to graficzny button np strona będzie czarna zrobić czarny pixel ustawić go przy pomocy, stylów i gotowe.

    0