jQuery - wczytanie zdjęcia

[M@k]

Mam takie pytanko. Chciałbym zrobić, aby po najechaniu kursorem na div o id="divimg" wczytał się obrazek. Ale tylko w tym divie na który najadę.

Kombinuje np. takie coś, ale wczytują mi się we wszystkich div-ach na raz.

Co tu mogę poprawić?

Html:

<div id="divimg"><img src="" realsrc="img1.jpg" alt="" width="20" height="53"/></div>

<div id="divimg"><img src="" realsrc="img2.jpg" alt="" width="20" height="53"/></div>

jQuery:

$(function() {

$('#immagine').mouseenter(function() {

$('img[realsrc]').each(function() {

var t = $(this);

t.attr('src', t.attr('realsrc'));

t.removeAttr('realsrc');

});

});

});

Chodzi mi aby wczytanie nastąpiło po najechaniu na div nie na zdjęcie, ponieważ zdjęcie będzie dużo mniejsze niż div. Będę wdzięczny

[Rak115]

<div class="divimg"><img src="img1.jpg" alt="" width="20" height="53"/></div>

* nie powtarzamy atrybutów ID, może być klika elementów o tej samej klasie, lecz tylko jeden element o tym samym ID.

Do css:

#divimg img { display:none; }

#divimg:hover img { display:block; }

Ewentualnie, możesz dodać jakieś animacje przy użyciu css3. jQuery nie potrzebne

Ważne, aby #divimg miał stałe wymiary, gdyż jeżeli zdjęcie będzie większe jednak, całość się rozjedzie. Dodatkowo, powinien mieć parametr "overflow:hidden;", tak just in case.

Możesz również wyśrodkować zdjęcie w pionie i w poziomie, aczkolwiek nie wiem, jak wygląda Twój layout.

Pzdr

[M@k]

Dzięki za odpowiedz. Ale jqwery musi być, ja nie chcę ukrywać zdjęć tylko je wczytywać po najechaniu na div. A to jest ogromna różnica bo na stronie może być i z 500 zdjęć. A jak wczytam dopiero te, które ktoś będzie chciał to strona się migiem ładuje i niepotrzebnie nie ciągnie nie potrzebnych zdjęć. A display:none; tylko ich nie pokazuje ale je wczytuje i tak.

[M@k]

Kurka już praktycznie zrobiłem działa jak chciałem mianowicie tak:

$(function() {

$('#divimg').live('mouseenter', function(){

$('img[realsrc]',this).each(function() {

var t = $(this);

t.attr('src', t.attr('realsrc'));

t.removeAttr('realsrc');

});

});

});

Ale jest pewien problem działa to na wersji 1.7.1 i jest użyte tu live(), nowa wersja 1.9.1 obsługuje on() ale mi kurka nie działa. Czy ktoś wie jak to przerobić na On?

[Rak115]

Dlaczego w ogóle używać .on() / .live() ? Miałoby to sens w przypadku ładowania dynamicznego, tak jest ?

https://jsfiddle.net/F4N3r/

Pzdr

[M@k]

Z tym ze div ma być cały czas widoczny bo tam są tez inne informacje. A po najechaniu na ten div ma tylko wczytać zdjęcie którego wcześniej nie ma. To chyba hidden ustawić na zdjęcie nie div?

[Rak115]

Edytowałem swój post, zobacz kod na jsfiddle. "hidden" to tylko taka klasa dla jQuery ,możesz ją nazwać jak chcesz. Ona daje informacje dla skryptu, że obrazek już został załadowany (zatem nie jest ukryty). Jako, że bindujemy mouseenter na DIVA, nie na obrazek, tam też powinna znajdować się klasa.

Btw, polecam użyć .hover(function(){, użycie on() tutaj nie ma żadnego większego celu Chyba, że ładujesz divy dynamicznie (np. ajaxem).

[M@k]

Co tu dużo mówić użyłem hover i działa jak ta lala. Wielkie dzięki

[M@k]

A jaszcze mam pytanko, bo w praniu wyszło.

Mam np 100 boksów, w nich mam w tej chwili po dwa linki do tej samej strony ale z innym anchorem np.

<div class="boks">

<a class="linkp" href="link1">Anchor</a>

Jakis tekst

<a href="link1#add">Anchor 2</a>

</div>

Czy można pobrać z każdego tego boku link o class="linkp"

I przesłać go do jakiegoś div o np. class="divd" w tym boksie.

Aby to wyglądało tak:

<div class="boks">

<a class="linkp" href="link1">Anchor</a>

Jakis tekst

<div class="divd"></div>

</div>

Czemu chce to zrobić, aby zamiast 200 linków było 100, bo te 100 następne były by w jqwery.

I na dodatek ten drugi link ma wszędzie ten sam anchor, czyli wyświetlało by się 100 razy to samo.

To musiało by być coś w rodzaju.

$(".divd").append("<a href="link1#add">Nazwa</a>")

Nazwa jest wstawiana ręcznie i zawsze jest ta sama. Chodzi tylko w tym aby pobrać z tych boksów pierwszy link i do niego dodac #add

Nie wiem czy nie namieszałem tu kurka.

[Rak115]

Nie wiem, czy dobrze zrozumiałem.

<div class="boks">

<a class="linkp" href="link1">Anchor</a>

Jakis tekst

</div>

$(document).ready(function() {

$(".boks").each(function() { //w tymiejscu, można each zastąpić np. hover, zależy jaki efekt chcemy uzyskać

var anchor = $(this).find('a');

var href = anchor.attr('href'); //pobieramy link

var tekst = anchor.find('a').text();

$(this).append('<a href="'+href+'#add" title="Jakiś tytuł">'+text+'</a>');

});

});

[blusss1]

Ja robiłem coś takiego w https://www.pojednani.pl/ (tam na dole są obrazki, zobacz jak najedziesz czy o to ci chodzi) jeśli tak to poczytaj o jtip jquery można dostosować pod siebie, są też gotowe skrypty

[youme]

sciagnij sobie plugin tooltip albo wykorzystaj ten z jquery ui zamiast bawic sie po swojemu

https://jqueryui.com/tooltip/#custom-content