[HTML] 2 Images over elkaar heen

[Maxonic]

Hoi,

'k zit met het volgende probleem. Ik moet op een pagina met een variable lengte, onderaan die variable inhoud een plaatje neerplanten. Over dit plaatje heen moet gedeeltelijk een ander plaatje komen welke dmv coördinaten op de juiste plek gezet moet worden. Gezien de pagina een variable lengte heeft moeten deze coördinaten dus coördinaten ten aanzien van het onderste plaatje zijn. Ik zoek dus eigenlijk hetzelfde princiepe als een <map> en hotspots maar dan met een plaatje ipv onzichtbare spot. Heeft iemand enig id op welke manier ik dit oplos?

[Verwijderd]

zoeken op google naar css positioning...


ook powered by w3schools.com

[Maxonic]

Ja, daar was ik idd ook al een tijdje naar aan het kijken maar zover ik gevonden heb bied dat toch geen mogelijkheid om de positie van een <div>-layer aan een plaatje te binden? Ik krijg het slechts voor elkaar de layer een bepaalde positie op het scherm of de pagina te geven.

[disjfa]

je kan ook de img file een class meegeven die de positie bepaald

en verdere uitleg... lees FoOL

[Maxonic]

Ja, snap ik. Maar dan is het toch niet mogelijk om plaatje 2 altijd op dezelfde positie als plaatje 1 te behouden, ongeacht wat er zich boven de plaatjes afspeelt. PLaatje 1 mag namelijk niet op de pagina gefixeerd zijn. Dit plaatje moet nl. altijd onder aan een tabel staan als footer ongeacht de lengte van de tabel.

[Verwijderd]

Kun je dat plaatje niet in een div zetten met een absolute waarde. En dan een tweede plaatje in een tweede div en die positie relatief opgeven ?

[disjfa]

of t word spelen met js en dan stel ik www.getElementById.com voor om ff te kijken

btw... als t plaatje er altijd op moet staan ..... wrom dan 2 plaatjes

[Maxonic]

Soz, ik krijg het toch echt niet voor elkaar. Het geheel gaat voor een footer van een forum dienen maar zover ik nu ben werkt het net zolang totdat er een volgende post is geplant want dan staan de plaatjes, of iig plaatje 2, op de verkeerde plek.

disjfa schreef op 27 september 2002 @ 01:12:
btw... als t plaatje er altijd op moet staan ..... wrom dan 2 plaatjes

Soms moet alleen plaatje 1 er staan en soms moet een gedeelte van plaatje 1 door een ander plaatje vervangen worden.

[Grom]

Heb je de oplossing van hans_knight al geprobeerd?
Of wat heb je dan gemaakt? code zou handig zijn.

[Maxonic]

code:

[img]"$url"[/img]
<script language="JavaScript" type="text/javascript">
<!--

var fx = document.footer.offsetTop;
var fy = document.footer.offsetLeft;

pic1.style.position('absolute;left: '+fx+'px;top:'+fy+'px;');

/--></script>
<div id='pic1'>
[plaatje hier]
</div>

Dit is iets wat volgens mij in de geode richting komt. 'k ben echter geen JS-held dus het zal wel om een stomme fout gaan.

[Grom]

In pic1.style.position('absolute;left: '+fx+'px;top:'+fy+'px;');
gebruik je fx voor left terwijl je hem in
var fx = document.footer.offsetTop;
voor top hebt gedeclareerd.

Probeer anders ook de oplossing van hans_knight eens.

[Maxonic]

Hmm, ok. Ik zal het iig omdraaien.
Maar dit is toch wat hans_knight bedoeld. Ik maak de position van het ene plaatje relative en de andere zet ik in een <div> waarvan de position absolute is. Ik gebruik alleen voor het eerste plaatje geen Div maar dat moet toch in princiepe niks uitmaken gezien ik daar alleen de coördinaten van wil weten en hij verder niet verplaatst hoeft te worden ofzo.

[Grom]

Hans_night bedoelde geneste divs en dat is imo ook nodig.
De positie van de binnenste div (ev alleen de img kan dan wel) relatief tov de eerste.
Het JS gedeelte heb je dan niet meer nodig.

[Maxonic]

Hmmz, ik wil niet zeuren ofzo maar ik zou het toch graag wel met een Javascriptje doen
Ik moet dadelijk nl. nog met een stukje php de size van een plaatje ophalen en deze bij de 'fx' optellen. Dit is zonder JS niet mogelijk ofwel?

[Grom]

Sorry maar nu begrijp ik niet meer hoe het resultaat er uit moet zien kun je dat eens beschrijven?

