div relative over img
Ik wil proberen zelf een panorama weergave ding te maken met jquery, nu wil ik hier ook aanklikbare vakken voor maken maar ik zou niet weten hoe het zou moeten.
De foto zou dus horizontaal buiten beeld lopen en boven en onder volledig zijn (100%) maar niet iedereen zijn scherm is even hoog dus werken met css (top, left, right, bottom) lijk me geen optie. Of toch wel?
Hoe kan ik dat het best aanpakken?
Mvg. knipper
Gewijzigd op 02/10/2014 20:01:04 door Php knipper
Dan heb je dus de volledige pagina.
De truc is: background-size: cover;.
Daaroverheen (met z-index:;) gooi je eventueel nog 2 aanklikbare <div>'s.
het probleem is niet de foto, dat is iets wat ik al vrij lang kan. het loopt bij mij fout bij de positie van de 2 div's. afhankelijk van de grote van het scherm zal ook de foto groter of kleiner worden waardoor de positie van deze div's verplaatsen. Ikzelf was aan het denken om te werken met aspect ratio om het zo te "berekenen" via jquery maar of dit een goed idéee is weet ik niet.
Het positioneren van elementen hoef je vrijwel nooit te doen met jQuery, tenzij dit dynamisch moet gebeuren, of hele bijzondere uitzonderingen. Destijds dacht ik dat het onderaan zetten van de footer bij kleine pagina's het beste met JavaScript kon maar ook dat is onnodig.
Wat veel (beginners)mensen niet weten is dat je in een Relative div een absolute div kunt plaatsen die zich vervolgens aan de grootte houdt van de relative div. Dit houdt in dat als je de absolute div 'bottom:0px;' meegeeft hij aan de onderkant van de relative div blijft plakken. Misschien dat dit iets helpt?
Overigens zie ik niet in wat er verkeerd is aan top/left/right/bottom. In ieder geval beter dan JavaScript zo ver ik me kan bedenken.
Echter is dit vak niet op beide beeldschermen op de zelfde plek. dit komt omdat de foto zijn verhoudingen behoud maar toch naar height 100% gaat.
dit is dus mijn probleem.
Gewijzigd op 03/10/2014 16:47:19 door php knipper
Php knipper op 03/10/2014 16:47:07:
Ok even verduidelijken, op onderstaande foto staan 2 beeldschermen (rood en groen) en de slide dat buiten het scherm gaat (display: none) is het php logo. op dit logo staat met css (top: 10px; left: 10px;) een vak.
Echter is dit vak niet op beide beeldschermen op de zelfde plek. dit komt omdat de foto zijn verhoudingen behoud maar toch naar height 100% gaat.
dit is dus mijn probleem.
[afbeelding]
Echter is dit vak niet op beide beeldschermen op de zelfde plek. dit komt omdat de foto zijn verhoudingen behoud maar toch naar height 100% gaat.
dit is dus mijn probleem.
[afbeelding]
-Maak van de image een relative DIV (met achtergrond image)
-Het geen wat er overheen gaat moet absolute zijn met de meegegeven top, left, right, bottom. Test het maar eens.
Gewijzigd op 03/10/2014 23:18:42 door phpnuke r
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<div class="panorama">
<div class="caption"></div>
</div>
<style>
.panorama {
position:relative;
background-image:url(phphulp-logo.png);
...
}
.caption {
position:absolute;
bottom:0;
left:0;
right:0;
height:40px;
...
}
</style>
<div class="caption"></div>
</div>
<style>
.panorama {
position:relative;
background-image:url(phphulp-logo.png);
...
}
.caption {
position:absolute;
bottom:0;
left:0;
right:0;
height:40px;
...
}
</style>
Dit komt toch gewoon overeen met jouw stelling dat html de elementen moet aangeven? Ik kan mij goed voorstellen dat zowel een <img> in de panorama class een voordeel kan zijn, maar ook een nadeel.
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<div class="panorama">
<img src="phphulp-logo.png" />
<div class="caption"></div>
</div>
<style>
.panorama img {
/* CSS code om de image goed te plaatsen */
}
.caption {
position:absolute;
bottom:0;
left:0;
right:0;
height:40px;
...
}
// + zorgen dat de caption goed over de IMG valt
</style>
<img src="phphulp-logo.png" />
<div class="caption"></div>
</div>
<style>
.panorama img {
/* CSS code om de image goed te plaatsen */
}
.caption {
position:absolute;
bottom:0;
left:0;
right:0;
height:40px;
...
}
// + zorgen dat de caption goed over de IMG valt
</style>
zoals in mijn foto beschreven gaat de div over de deur niet kloppen bij verschillende schermen tenzij ik werk met procent maar dat lijkt me niet te werken.
Dat is het, maar ik wil het eerst simpel zelf proberen te maken (ik wil hier eigenlijk van leren).
Ikzelf wilde dus de positie van de deuren opslaan en dan met jquery deze her berekenen. maar is dit wel een goed idee?
Gewoon met de <map>-tag 3 afbeeldingen (3x hetzelfde, dat zou ik 1x maken en dan kopieren met jQuery) tonen.
En dan weer met jQuery zodra afbeelding (en <map>) 3 getoond wordt, naadloos nummer 4 etc er naast kopieren.
Code (php)
1
2
3
2
3
Maar het is niet de bedoeling dat het over heel het scherm is. ik ben van plan 360 foto's te maken in vb een huis en een div te plaatsen voor de deuren, als ze op deze deuren klikken gaan ze naar de volgende 360 foto in die kamer en zo verder.
zoals in mijn foto beschreven gaat de div over de deur niet kloppen bij verschillende schermen tenzij ik werk met procent maar dat lijkt me niet te werken.
zoals in mijn foto beschreven gaat de div over de deur niet kloppen bij verschillende schermen tenzij ik werk met procent maar dat lijkt me niet te werken.
Met mijn voorbeeld moet dit volgens mij goed gaan. Zolang je zowel de image als de 'child' in procenten behoud OF in pixels. (of ik zit fout te denken :P)
Als je bijvoorbeeld de image in procenten doet en de child gewoonweg 50 pixels top zou geven dan gaat dat natuurlijk fout.
Gewijzigd op 06/10/2014 21:28:14 door phpnuke r
Daarnaast: je kan ook de locaties van de deuren in procenten zoeken ;).
http://www.w3schools.com/tags/tag_map.asp
en nog een klein puntje als het mag:
Ik ben aan het zoeken hoe ik dit het beste kan doen. De opzet is dat mensen zoals op google street vieuw horizontaal kunnen slepen om zo rond te draaien. Dit moet met jquery maar ik zou niet weten hoe ik dit kan doen. hoe kan ik dat slepen maken? of bestaat hier een tutorial voor?