Simpele pop up met javascript of html

[spicy]

Ik heb een Joomla Site Waarin ik in een aantal artikelen een link wil hebben <a href../.. nou

Als bezoekers over de link <lees meer> gaan bijv verschijnt het pop up dus niet click en dan opent een appart venster

Graag advies

 

[JeroenE]

Wil je de code hier eens posten van de pagina waar die link <lees meer> en die pop-up in staan? Dan kunnen we actief helpen zoeken naar wat er fout loopt. Nu hebben we er alleen maar het raden naar...

 

[spicy]

Beste

Er is geen fout ik wil weten hoe ik zo'n popupscherm bij een link kan plaatsen als erover heen gescrolt wordt dat er dat een popup verschijnt

Nu heb ik alleen maar popups gevonden die in een apart venster geopend worden, dat is niet gebruikersvriendelijk

 

[JeroenE]

Je bedoelt dan eigenlijk dat die zogenaamde pop-up moet geïntegreerd worden in de pagina?
Da's nie zo moeilijk hoor.
Hier volgt een script met de nodige uitleg dat ik ooit zelf maakte om dit te verkrijgen.

Zet het volgende in de css van jouw pagina:

#popupdiv1 {
position:absolute;
visibility:hidden;
z-index:2;
}
#popupdiv2 {
position:absolute;
visibility:hidden;
z-index:2;
}
#popupdiv3 {
position:absolute;
visibility:hidden;
z-index:2;
}

Zet het volgende in het javascript van jouw pagina:

[JS]function showhidepopup(sdiv,sshow) {
var nmousex = window.event.x;
var nmousey = window.event.y;
sdiv.style.visibility = sshow;
sdiv.style.left = (nmousex > screen.width / 2) ? nmousex - 350 : nmousex - 200;
sdiv.style.top = (nmousey > screen.height / 2) ? nmousey - 150 : nmousey - 45;
};[/JS]

Zet het volgende in de body van jouw pagina:

<div id="popupdiv1">Uitleg 1</div>
<div id="popupdiv2">Uitleg 2</div>
<div id="popupdiv3">Uitleg 3</div>
<div id="link1" onMouseMove="showhidepopup('popupdiv1','visible');" onMouseOut="showhidepopup('popupdiv1','hidden');>Link 1</div>
<div id="link2" onMouseMove="showhidepopup('popupdiv2','visible');" onMouseOut="showhidepopup('popupdiv2','hidden');>Link 2</div>
<div id="link3" onMouseMove="showhidepopup('popupdiv3','visible');" onMouseOut="showhidepopup('popupdiv3','hidden');>Link 3</div>

Als je nu met de muis over een "link" beweegt, zal de uitleg meebewegen met de muis, tot je met de muis van de link weggaat.

 

[Robin S]

Ik heb ook nog een voorbeeldje voor je
http://robins.awardspace.com/helpmij/hoverPopup/
Je kun hier nog iets in je 'popup' aanklikken, maar 't ding verdwijnt als de muis van de link of de popup gaat.
(Voor de duidelijkheid: alleen Link 1 hoort iets te doen ) Kijk ook nog even naar cross-browser compatibiliteit, want in IE heeft het event-object volgens mij geen pageX en pageY-eigenschappen.

 

[csshunter]

Hoi spicy,
Hoe je het in Joomla moet frommelen, weet ik niet, maar je zou een pure css-popup kunnen maken. Die werkt ook als javascript uit staat (of als de browser geen javascript kent).
Als volgt:

...
<p class="more">Lees meer ...
	<span>Dit is de popup-box met wat er meer te lezen is.</span>
</p>

• Voorbeeld: bliksekaters.nl/tests/text-pop-up.htm
  In de broncode daarvan staat de benodigde css.
• Er moeten nog wel wat dingetjes bij voor een goede toegankelijkheid voor pure text-browsers en voor voorleesbrowsers, die geen css kennen.

Met vriendelijke groet,
CSShunter

Hé, bij het verzenden zie ik dat ik reactie-voorgangers heb.

 

[csshunter]

@Robin S: inderdaad, in IE7 werkt het niet. Met clientX en clientY zou het goed moeten gaan (quirksmode).
@JeroenE: omgekeerd, window.event.x en window.event.y zijn IE-only.
@CSShunter: FF, IE7, Chrome, Opera en Safari akkoord. - Alleen jammer dat de server er plots uit schijnt te liggen.

 

[csshunter]

Update: m'n provider heeft z'n zaakjes weer op orde.
Site is weer in de lucht en de link bliksekaters.nl/tests/text-pop-up.htm werkt weer.

 

[spicy]

Precies wat ik bedoelde CSS Hunter

Hartstikke bedankt voor je hulp

Wat joomla betreft kan je in elk article een volledige html pagina plaatsen
ik vrees dat dat download tijd slokt maar ik heb slechte ervaring met index.php of de css wijzigen

Dan maar op " de niet zo " Manier

Hartelijk dank