Autor Zpráva
Coompiik
Profil
#1 · Zasláno: 14. 12. 2013, 00:18:00
Odpovědět Citovat
Dobrý den,
Dělám fotogalerii na web, nic mi nedělá problém, ale předse jen jsem jeden chytil a to takoví že jsem chtěl do každého obrázku hodit vlevo nahoru obrázek lupy, na který kdyš se klikne přejde se na obyč <a> odkaz, vyřešil jsem to přez position: absolute ale to pak házelo všechny lupy na stejné místo, a to nahoru, do prvního obrázku. Zde je kód fotogalerie: 
<a href="javascript: alert('Po kliknutí na obrázek, se zvětší\nPo odjetí myši ze zvětšeného obrázku se opět zmenší\nPo kliknutí na lupičku se otevře velký v novém okně')"><input type="button" value="--Nápověda--" /></a><br>
<img style="height: 100px; width: 145px;" onclick="this.style.height='405px';this.style.width='553px';this.style.position='relative'" onmouseout="this.style.height='100px';this.style.width='145px'" alt="" src="http://www.teraristika-buzulka.cekuj.net/img/100_3702.JPG" /><a href="http://www.teraristika-buzulka.cekuj.net/img/100_3702.JPG"><img height="45" width="46" src="http://serkorycinski.com/img/lupa.png"></a>
<br><img style="height: 100px; width: 145px;" onclick="this.style.height='405px';this.style.width='553px';this.style.position='relative'" onmouseout="this.style.height='100px';this.style.width='145px'" alt="" src="http://www.teraristika-buzulka.cekuj.net/img/100_3706.JPG" /><a href="http://www.teraristika-buzulka.cekuj.net/img/100_3706.JPG"><img height="45" width="46" src="http://serkorycinski.com/img/lupa.png"></a>
<br><img style="height: 100px; width: 145px;" onclick="this.style.height='405px';this.style.width='553px';this.style.position='relative'" onmouseout="this.style.height='100px';this.style.width='145px'" alt="" src="http://www.teraristika-buzulka.cekuj.net/img/100_3707.JPG" /><a href="http://www.teraristika-buzulka.cekuj.net/img/100_3707.JPG"><img height="45" width="46" src="http://serkorycinski.com/img/lupa.png"></a>
<br><img style="height: 100px; width: 145px;" onclick="this.style.height='405px';this.style.width='553px';this.style.position='relative'" onmouseout="this.style.height='100px';this.style.width='145px'" alt="" src="http://www.teraristika-buzulka.cekuj.net/img/100_3710.JPG" /><a href="http://www.teraristika-buzulka.cekuj.net/img/100_3710.JPG"><img height="45" width="46" src="http://serkorycinski.com/img/lupa.png"></a>
<br><img style="height: 100px; width: 145px;" onclick="this.style.height='405px';this.style.width='553px';this.style.position='relative'" onmouseout="this.style.height='100px';this.style.width='145px'" alt="" src="http://www.teraristika-buzulka.cekuj.net/img/100_3711.JPG" /><a href="http://www.teraristika-buzulka.cekuj.net/img/100_3711.JPG"><img height="45" width="46" src="http://serkorycinski.com/img/lupa.png"></a>
<br><img style="height: 100px; width: 145px;" onclick="this.style.height='405px';this.style.width='553px';this.style.position='relative'" onmouseout="this.style.height='100px';this.style.width='145px'" alt="" src="http://www.teraristika-buzulka.cekuj.net/img/100_3712.JPG" /><a href="http://www.teraristika-buzulka.cekuj.net/img/100_3712.JPG"><img height="45" width="46" src="http://serkorycinski.com/img/lupa.png"></a>
<br><img style="height: 100px; width: 145px;" onclick="this.style.height='405px';this.style.width='553px';this.style.position='relative'" onmouseout="this.style.height='100px';this.style.width='145px'" alt="" src="http://www.teraristika-buzulka.cekuj.net/img/100_3714.JPG" /><a href="http://www.teraristika-buzulka.cekuj.net/img/100_3714.JPG"><img height="45" width="46" src="http://serkorycinski.com/img/lupa.png"></a>
<br><img style="height: 100px; width: 145px;" onclick="this.style.height='405px';this.style.width='553px';this.style.position='relative'" onmouseout="this.style.height='100px';this.style.width='145px'" alt="" src="http://www.teraristika-buzulka.cekuj.net/img/100_3720.JPG" /><a href="http://www.teraristika-buzulka.cekuj.net/img/100_3720.JPG"><img height="45" width="46" src="http://serkorycinski.com/img/lupa.png"></a>
<br><img style="height: 100px; width: 145px;" onclick="this.style.height='405px';this.style.width='553px';this.style.position='relative'" onmouseout="this.style.height='100px';this.style.width='145px'" alt="" src="http://www.teraristika-buzulka.cekuj.net/img/100_3723.JPG" /><a href="http://www.teraristika-buzulka.cekuj.net/img/100_3723.JPG"><img height="45" width="46" src="http://serkorycinski.com/img/lupa.png"></a>
<br><img style="height: 100px; width: 145px;" onclick="this.style.height='405px';this.style.width='553px';this.style.position='relative'" onmouseout="this.style.height='100px';this.style.width='145px'" alt="" src="http://www.teraristika-buzulka.cekuj.net/img/100_3724.JPG" /><a href="http://www.teraristika-buzulka.cekuj.net/img/100_3724.JPG"><img height="45" width="46" src="http://serkorycinski.com/img/lupa.png"></a>
<br><img style="height: 100px; width: 145px;" onclick="this.style.height='405px';this.style.width='553px';this.style.position='relative'" onmouseout="this.style.height='100px';this.style.width='145px'" alt="" src="http://www.teraristika-buzulka.cekuj.net/img/100_3725.JPG" /><a href="http://www.teraristika-buzulka.cekuj.net/img/100_3725.JPG"><img height="45" width="46" src="http://serkorycinski.com/img/lupa.png"></a>
<br><img style="height: 100px; width: 145px;" onclick="this.style.height='405px';this.style.width='553px';this.style.position='relative'" onmouseout="this.style.height='100px';this.style.width='145px'" alt="" src="http://www.teraristika-buzulka.cekuj.net/img/100_3726.JPG" /><a href="http://www.teraristika-buzulka.cekuj.net/img/100_3726.JPG"><img height="45" width="46" src="http://serkorycinski.com/img/lupa.png"></a>
<br><img style="height: 100px; width: 145px;" onclick="this.style.height='405px';this.style.width='553px';this.style.position='relative'" onmouseout="this.style.height='100px';this.style.width='145px'" alt="" src="http://www.teraristika-buzulka.cekuj.net/img/100_3727.JPG" /><a href="http://www.teraristika-buzulka.cekuj.net/img/100_3727.JPG"><img height="45" width="46" src="http://serkorycinski.com/img/lupa.png"></a>
<br><img style="height: 100px; width: 145px;" onclick="this.style.height='405px';this.style.width='553px';this.style.position='relative'" onmouseout="this.style.height='100px';this.style.width='145px'" alt="" src="http://www.teraristika-buzulka.cekuj.net/img/100_3729.JPG" /><a href="http://www.teraristika-buzulka.cekuj.net/img/100_3729.JPG"><img height="45" width="46" src="http://serkorycinski.com/img/lupa.png"></a>
<br><img style="height: 100px; width: 145px;" onclick="this.style.height='405px';this.style.width='553px';this.style.position='relative'" onmouseout="this.style.height='100px';this.style.width='145px'" alt="" src="http://www.teraristika-buzulka.cekuj.net/img/100_3731.JPG" /><a href="http://www.teraristika-buzulka.cekuj.net/img/100_3731.JPG"><img height="45" width="46" src="http://serkorycinski.com/img/lupa.png"></a>
<br><img style="height: 100px; width: 145px;" onclick="this.style.height='405px';this.style.width='553px';this.style.position='relative'" onmouseout="this.style.height='100px';this.style.width='145px'" alt="" src="http://www.teraristika-buzulka.cekuj.net/img/100_3732.JPG" /><a href="http://www.teraristika-buzulka.cekuj.net/img/100_3732.JPG"><img height="45" width="46" src="http://serkorycinski.com/img/lupa.png"></a>
<br><img style="height: 100px; width: 145px;" onclick="this.style.height='405px';this.style.width='553px';this.style.position='relative'" onmouseout="this.style.height='100px';this.style.width='145px'" alt="" src="http://www.teraristika-buzulka.cekuj.net/img/100_3733.JPG" /><a href="http://www.teraristika-buzulka.cekuj.net/img/100_3733.JPG"><img height="45" width="46" src="http://serkorycinski.com/img/lupa.png"></a>
<br><img style="height: 190px; width: 145px;" onclick="this.style.height='555px';this.style.width='553px';this.style.position='relative'" onmouseout="this.style.height='190px';this.style.width='145px'" alt="" src="http://www.teraristika-buzulka.cekuj.net/img/100_3737.JPG" /><a href="http://www.teraristika-buzulka.cekuj.net/img/100_3737.JPG"><img height="45" width="46" src="http://serkorycinski.com/img/lupa.png"></a>
<br><img style="height: 100px; width: 145px;" onclick="this.style.height='405px';this.style.width='553px';this.style.position='relative'" onmouseout="this.style.height='100px';this.style.width='145px'" alt="" src="http://www.teraristika-buzulka.cekuj.net/img/100_3742.JPG" /><a href="http://www.teraristika-buzulka.cekuj.net/img/100_3742.JPG"><img height="45" width="46" src="http://serkorycinski.com/img/lupa.png"></a>
<br><img style="height: 100px; width: 145px;" onclick="this.style.height='405px';this.style.width='553px';this.style.position='relative'" onmouseout="this.style.height='100px';this.style.width='145px'" alt="" src="http://www.teraristika-buzulka.cekuj.net/img/100_3746.JPG" /><a href="http://www.teraristika-buzulka.cekuj.net/img/100_3746.JPG"><img height="45" width="46" src="http://serkorycinski.com/img/lupa.png"></a>
A zde je 1 obrázek s tou lupou jak si představuji 
<img style="height: 100px; width: 145px;" onclick="this.style.height='405px';this.style.width='553px';this.style.position='relative'" onmouseout="this.style.height='100px';this.style.width='145px'" alt="" src="http://www.teraristika-buzulka.cekuj.net/img/100_3702.JPG" />
<div style="position: absolute; top: 5; left: 5;"><a href="http://www.teraristika-buzulka.cekuj.net/img/100_3702.JPG"><img height="45" width="46" src="http://serkorycinski.com/img/lupa.png"></a></div>
Můžete to testnout na mim testru nebo někde u sebe.
Předem děkuji za pomoc.
Coompiik
jenikkozak
Profil
#2 · Zasláno: 14. 12. 2013, 00:27:51
Odpovědět Citovat
Vzhledem k tomu, že znáš rozměry obrázku, můžeš ho snadno obalit jiným prvkem, třeba <div>em, a tomu nastavit position:relative. Do něj vnořený prvek s position:absolute pak nebude jako počátek os umístění brát dokument, ale nadřazený prvek.
Coompiik
Profil
#3 · Zasláno: 14. 12. 2013, 09:19:41 · Upravil/a: Coompiik o minutu později
Odpovědět Citovat
Tak sem to skusil s 2. obrázkama, jaksi řekl, obalil jsem fotky relativní pozicí ale furt nic: 
<img style="position: relative; height: 100px; width: 145px;" onclick="this.style.height='405px';this.style.width='553px'" onmouseout="this.style.height='100px';this.style.width='145px'" alt="" src="http://www.teraristika-buzulka.cekuj.net/img/100_3702.JPG" />
<div style="position: absolute; top: 5; left: 5;"><a href="http://www.teraristika-buzulka.cekuj.net/img/100_3702.JPG"><img height="45" width="46" src="http://serkorycinski.com/img/lupa.png"></a></div>
<br><img style="position: relative; height: 100px; width: 145px;" onclick="this.style.height='405px';this.style.width='553px'" onmouseout="this.style.height='100px';this.style.width='145px'" alt="" src="http://www.teraristika-buzulka.cekuj.net/img/100_3702.JPG" />
<div style="position: absolute; top: 5; left: 5;"><a href="http://www.teraristika-buzulka.cekuj.net/img/100_3702.JPG"><img height="45" width="46" src="http://serkorycinski.com/img/lupa.png"></a></div>
A chtěl bych upozornit na 
onclick="this.style.height='405px';this.style.width='553px'" onmouseout="this.style.height='100px';this.style.width='145px'"
Nedělá tamto nějakou chybyčku? prtože velikost obrázku se změní kdyš se klikne.
Coompiik
Profil
#4 · Zasláno: 14. 12. 2013, 22:53:23
Odpovědět Citovat
Tak mě napadlo jestli by nebilo dobrý udělat prostě position: absolute; top: 5; left: 5; a pak to prostě jen vypočítat pole velikosti toho hlavního obrázku a zvětšovat číslo top, ale to pak zas bude problém s onclick="this.style.height='405px';this.style.width='553px'" onmouseout="this.style.height='100px';this.style.width='145px'", protože se velikost obrázků změní.
Opravsdu nevím.
Každá rada bude dobrá
---
PS: web s fotogalerii: Teraristika - Buzulka
Časová prodleva: 7 dní
nethor
Profil
#5 · Zasláno: 21. 12. 2013, 21:58:12
Odpovědět Citovat
Coompiik:
„jestli by nebilo dobrý“ - přeposílám Nadaci pro mrzačení češtiny.

