Mam zdjęcia w tabeli, chciałbym teraz mieć coś takiego że najeżdżaj myszką na zdjęcie i np. w jego górnym rogu pojawia się ikonka czerwonego krzyżyka, po kliknięciu następuje skasowanie zdjęcia. Jak mogę to osiągnąć? czego mam poszukać?
latwo to zbudowac samemu w javascripcie.
wstawiasz obrazek, a na nim korzystajac z position: absolute
nakladasz obrazek i ukrywasz go w css display:none
po najechaniu (akcja on hover, wywolanie zalezne od tego czy jquery czy vanilla) pokazujesz obrazek, ktory jest podlinkowany z akcja kasowania obrazek czy to poprzez <a href
czy poprzez javascript.
LUB:
czysty CSS:
http://www.itsalif.info/content/show-play-icon-mouse-over-thumbnail-using-css
jQuery, ajax, coś w stylu:
$("#image-list .image").hover(function() { $(this).parent().find(".delete-icon").show(); }, function() { $(this).parent().find(".delete-icon").hide(); });
$("#image-list .image .delete-icon").click(function() {
var image = $(this).parent().find(".image");
$.ajax({
url: heresYourUrlToRemoveAnImage,
data: { src: image.prop("src") },
success: function (data) { alert("Usunięte z wynikiem " + data); image.parent().remove(); },
});
});
dla struktury
<div id="image-list">
<div>
<div class="delete-icon"></div>
<img class="image" src="sourceUrlForImage" />
</div>
<div>
<div class="delete-icon"></div>
<img class="image" src="sourceUrlForImage" />
</div>
...
</div>
Całość pisana z palca, więc nie musi działać, ale i tak chodzi tylko o pokazanie jak, a o bezmyślne nie skopiowanie. Klasa "delete-icon" zawiera definicję rozmiaru, tła z obrazkiem kosza czy iksa, display:none, no i oczywiście odpowiednie wypozycjonowanie obrazka usuwania.
Zarejestruj się i dołącz do największej społeczności programistów w Polsce.
Otrzymaj wsparcie, dziel się wiedzą i rozwijaj swoje umiejętności z najlepszymi.