Autor Zpráva
xlifer
Profil
Snažím se udělat náhled obrázku po najetí myší nad textem. Poradíte?

Mám zatím představu, že bych to napsal nějak takto, ale nevím jak zajistit aby se box objevil na pozici slova, protože text se samozřejmě mění a není možné mu nastavit přesné souřadnice natvrdo, takže někam musí jit omezující position: relative nebo lze zajistit nějak lépé?

Předem díky za rady.

<div id="text">
V tomto textu se snažím na tomto <span onClick="zobraz_box()" onMouseOver="zobraz_box()" id="box-position">slově</span> zobrazit box s obrázkem.
</div>

<div id="box"  style="position: absolute; display: none;">
<img src="obrazek.jpg"...>
</div>

javascript:

zobraz_box()
{
var box = document.getElementById('box-position');
box.style.display = '';
box.style.top = ?
box.style.left = ?
}
Chamurappi
Profil
Reaguji na xlifera:
Dej to, co se má pozicovat, dovnitř toho, na čem to má být závislé a tomu něčemu nastav position: relative.
Propočítat souřadnice sice jde (a ohromné kvantum hotových skriptů to tak dělá), ale připadá mi to poněkud humpolácké.
xlifer
Profil
OK, díky za radu a proč přepočítávání souřadnic ti přijde humpolácké? :-) Je to podle tebe zbytečné nebo jak to myslíš?
xlifer
Profil
A kdybych chtěl ten blok s obrázkem mít pouze jednou a vždy naplnit přes javascript innerHTML a následně zobrazit na dané pozici odkazu (myši), tak by to šlo taky?
Chamurappi
Profil
Reaguji na xlifera:
Je to podle tebe zbytečné nebo jak to myslíš?
Pokud na sobě prvky stránky mají vizuálně záviset a jazyk stylopisů nedovoluje tuto závislost vyjádřit nezávisle na stromové struktuře (což v tomto případě CSS nedovoluje), je jednodušší změnit stromovou strukturu, než závislost pouze imitovat přepočítáváním souřadnic v rámci stránky. Což neznamená, že musíš měnit HTML — takovou změnu struktury může také udělat JavaScript, viz metody appendChild, insertBefore.

A kdybych […] tak by to šlo taky?
Šlo. Můžeš ho v rámci DOMu klidně stěhovat…

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