Podświetl fragment obrazu w JavaScript

Uruchamiam małą stronę internetową, która umożliwia użytkownikom klikanie różnych linków za pomocą map obrazów. Chciałbym podkreślić sekcję, którą użytkownik kliknie, aby przekazać użytkownikowi pewne informacje zwrotne (mogą szybko klikać różne części).Podświetl fragment obrazu w JavaScript

Czy istnieje sposób można odwrócić (lub inaczej podświetlić) niewielki fragment obrazu JavaScript?

Dzięki,

Źródło

2009-12-13 Joe

Jest, ale proszę być bardziej szczegółowe na temat wielkości obszaru i jak można określić obszar. To tylko kwadrat wokół miejsca, w którym klikają, czy są tylko określone obszary? Czy chcesz narysować pudełko, w którym znajduje się mapa obrazu? –

Zamiast mapy obrazu, można spróbować tej metody CSS:

użyć przejrzyste <div> na górze każdego „obrazu mapy” części (link), a następnie za pomocą CSS :hover pseudoklasa obsługująca podświetlanie.

CSS:

#image { 
    position: relative; 
    width: 400px; 
    height: 100px; 
    background-image: url(image_map.png); 
} 

#map-part { 
    position: absolute; 
    top: 10px; 
    left: 10px; 
    width: 50px; 
    height: 50px; 
    background-color: transparent; 
} 

#map-part:hover { 
    background-color: yellow;   /* Yellow Highlight On Hover */ 
    opacity: 0.2; 
    filter: alpha(opacity=20);  
}

HTML:

<div id="image"> 
    <a id="map-part" href="http://www.example.com/"></a> 
</div>

Zauważ, że to będzie działać tylko dla prostokątnych linki.

Źródło

2009-12-13 09:40:29

+1 dla czystej opcji CSS, nawet jeśli nie powoduje ona odwrócenia obrazu. –

+1 bardzo sprytne rozwiązanie – Xavi

Dzięki, sprawdziło się. W przypadku a-linków użyłem "display: block", a margin-top i margin-left zamiast top i left, więc współrzędne są względne. –

Spójrz na jQuery MapHilight.
Nie jestem pewien, czy robi dokładnie to, czego potrzebujesz, ale możesz to osiągnąć przy drobnych zmianach.

Źródło

2009-12-13 09:42:13 Kobi

+1 ładna wtyczka! –

Ten przykład ilustruje użycie programu MapHilight: http://stackoverflow.com/a/17614118/2313371 –

Jak o nakładanie półprzezroczystą <DIV> blok nad obszarem kliknąć, aby go zaznaczyć?

Źródło

2009-12-13 09:42:28

Istnieje wiele sposobów,

W pewnym sensie d mody, przełamać swoje obrazy w wielu mniejszych kawałków i za pomocą tabeli, aby je połączyć. Następnie za pomocą javascript zastąpić atrybut thr "src" dla efektu podświetlenia.

W inny sposób CSS, użyj CSS, aby przyciąć alt. obraz na górze oryginału i kontrolować, który obszar powinien być widoczny.

Lepiej jest mieć jeden obraz dla wszystkich, a potem wiele małych zdjęć, aby przyspieszyć i użytkownik otrzyma ją niezwłocznie przez sieć.

Źródło

2009-12-13 09:44:35

Podświetl fragment obrazu w JavaScript

Odpowiedz

Powiązane problemy