[PHP][HTML][CSS][JavaScript] 2 pytanka a propos standardow, mouse over, email Opcje

[uglukha]

hej wszystkim,
mam 2 pytanka, nie jestem na biezaco ze standardami, nowinkami itd zwiazanymi z www, ucze sie tylko roznych rzeczy jak musze, i oto moje pytanka:

1. Jaki jest teraz najlepszy i najbardziej poprawny sposob na robienie linkow bedacych grafikami, i zmieniajacyh sie na inna grafike po najechaniu myszka?
Kiedys uzywalem czegos takiego, ale w erze CSS itp, pewnie cos wymyslili nowego, jakis standard czy cos...

[HTML] pobierz, plaintext 
<a href="contact.php"><img src="GRAFIKA/contact1.jpg" name="contact" onmouseover="document.images['contact'].src='GRAFIKA/contact2.jpg'" onmouseout="document.images['contact'].src='GRAFIKA/contact1.jpg'" border="0" height="15" width="80"></a>
[HTML] pobierz, plaintext 

2. Pytanie drugie, to jak najbezpieczniej (biorac pod uwage rozne boty, ktory sciagaja maile ze stron i wysylaja spam) umiescic tekstowy, klikalny adres email? Technika obojetna - php, java script itd

z gory dzieki za odp,
pozdrawiam!

[hiszpanespaniol]

ad 1.: zapewne jest wiele równie dobrych sposobów. ja osobiście używam tego Twojego, jednak grafikę daję jako tło linka (blokowego) i przesuwam je tylko za pomocą css (a:hoover). tym sposobem masz linka tekstowego (działa z wyłączonymi stylami), który jednocześnie jest upiększony graficznie.

ad 2.: nie wiem o co dokładnie pytasz, ale chyba najbezpieczniej żeby link nie był klikalny, tzn nie był w sumie linkiem (IMG:http://forum.php.pl/style_emoticons/default/smile.gif) . zwykły tekst np ""napisz do nas na: my [małpa] serwis.pl


pozdrawiam

edit:
ad 1 działa z wyłączonymi obrazkami na stronie

Ten post edytował hiszpanespaniol 27.05.2008, 16:08:48

[uglukha]

aha, ale chodzi mi o to czy sam .css nie ma jakiejs funkcji do tej podmiany obrazkow? bo ten przyklad ktory podalem to takie niezbyt eleganckie korzystanie z javascriptu chyba? czy moze sie myle i to co podalem jest zgodne ze standardami i smialo moge uzywac?

co do pytania 2, to chodzi mi o to czy mozna jakos sobie zabezpieczyc maila poza zrobieniem z nim obrazka, czy pisaniem typu "mail at domain dot com", jakis skrypt ktory generuje ten adres dopiero po kliknieciu linka, uzywa jakis symboli, czy nie wiem czego, nie znam sie az tak na tym, dlatego pytam. Kiedys mialem umieszczonego maila normalnie

[HTML] pobierz, plaintext 
<a href="mailto: mail@domain.com">mail@domain.com</a>
[HTML] pobierz, plaintext 

na jednej ze stron, ktora zrobilem, to w pewnym momencie przychodzilo mi okolo 100 maili ze spamem dziennie... musialem zmienic maila...

[hiszpanespaniol]

to, co podałem to właśnie sam css. jedyny HTML który jest do tego potrzebny, to:

[HTML] pobierz, plaintext 
<a href="index.php" id="glowna">strona główna</a>
[HTML] pobierz, plaintext 

i teraz żeby to działało, to każdy link musi mieć swój unikatowy id.

[HTML] pobierz, plaintext 
#glowna {background: #ccc; display: block}
#glowna:hover {background: #aaa}
[HTML] pobierz, plaintext 

to jest, podkreślam, rozwiązanie które ja stosuję. Na pewno ktoś typu Eric Meyer ma na to jakiś lepszy sposób

edit:
tu w przykładzie dałem zmianę koloru tła z rozpędu, ale rownie dobrze można zmieniać grafikę (background-image). ja stosuje przesuwanie grafiki w tle, żeby obydwa stany ładowały się od razu, a nie po najechaniu dopiero

Ten post edytował hiszpanespaniol 28.05.2008, 11:30:50

[Shili]

Co do wysyłania maili - możesz to zrobić za pomocą formularzy php (z przekierowaniem do innej strony i filtracją spamu). Spam jeśli będzie wszystko w miarę dobrze napisane ograniczy się nieco, a nic nie będzie miało Twojego emaila.

To co natomiast podałeś nie bardzo jest zgodne ze standardami, bo nie odróżniasz warstwy treści od warstwy prezentacji. I nawet niekoniecznie chodzi mi tutaj o tej js.

[Pilsener]

1. CSS

2. CSS - wpisujesz sobie adres wspak:

[HTML] pobierz, plaintext 
<adress>lp.serda@jowt</adress>
[HTML] pobierz, plaintext 

i w CSS ustawiasz, aby wyświetlał się normalnie. Jak komuś zależy na wysłaniu maila to sobie adres przepisze, nie musi być klikalny link. Jeśli link ma być klikalny, to jedyna metoda to filtr antyspamowy.

[erix]

1. Jaki jest teraz najlepszy i najbardziej poprawny sposob na robienie linkow bedacych grafikami, i zmieniajacyh sie na inna grafike po najechaniu myszka?

Sposób bardzo poglądowy, musisz sobie dostosować do swojego layoutu, ale samą ideę masz. ;]

Pierwsze, to możesz zrobić poprzez zmianę background-image:

[HTML] pobierz, plaintext 
<style type="text/css">
a.grafikowy
{ background-image: url('asdasd.png'); text-indent: -5000px; }
 
a.grafikowy:hover
{ background-image: url('asdasd2.png') !important; }
</style>
 
<a href="#" class="grafikowy">sadasdsad</a>
[HTML] pobierz, plaintext 

Drugie, to korzystając z przesunięcia (background-position). Robisz grafikę, w której są dwa obrazki: normalny i po najechaniu, jeden po drugim. Rozwiązanie trochę bardziej czasochłonne, ale oszczędzasz na wczytywaniu - nie jest konieczne zestawianie osobnego połączenia (załóżmy, że nie ma keep-alive), nie musisz robić preloadera, bo obrazek jest już wczytany.

(podobnie, jak w poprzednim; różnią się tylko style)

Kod

a.linkowy
{ background-position: 0; }

a.linkowy:hover
{ background-position: -50px !important; }

Wartość podana w background-position jest uzależniona od wysokości obrazka; zazwyczaj będzie to ujemna połowa wysokości.

ad. 2:

2. Pytanie drugie, to jak najbezpieczniej (biorac pod uwage rozne boty, ktory sciagaja maile ze stron i wysylaja spam) umiescic tekstowy, klikalny adres email? Technika obojetna - php, java script itd

No, klikalnego i bezpiecznego raczej nie zrobisz - skoro przeglądarka jest w stanie wywołać program pocztowy po kliknięciu, to dlaczego harvester miałby tego nie zrobić?

Jedyne rozwiązanie, to albo - jak już wspomniano - filtr antyspamowy albo bazowanie na inteligencji użytkownika (imię.nazwisko małpa serwer.pl, czy coś w tym stylu; spammerzy rozwijają się tak samo, jak i filtry).

Ten post edytował erix 28.05.2008, 08:16:06

[uglukha]

ok, dzieki chlopaki, koncepcje linkow graficznych lapie.

tak sie obawialem z tymi mailami :/