Poštovani,
imam na stranici sa ljeve strane linkove ,a s desne je div element u kojem
bi htio prikazati sliku kad pritisnem na link.
Kako to najjednostavnije odraditi a da izbjegnem jquery ili javascript,dal je to uopće moguće ?
ako nije ,kako bi izgledao najjednostavniji kod u jquery il javascriptu ?
Hvala unaprijed !
hm, na :hover linka to mozes postici tako sto ces prikazati sliku koju si sakrio pri ucitvanju stranice…
mozes i na :active, ali ako se ne varam to ce ti raditi samo kad si kliknio tipku misa, cim ju pustis vise nije active…
Javascript ti je najbolja solucija, cak slika ne mora biti niti ucitana sa siteom, mozes ju naknadno ucitati…
molio bi nekog za neki link gdje se to može lako razumjet ili još jednostavnije da mi stavi neki najjednostavniji kod kojeg ću moći shvatit,da nije nekaj preteško.
Hvala.
jQuery ce ti biti najlaksi…
http://api.jquery.com/click/ - klik event
http://api.jquery.com/show/ - za prikazati element
Tutorijali:
http://www.w3schools.com/jquery/
http://try.jquery.com/
Za sat-dva gledanja mozes to bez problema napraviti…
e,ovo je funkcionalno,ali sad imam još jedan problem.
stranica je malo duža od ekrana i trebam scroolat do linkova i sad kad kliknem
na podešen link s jquery-em ,kao da se stranica refreša,dakle baci me na vrh pa opet trebam scroll do linkova. u čem je problem ??
moras return false; na eventu klika na link s kojim prikazes sliku, inace ce ti refreshati stranicu…
ma ljudi vi ste umjetnici,s vama je milina učiti.
sad me samo još jedno mući,a to je da prije nego kliknem na link (jquery)
vidljivi su svi elementi(image),a trebao bi samo jednu(prvu) sliku da se prikaže ,a ostale da budu sakrivene,kad kliknem na prvi link onda dalje sve štima.
znam uredit to css-om,ali jquery-em…?!
$(document).ready(function(){
$("#sl1").click(function(){
$("#1").show();
$("#2,#3").hide();
return false;
});
$("#sl2").click(function(){
$("#2").show();
$("#1,#3").hide();
return false;
});
$("#sl3").click(function(){
$("#3").show();
$("#1,#2").hide();
return false;
});
});
tako ces sprijeciti da ti se stranica refresha kad kliknes na link…
$(document).ready(function(){
$("#sl1").click(function(){
$("#1").css("background-color","yellow");
$("#1").show();
$("#2,#3").hide();
return false;
});
zašto ova linija s css-om ne funkcionira ??
Za pozadinu ti je dovoljno koristiti “background”, “#CCCC00”, ne moraš background-color, osim ako trebaš samo boju promijeniti a pozadinsku sliku ostaviti.
I za ovo si napišeš funkciju koju ćeš pozivati, bilo kako samo da nije hardcore kako je sada ovaj zadnji primjer.
Bolji pristup -
$(".slika").click(function(){
$(".slika").each(function(){
$(this).hide();
});
$(this).show();
});
Ovo bi trebalo funkcionirat, primjer je iz glave. Logika je da kada klikneš na sliku, pročešljaš sve slike i zatvoriš ih ( da ne tražiš samo jednu sliku koja je otvorena ) a trenutnu na koju si kliknuo da prikažeš.
Da,razumijem o čem govoriš, ali nije je mi posve jasno kako to treba izgledati .
Trebao bi točan kod sa html linkom,jer nije mi jasno kako će znati kad ću koji link pritisnuti i da se onda prikaže određena slika.
Za sad mi to izgleda ovako:
$(document).ready(function(){
$("#sl1").click(function(){
$("#1").show();
$("#2,#3").hide();
return false;
});
$("#sl2").click(function(){
$("#2").show();
$("#1,#3").hide();
return false;
});
$("#sl3").click(function(){
$("#3").show();
$("#1,#2").hide();
return false;
});
$("#sl4").click(function(){
$("#4").show();
$("#1,#2,#3").hide();
return false;
});
});
html
<li><a href="#" id="sl1">link1</a></li>
<li><a href="#" id="sl2">link2</a></li>
<li><a href="#" id="sl3">link3</a></li>
<li><a href="#" id="sl4">link4</a></li>
image
možeš li ovo posložiti na taj način kako si opisao ?
dosta je teško početniku to shvatiti ,ali snašao sam se,pomalo lovim konce.
No,imam jedan problem,htio bi da prva slika ostane vidljiva do prvog klika.
pokušao sam staviti u varijablu
$(document).ready(function(){
var id = '#sl1';
no slike nema ,prva se prikaže tek klikom na prvi link.
kako da to ispravim ?
Evo primjer: http://jsfiddle.net/6bgyk/1/
Samo simuliras klik na prvi link na pocetku. To je samo jedan od nacina za to napraviti.
ma samo preko css to središ :), ne treba di dodatak u doc. ready što je apazinjan dodao 
#image_box img:first-child { opacity: 1; } da ,al sad ne valjaju linkovi…
točno mi reci šta si sad radio? taj dio koda ti nebi trebao imati nikakve veze s linkovima.
meni radi
link
ej,radi !
ok je,neznam što je bilo al vjerojatno se komp što izblesiro jer sam samo iskopiro tvoj css u svoj ,kao što si prikazao ali nije vrijedilo,no sad je sve ok.
Moram priznat da me ovaj jquery izmučio sigurno kao i ja vas,haha.
Zahvaljujem svima na pomoči,a ja sad krečem malo na učenje tog jquery-a jer mi podosta nije jasno.
Zahvaljujem svima.
nemaš brige. ako se ne varam, sumnjam da znaš javascript koristiti, ako sam u pravu, počni i to obavezno, trebat će ti
da,da znam i javascript me još čeka.