Fork me on GitHub

Rapport de message :*
 

Re: fonction java & xoops, est-ce possible?

Titre du sujet : Re: fonction java & xoops, est-ce possible?
par ancppa sur 08/08/2005 10:02:53

Bonjour,

En résumé et grâce à vos suggestions et pistes fournies, voici le CQFD pour installer un pop-up compatible avec tous les navigateurs, dont le fonctionnement est rapide et très pratique:


1. Installer le script suivant dans votre fichier theme.html (de votre theme).
A coller juste après <body>

Citation :

<!--***popup***-->
<div id="dhtmltooltip"></div>
<script type="text/javascript">
/***********************************************
* Cool DHTML tooltip script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/
var offsetxpoint=-60 //Customize x offset of tooltip
var offsetypoint=20 //Customize y offset of tooltip
var ie=document.all
var ns6=document.getElementById && !document.all
var enabletip=false
if (ie||ns6)
var tipobj=document.all? document.all["dhtmltooltip"] : document.getElementById? document.getElementById("dhtmltooltip") : ""
function ietruebody(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}
function ddrivetip(thetext, thecolor, thewidth){
if (ns6||ie){
if (typeof thewidth!="undefined") tipobj.style.width=thewidth+"px"
if (typeof thecolor!="undefined" && thecolor!="") tipobj.style.backgroundColor=thecolor
tipobj.innerHTML=thetext
enabletip=true
return false
}
}
function positiontip(e){
if (enabletip){
var curX=(ns6)?e.pageX : event.x+ietruebody().scrollLeft;
var curY=(ns6)?e.pageY : event.y+ietruebody().scrollTop;
//Find out how close the mouse is to the corner of the window
var rightedge=ie&&!window.opera? ietruebody().clientWidth-event.clientX-offsetxpoint : window.innerWidth-e.clientX-offsetxpoint-20
var bottomedge=ie&&!window.opera? ietruebody().clientHeight-event.clientY-offsetypoint : window.innerHeight-e.clientY-offsetypoint-20
var leftedge=(offsetxpoint<0)? offsetxpoint*(-1) : -1000
//if the horizontal distance isn't enough to accomodate the width of the context menu
if (rightedge<tipobj.offsetWidth)
//move the horizontal position of the menu to the left by it's width
tipobj.style.left=ie? ietruebody().scrollLeft+event.clientX-tipobj.offsetWidth+"px" : window.pageXOffset+e.clientX-tipobj.offsetWidth+"px"
else if (curX<leftedge)
tipobj.style.left="5px"
else
//position the horizontal position of the menu where the mouse is positioned
tipobj.style.left=curX+offsetxpoint+"px"
//same concept with the vertical position
if (bottomedge<tipobj.offsetHeight)
tipobj.style.top=ie? ietruebody().scrollTop+event.clientY-tipobj.offsetHeight-offsetypoint+"px" : window.pageYOffset+e.clientY-tipobj.offsetHeight-offsetypoint+"px"
else
tipobj.style.top=curY+offsetypoint+"px"
tipobj.style.visibility="visible"
}
}
function hideddrivetip(){
if (ns6||ie){
enabletip=false
tipobj.style.visibility="hidden"
tipobj.style.left="-1000px"
tipobj.style.backgroundColor=''
tipobj.style.width=''
}
}
document.onmousemove=positiontip
</script>
<!--***popup fin***-->



2. Toujours dans votre fichier theme.html, coller le code suivant dans <head>:
Citation :

<style type="text/css">
#dhtmltooltip{
position: absolute;
width: 150px;
border: 2px solid red;
padding: 2px;
background-color: lightyellow;
visibility: hidden;
z-index: 100;
/*Remove below line to remove shadow. Below line should always appear last within this CSS*/
filter: progid:DXImageTransform.Microsoft.Shadow(color=gray,direction=135);
}
</style>



3.Code à installer dans votre page avec votre image pour déclencher le pop-up:
Citation :

<a href="/modules/module1/" target="_self" onMouseOver="ddrivetip('Ici vous placez le texte qui sera lu sur le pop-up<br>Il est possible d'y ajouter quelques balises pour faciliter la lecture<b>Très pratique!</b>. le code couleur qui suit, c'est la couleur de fond du pop-up, le chiffre suivant règle la largeur','#FFFFE8', 300)";
onMouseout="hideddrivetip()">
<img src="http://www.monsite.com/images/mon_image.png" align="left" width="173" height="25" hspace="5"></a>



4. Prendre soin dans le cas où dans votre texte du pop-up vous utilisez une aposthrophe d'ajouter un backslash avant l'aposthrophe... à défaut de quoi vous aurez une erreur qui ne sera pas signalée mais qui rendra invisible le pop-up.
(Pour les puristes voici le texte du programmeur de ce script:
-----------------------------------------------------------------------------------------
WARNING!
One last important point: If your tooltip description contains apostrophes ('), be sure to backslash them first, as illustrated in the last example ("Yahoo\'s Site"), or an error will occur.
-----------------------------------------------------------------------------------------

Au total vous avez 3 bouts de code à installer :
2 dans le fichier theme.html
1 dans votre page où se place le ou les pop-up

Personnellement j'utilise WFCHANNEL pour la fab de mes pages et j'en suis totalement satisfait.
Pour voir ce pop-up en fonctionnement vous passez votre pointeur de souris sur les images:
ATEMPERA Livres de collection
&
LES PETITES ANNONCES
sur la home page de mon modeste site en construction:
http://atempera.com

Merci de votre aide, en espérant que ce post fera gagner du temps à ceux qui sont intéressés par l'apport des pop-up sur leurs sites xoops.

JPG
ancppa
Propulsé avec XOOPS | Graphisme adapté par Tatane, Grosdunord, Montuy337513

96 Personne(s) en ligne (72 Personne(s) connectée(s) sur Forum) | Utilisateur(s): 0 | Invité(s): 96 | Plus ...