Dit is wat ik er van begrijp:
In de footer onder de laatste post (waarschijnlijk een tabel oid) moet een plaatje (1) komen.
Over dit plaatje (1) heen moet (ik dacht strak in de linkerbovenhoek van dit plaatje 1) plaatje 2 komen.

[Maxonic]

http://www.terrathreads.nl/tt/

Hier zie je aan de onderkant van het forum een footer met 3 knoppen. Als deze knoppen aktief zijn moet er dus een klein plaatje van het aktieve gedeelte overheen. (bijv. een lichtere 'post reply')
Het forum is echter themaonderhevig dus de positie van de knoopen ten opzichte van de footer kan van thema tot thema veranderen. Daardoor is er een stukje php nodig om uit te vogelen waar de lichtgevende tekst moet komen te staan.

Nu wil ik dus graag een JSpje maken dat de positie van de footer uitleest hierbij een getal dat in de database bij het thema opgegeven staat bijtelt en voor de daaropvolgende knoppen daar de lengte van de vorige plaatjes bij optelt.
Het wil mij dus alleen niet lukken om de positie van de footer uit te lezen en dmv. een JSpje een image die positie mee te geven.

Het is dus idd zoals je dacht. Als ik het plaatje nu alvast strak in de linkerbovenhoek kan krijgen en de mogelijkheid heb om later nog iets bij de positie op te tellen ben ik al erg blij.

Met themaonderhevigheid bedoel ik het volgende, hier, hier en hier moeten de donkere knoppen in de footer bijv. ook gaan werken.

[Grom]

Ok, in de footer staat dus een imagemap met coordinaten voor de hotspots ($usemap name="footer" ).
Die coordinaten kun je ook gebruiken voor het postioneren van de extra plaatjes met geneste div's.
Of is dit te kort door de bocht?

nb.
Ik zou zelf de footer opknippen zodat je klikbare img's kunt gebruiken maar da's mijn voorkeur.

[Maxonic]

Of is dit te kort door de bocht?

Beetje wel...
Die image map geeft coördinaten aan ten opzichte van het paatje zelf.
Stel dat in de image map geld x=10, y=20, dan geld voor de positie van de <div> dus:
x = x + document.footer.offsetLeft;
y = y + document.footer.offsetTop;

[Grom]

Niet als je ook positioneerd tov van dat plaatje zelf met een relatieve div tov van dat plaatje.

[Maxonic]

ok nu vat ik hem niet helemaal meer

Het is op deze manier dan toch niet mogelijk om bij de positie een andere hoeveelheid pixels (die ik uit een database trek) op te tellen. Zo ja, dan is het perfect maar ik zie niet hoe dat zou kunnen.

[Grom]

Dat is dan ook niet nodig.
In div1 plaats je de imagemap (plaatje1).
Die div heeft een nulpunt x=0 y=0, links boven.
In de div plaats je plaatje twee relatief tot dit nulpunt op de positie die de coordinaten van de hotspot aangeven.
Precies zoals de hotspot zelf geplaats wordt dus.

[Maxonic]

Het klinkt goed maar ik snap niet hoe dit eruit zou komen te zien. Heb je misschien een voorbeeldje?

[Grom]

Wil best iets voor je in elkaar knutselen maar bedacht nog dit:
Ik werk nooit met een imagemap en hotspots dus vraag me af of een hotspot nog werkt als je er een andere image overheen gooit.
Als dit nog werkt dan is een voorbeeldje geen probleem, zo niet dan zul je naar een onclick of href moeten gaan, ook geen probleem maar anders.

Nogmaals persoonlijk zou ik die imagemap al lang hebben opgeknipt.

[Maxonic]

Nogmaals persoonlijk zou ik die imagemap al lang hebben opgeknipt.

Ja, daar heb ik ook al aan gedacht maar dat leek me later niet echt verstandig gezien ik ook thema's heb waarbij het dan wel erg gecompliceerd wordt en waarbij het opgeven van coördinaten toch een stuk fijner is. Tis dus ff lastiger maar ik denk dat ik later van deze methode wel profijt zal hebben.

[Grom]

En hoe zit dat met een image over een hotspot van imagemap, werkt dat?
Ik kan me nl voorstellen dat dit niet meer werkt.

[Maxonic]

damn, ik heb het geprobeerd maar een hotspot werkt idd niet meer als er met absolute positioning een ander plaatje overheen wordt geplaatst.

[Grom]

Als de hotspots pas iets moeten kunnen doen als er het tweede plaatje overheen ligt dan is dit nog wel op te lossen. De imagemap vervalt dan. Alleen de coordinaten gebruik je nog voor het positioneren. Kan dit niet dan wordt het zeker opknippen.
Voorbeeld:
http://www.technowise.nl/footer2.html

