Soyez le premier à donner votre avis sur cette source.
Vue 28 165 fois - Téléchargée 3 467 fois
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>Fausse popup DHTML</title> <style type="text/css"> #windowContainer { position:absolute; top:10px; left:10px; background-color:#C0C0C0; border-style:solid; border-width:1px; border-top-color:#E0E0E0; border-left-color:#E0E0E0; width:300px; height:300px; } #windowContainerBorder1 { position:absolute; top:0px; left:0px; width:298px; height:298px; border-style:solid; border-width:1px; border-top-color:#FFFFFF; border-left-color:#FFFFFF; border-bottom-color:#808080; border-right-color:#808080; } #windowTitle { position:absolute; top:3px; left:3px; width:292px; height:18px; background-color:#000080; font-family:ms sans serif; font-size:8pt; padding-left:2px; font-weight:bold; color:#FFFFFF; cursor:default; vertical-align:middle; filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=1, StartColorStr='#000080', EndColorStr='#96C8FF'); } #controlBox { position:absolute; top:5px; left:243px; } body { background-color:#FFFFFF; } #contentArea { position:absolute; padding:5px; top:23px; left:3px; width:282px; height:250px; background-color:#FFFFFF; border-style:inset; border-width:2px; overflow:auto; } #resizeCapture { position:absolute; top:287px; left:286px; width:12px; height:12px; cursor:nw-resize; background-image:url("resizeArea.gif"); overflow: hidden; } </style> <script language="javascript" type="text/javascript"> var WIN_HEIGHT = 300; var WIN_WIDTH = 300; var WIN_TITLE = "- Informations"; var WIN_TOP = 10; var WIN_LEFT = 10; var y,x; var mDown = false; var mResize = false; var originalWidth = WIN_WIDTH; var originalHeight = WIN_HEIGHT; var originalTop = WIN_TOP; var originalLeft = WIN_LEFT; var isMaximized = false, isMinimized = false; function init() { if(document.all)document.body.style.height = "100%"; document.getElementById("windowContainer").style.height = WIN_HEIGHT; document.getElementById("windowContainer").style.width = WIN_WIDTH; document.getElementById("windowContainer").style.top = WIN_TOP; document.getElementById("windowContainer").style.left = WIN_LEFT; document.getElementById("windowTitle").innerHTML ="<img align=middle src=\"icon.gif\"> " + WIN_TITLE; // event handlers if(!document.all)document.captureEvents(Event.MOUSEMOVE | Event.MOUSEDOWN | Event.MOUSEUP); document.onmousedown=handleMouseDownEvents; document.onmousemove=handleMouseMoveEvents document.onmouseup=handleMouseUpEvents; document.getElementById("windowTitle").onmouseup = windowTitleMouseUp document.getElementById("windowTitle").onmousedown = windowTitleMouseDown; document.getElementById("resizeCapture").onmousedown = resizeCaptureOnMouseDown; } function resizeCaptureOnMouseDown(e) { mResize=true; captureClientXY(e); } function windowTitleMouseUp() { mDown = false; } function windowTitleMouseDown(e) { mDown=true; captureOffsetXY(e); } function initDrag(e) { if(!mDown)return; if(document.all) { x2 = window.event.clientX-(x+5); y2 = window.event.clientY-(y+5); } else { x2 = e.clientX - (x+5); y2 = e.clientY - (y+5); } document.getElementById("windowContainer").style.top = y2 + "px"; document.getElementById("windowContainer").style.left = x2 + "px"; originalLeft = x2; originalTop = y2; } function doResize(nX,nY) { nWidth = nX - x; nHeight = nY- y; cWidth = originalWidth; cHeight = originalHeight; cWidth+=nWidth; cHeight+=nHeight; if(cWidth<=75 || cHeight <= 75) return; document.getElementById("windowContainer").style.width = cWidth + "px"; document.getElementById("windowContainer").style.height = cHeight + "px"; //resize/move children document.getElementById("windowTitle").style.width = (cWidth -8) + "px"; document.getElementById("windowContainerBorder1").style.width = (cWidth - 2) + "px"; document.getElementById("windowContainerBorder1").style.height = (cHeight-2) + "px"; document.getElementById("contentArea").style.width = (cWidth-18) + "px"; document.getElementById("contentArea").style.height = (cHeight-50) + "px"; document.getElementById("resizeCapture").style.top = (cHeight-13) + "px"; document.getElementById("resizeCapture").style.left = (cWidth-13) + "px"; document.getElementById("controlBox").style.left = (cWidth - 57) + "px"; } function handleMouseUpEvents() { if(mDown) { mDown=false; return; } if(mResize) { mResize=false; document.body.style.cursor = "default"; originalWidth = parseInt(document.getElementById("windowContainer").style.width); originalHeight = parseInt(document.getElementById("windowContainer").style.height); } } function doClose() { document.getElementById("windowContainer").style.display = "none"; } function doMinimize() { if(!isMinimized) { markCoordinates(); document.getElementById("windowContainer").style.height = 24 + "px"; minTop = document.all?document.body.clientHeight:window.innerHeight; document.getElementById("windowContainer").style.top = (minTop-25) + "px"; document.getElementById("contentArea").style.display = "none"; document.getElementById("windowContainerBorder1").style.display = "none"; document.getElementById("resizeCapture").style.display = "none"; isMinimized = true; } else { document.getElementById("windowContainer").style.top = originalTop + "px"; document.getElementById("windowContainer").style.left = originalLeft + "px"; document.getElementById("windowContainer").style.height = originalHeight + "px"; document.getElementById("contentArea").style.display = "block"; document.getElementById("windowContainerBorder1").style.display = "block"; document.getElementById("resizeCapture").style.display = "block"; isMinimized = false; } } function doMaximize() { x=0;y=0; if(!isMaximized) { markCoordinates(); document.getElementById("windowContainer").style.top = 0; document.getElementById("windowContainer").style.left = 0; doResize(screen.width - originalWidth,screen.height - originalHeight); document.getElementById("contentArea").style.display = "block"; document.getElementById("windowContainerBorder1").style.display = "block"; document.getElementById("resizeCapture").style.display = "block"; isMaximized = true; } else { doResize(0,0); isMaximized = false; document.getElementById("windowContainer").style.top = originalTop + "px"; document.getElementById("windowContainer").style.left = originalLeft + "px"; } } function handleMouseDownEvents(e) { if(mResize) { document.body.style.cursor = "nw-resize"; } } function markCoordinates() { originalLeft = parseInt(document.getElementById("windowContainer").style.left); originalTop = parseInt(document.getElementById("windowContainer").style.top); } function handleMouseMoveEvents(e) { if(mDown) { initDrag(e); return; } if(mResize) { if(document.all) { doResize(window.event.clientX,window.event.clientY); } else { doResize(e.clientX,e.clientY); } } } function captureOffsetXY(e) { if(document.all) { x=window.event.offsetX; y=window.event.offsetY } else { x = e.pageX - e.clientX; y = e.pageY - e.clientY; } } function captureClientXY(e) { if(document.all) { x = window.event.clientX; y = window.event.clientY; } else { x = e.clientX; y = e.clientY; } } </script> <map name="ctrlBox"> <area alt="Minimize" title="Minimize" coords="1,0,16,15" href="javascript:doMinimize();"> <area alt="Maximize" title="Maximize" coords="16,0,34,16" href="javascript:doMaximize();"> <area alt="Close" title="Close" coords="33,0,53,16" href="javascript:doClose();""> </map> </head> <body onload="init();"> <div id="windowContainer" unselectable=on> <div id="windowContainerBorder1"></div> <div onSelect="return false" id="windowTitle"></div> <div id="controlBox"><img src="control_box.gif" width="52" height="15" border="0" usemap="#ctrlBox" /></div> <div id="contentArea"> <h1><u>Sites de référence :</u></h1> <table width="10" border="0"> <tr> <td>•</td> <td><a href="http://www.fitline-wellness2.info" target="_blank"><img src="../../../../../a_worldsoft/Clients/www.fitline-wellness2.info/Logo%20Fitline.jpg" width="100" height="63" border="0" /></a></td> </tr> </table> <table width="10" border="0"> <tr> <td>•</td> <td><a href="http://www.kv-architecture.ch" target="_blank"><img src="file:///C|/a_worldsoft/Clients/www.kv-architecture.ch/images/kv-architecture%20titre.gif" width="258" height="28" border="0" /></a></td> </tr> </table> <table width="214" border="0"> <tr> <td width="9" height="62">•</td> <td width="195"><p><strong><font color="#A27D2B" size="4" face="Verdana, Arial, Helvetica, sans-serif">Votre futur site</font></strong><br /> <a href="mailto:christian.deforel@gmx.ch">écrivez-moi pour plus de détails</a></p></td> </tr> </table> <p><font size="4"> </font> </p> </div> <div id="resizeCapture"></div> </div> </body> </html>
23 mars 2010 à 13:51
Je pense que ça va bien m'aider.
23 mars 2010 à 13:44
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Div caché à l'ouverture de la page</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript" language="JavaScript">
<!--
function ShowHide(dBlock, dImage)
{
if (dBlock.style.display == "none")
{
dBlock.style.display = "block";
dImage.src = "http://217.196.177.129/wcms/ftp/c/cdwebdesign.ws/siteimages/2410.gif";
}
else
{
dBlock.style.display = "none";
dImage.src = "http://217.196.177.129/wcms/ftp/c/cdwebdesign.ws/siteimages/2411.gif";
}
return;
}
//-->
</script>
</head>
[Javascript:ShowHide(DescA, ImageA); ouvrir/cacher] la
fausse popup.
<script language="javascript" type="text/javascript">
<!--
document.getElementById("essai").style.display (readCookie("essaiBox") 'inline') ? 'inline' : 'none';
// -->
</script>
<tr>
<td height="521"> C'est là que tu mets ta fausse popup
</td>
</tr>
</html>
Commentaire :
Pour les signes "+" et "-" je te conseille de les enregistrer et de les mettre à la racine de ton site et de ne pas employer les miens (../2410.gif et ../2411.gif dans le "head" et le "body") car si je change quelque chose sur mon site...
Il s'agit simplement d'un style pour le div qui le cache à l'ouverture de la page et l'affiche en cliquant sur le lien.
Voilà, j'espère ainsi t'avoir aidé.
Bonne prog.
23 mars 2010 à 10:57
étant novice dans la matière, j'ai pas trouvé où il fallait modifier le code. En fait, je voudrais que le popup apparaisse à l'aide d'un click sur un lien et non au démarrage de la page.
Quelqu'un pourrait-il m'aider ?
Merci.
13 mars 2007 à 19:29
mais je mis 7/10 pour le travail bravo
vraiment bienfait
26 févr. 2007 à 21:58
Vous n'êtes pas encore membre ?
inscrivez-vous, c'est gratuit et ça prend moins d'une minute !
Les membres obtiennent plus de réponses que les utilisateurs anonymes.
Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.
Le fait d'être membre vous permet d'avoir des options supplémentaires.