Jinak tenhle problém bych řešil spíš obrázkem na pozadí, přes css: vnější div s bg obrázkem a vnořený s lupou.
margin
Profil *
#6 · Zasláno: 21. 12. 2013, 23:13:06
Odpovědět Citovat
Chceš tohle? 
img + a img  {margin: 0 0 40px -30px;}
Důrazně doporučuji použít jiný selektor, já bych dal obalovému třídu "nahledy" a pak to zapsal takto: 
.nahledy a img  {margin: 0 0 40px -30px;}
Coompiik
Profil
#7 · Zasláno: 23. 12. 2013, 20:22:57
Odpovědět Citovat
Promiň ale CSS moc nerozumim, .nahledy chapu, to je class, to celý cos napsal hodim do <style> ale jinak fakt netušim co bych s tim dělal, byl bys tak hodnej a uvedl pls příklad na dvou obrázkách?
margin
Profil *
#8 · Zasláno: 23. 12. 2013, 23:13:29
Odpovědět Citovat
Coompiik:
Teď budu mimo téma, víš o tom, že se drtivé většině návštěvníků tvého webu místo obrázku lupy zobrazuje reklamní obrázek na "Najlepszi darmowy hosting"? Nebudu ho jmenovat.
Na webu, kde je obrázek lupy, je totiž zakázáno hotlinkování obrázků.
Coompiik
Profil
#9 · Zasláno: 24. 12. 2013, 11:14:08
Odpovědět Citovat
Hmm, mě se to nikdy neukázalo, upldoadnu obrázek k sobě.
Časová prodleva: 10 let

Vaše odpověď

Mohlo by se hodit


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm:

0