visitor (0 QPoints)
  • FR
  • EN
  • NL
  • DE
  • ES
315 experts, 1193 registered users, 1659 questions already answered
European Experts Exchange, the very best site for high-quality IT solutions

New Improved Search!

 


05/10/2011 1h30 : Steve Jobs is dead, the father of Apple ][ is gone, we are all orphaned.

Languages :: DHTML, JScript :: what is the simpliest way of creating link mouseover popups in DHTML / javascript ?
By: Bernard France  Date: 12/07/2006 09:33:48  English French  Points: 40 Status: Answered
Quality : Excellent
Je veux pouvoir construire des liens avec ou sans image dedans, qui font apparaître des popups (via DIV et display=...) lorsque survolés.

I want to put links or images (or both, the first containing the second) and have popups shown when hovering on them, and of course closing when cursor out of focus.

this is like an "infobulle", but I need it on images in links also, and I didn't find "the" solution on google so far ;-)

merci, thanks
By: VGR Date: 12/07/2006 10:23:25 French English  Type : Answer
Ok. I found a nice tutorial (as usual) at

As the javascript par was poorly written and inadapted to my case, I had to rewrite it.

The necessary files are so small that I will copy-paste them in here.

First, and the end of your HTML output, do something like this :

<script language="JavaScript" type="text/javascript" src="popup.js"></script> </body> </html>



The contents of this popup.js file are :

<!-- //Michel DEBOOM 06/2005 //VGR11072006 MOD pour DIV imbriqués, IMG incluse et noms des classes CSS var gk=window.Event?1:0; // navigateurs Gecko ou IE var D=document; var popup=encours=0; function ctrl(e) { var de=!D.documentElement.clientWidth?D.body:D.documentElement; // IE6 var sx=gk?pageXOffset:de.scrollLeft; //scroll h var sy=gk?pageYOffset:de.scrollTop; //scroll v var x=gk?e.pageX:event.clientX+sx; //curseur x var y=gk?e.pageY:event.clientY+sy; //curseur y var el=gk?e.target:event.srcElement; if (!el.tagName) el=el.parentNode; // noeud #text if (el.className == 'poplink') { //VGR11072006 MOD adapté au cas de DIV imbriqués //beware we are in central = left:204px; //and below container/header = height 150px // + 1% de marge à gauche et 10px en haut, etc x=x-204-50; y=y-150-30; //VGR MOD aussi mon cas d'une IMG même classe dans le A if (el.parentNode.className == 'poplink') el=el.parentNode; //EoMod //dump_var(el); //alert("sx="+sx+" x="+(gk?e.pageX:event.clientX)+" sy="+sy+" y="+(gk?e.pageY:event.clientY)); popup = D.getElementById(el.href.substring(el.href.lastIndexOf('#') + 1)).style; if (popup!=encours) { // seulement si changement encours.display='none'; with (popup) { display="block"; left=x+'px'; top=y+10+'px'; } encours=popup; } } else { encours.display='none'; encours=0; } } D.onmousemove=ctrl; //VGR11072006 DEL useless line write(''); //-->



Next, code your links like this :
(you need the id of the links to be '#pop{somethingunique}' and both the link and the image to have the class 'poplink'.

<a href='#pop{$locid}' class='poplink'><img src='images/yourname.gif' alt='See' OnClick='return false;' width='15' class='poplink'></a>



Then, the CSS part is very simple :

.newpopup { position: absolute; display:none; width: 20em; border: 3px double black; background: #f5f5dc; z-index: 500; font-size: 80%; } .newpopup p { margin: 0 0.3em; } .newpopup h1 { font-size: 110%; margin: 0 0 0.5em 0; border-bottom: 1px solid black; background-color: white; color: black; text-align: center; } .poplink { text-decoration: none; border: none; }



Et voila, ça marche :D

à+
By: VGR Date: 12/07/2006 10:25:14 English  Type : Comment
Sorry, I forgot the DIV themselves ;-)

You have to generate in your HTML flow DIVs like this :

<div id="pop{$locid}" class="newpopup"> somecontents </div>


Do register to be able to answer

©2010 These pages are served without commercial sponsorship. (No popup ads, etc...). Bandwidth abuse increases hosting cost forcing sponsorship or shutdown. This server aggressively defends against automated copying for any reason including offline viewing, duplication, etc... Please respect this requirement and DO NOT RIP THIS SITE.
Please DO link to this page! Post to Twitter Post to Plurk Post to Yahoo Buzz Post to Delicious Post to Digg Post to Facebook Post to MySpace Post to Ping.fm Post to Reddit Post to StumbleUpon

EContact
browser fav
page generated in 290.071010 milliseconds

Why Google AdSense ads ?
compteur
 Ranking-Hits PageRank for this page