Is alleen principe;
css kan beter,
geen plaatjes maar tekst gebruikt,
etc.

[Maxonic]

Sja, het is leuk bedacht maar opknippen of tekst gebruiken is toch niet wat ik zoek. Dat brengt in andere gevallen nl. nogal wat problemen met zich mee. Ik ga toch nog ff proberen wat te knutselen met de code uit de post van 27-9@18:18

[Grom]

Maxonic schreef op 28 september 2002 @ 11:43:
Sja, het is leuk bedacht maar opknippen of tekst gebruiken is toch niet wat ik zoek. Dat brengt in andere gevallen nl. nogal wat problemen met zich mee. Ik ga toch nog ff proberen wat te knutselen met de code uit de post van 27-9@18:18

1) ipv tekst kun je ook een plaatje gebruiken. ik had alleen geen zin er een te maken en gebruik daarom tekst als voorbeeld.
2) op welke manier je ook een plaatje over een hotspot in je imagemap legt je blijft hetzelfde probleem houden: de hotspot werkt niet meer.

[Maxonic]

Gevonden:

code:

<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript"><!--

 function setPos(object,x,y) {
   
   object.left = x;
   object.top = y;
 
 }
  
//--></SCRIPT>
</HEAD>
<BODY>
<!-- Diverse code hier /-->
[img]"<?=$footerurl?>"[/img]

<div id="pic1" style="position: absolute;">
    <a href="<?=$replyurl?>">
        [img]"<?=$pic1url?>"[/img]
    </a>
</div>

<SCRIPT LANGUAGE="JavaScript"><!--
 
 var isNC = (navigator.appName == "Netscape");
 var isNC5 = (isNC && parseInt(navigator.appVersion) > 4);
 
 var pic1 = (isNC) ? ( (isNC5) ? document.getElementById('pic1').style : document.dsec1 ) : document.all.pic1.style;
 
 var fx = document.footer.offsetTop + <?=$xWaarde?>;
 var fy = document.footer.offsetLeft + <?=$yWaarde?>;
 
 setPos(pic1,fx,fy);
 
//--></SCRIPT>

</BODY>
</HTML>

Zo werkt het appart en ik ga nu testen of het in het forum zelf ook werkt

[Maxonic]

Ok, ben er bijna, nog slechts 1 prob:
http://www.terrathreads.nl/tt/index.php?naam=

Dit komt doordat fx en fy 0 teruggeven.
Als ik ergens alert(fx); neerplant dan geeft deze 0 aan terwijl hij normaal op de testpagina wel de juiste waarde resulteerde. Kan dit komen doordat het plaatje in een tabel staat ofzo?

[Grom]

Ik denk het wel want de tabel is de parent van de img met name=footer.
Gebruik anders getElementById en geef de img een id ipv een name.

Ik blijf het een omslachtige methode vinden (js ipv css) om je elementen te positioneren, nofi.
Inmiddels heb ik mijn eerder voorbeeld aangepast met jouw images.
http://www.technowise.nl/footer2.html

[Grom]

Btw ik bedacht me net dat het ook kan komen omdat je img een relatieve positie heeft tov de td. De linkerbovenhoek is dan 0,0. Daarna plaats je de images absoluut dus in dit geval tov de linkerbovenhoek 0,0 van het window.

Nesten kan een oplossing zijn en dan ben je bijna zover als mijn voorbeeld

[Maxonic]

Ja, denk het ook want in de testpagina kan ik alles wel in een tabel zetten. Hoe los ik dit op?

www.terrathreads.nl/test.htm <== Hier werkt het nl wel...

[Grom]

Nesten van de imgs in de div of td zie mijn voorbeeld.
Die JS heb je dan ook niet meer nodig.
http://www.technowise.nl/footer2.html

[Maxonic]

Ja, maar dat is juist het hele punt. Die JS heb ik nodig. De positie van de buttons t.o.v. de footer is nl. een getal dat uit een database wordt getrokken. Dit omdat er meerdere thema's zijn en ik niet voor elk thema een appart CSS bestand wil hebben. Verder is je voorbeeld helemaal perfect en bruut, maar het bovenstaande is echt iets onmisbaars.

[Grom]

Gebruik dan die posities uit de database om dynamisch je css te bouwen dat is dan toch het zelfde

* Grom beseft dat dit allemaal eigenwijs kan overkomen dat css gehamer maar heeft de beste bedoelingen

[Maxonic]

Gebruik dan die posities uit de database om dynamisch je css te bouwen

Hmzz, daar het * Maxonic nog niet eens aan gedacht
Ik zal eens gaan kijken of dat lukt

[Maxonic]

* Grom Rules...

Het werkt, hartstikke bedankt joh!

[Grom]

Graag gedaan.