Aby zrobić zaokrąglone rogi na obrazku kompatybilne ze wszystkimi przeglądarkami, użyjemy dodatku do JQuery corner.


Jak kożystać z biblioteki JQuery corner wyjaśniłem w artykule:

[ Jak zrobić zaokrąglone rogi za pomocą CSS i JavaScript - JQuery Corner ]

Artykuł powyżej pokazywał jak zrobić zaokrąglone rogi na warstwie div, teraz przedstawię wam jak to zrobić bezpośrednio na obrazku.


[ Zobacz efekt ]

[ Pobierz skrypt ]

[ Strona projektu ]

Zasada działania jest prosta na początek zaciągamy biblioteki JQuery:

<script type="text/javascript" src="img_corner_pliki/jquery-1.js"></script>
<script type="text/javascript" src="img_corner_pliki/jquery.js"></script>

Poten ten krótki skrypcik:

<script type="text/javascript">
$.fn.corner.defaults.useNative = false;
$(document).ready(function(){
        $("#imgBox").corner("15px");
    });
</script>

I teraz rzecz główna tworzymy div o unikalnym id  w naszym przypadku przykłądowy imgBox a poniżej odpalamy skrypt JQuery zaokrąglający rogi:

<div id="imgBox" style="width:200px; height:200px; margin:0;padding:0">
<img src="beach1.jpg" />
</div>

<script type="text/javascript">
$(document).ready(function(){
    $("#imgBox").corner("15px");
});
</script>