[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!

[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