Franc83

Boîtes cachées

13-07-2008

Des Boîtes cachées par javascript

Pour expliquer un mot, montrer un code, ouvrir un moteur de recherche, voici un script facile et très pratique, paramétrable et automatique

Exemples d'utilisation :

Recherchez...

Recherchez sur Goggle

Fermer

Humour...

Fermer

Voir le javascript

Voici le javascript qui gère ces boîtes :

<script type="text/javascript">

/***********************************************
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/

function getposOffset(overlay, offsettype){
var totaloffset=(offsettype=="left")? overlay.offsetLeft : overlay.offsetTop;
var parentEl=overlay.offsetParent;
while (parentEl!=null){
totaloffset=(offsettype=="left")? totaloffset+parentEl.offsetLeft : totaloffset+parentEl.offsetTop;
parentEl=parentEl.offsetParent;
}
return totaloffset;
}

function overlay(curobj, subobjstr, opt_position){
if (document.getElementById){
var subobj=document.getElementById(subobjstr)
subobj.style.display=(subobj.style.display!="block")? "block" : "none"
var xpos=getposOffset(curobj, "left")+((typeof opt_position!="undefined" && opt_position.indexOf("right")!=-1)? -(subobj.offsetWidth-curobj.offsetWidth) : 0)
var ypos=getposOffset(curobj, "top")+((typeof opt_position!="undefined" && opt_position.indexOf("bottom")!=-1)? curobj.offsetHeight : 0)
subobj.style.left=xpos+"px"
subobj.style.top=ypos+"px"
return false
}
else
return true
}

function overlayclose(subobj){
document.getElementById(subobj).style.display="none"
}
</script>

Fermer

Le code html à utiliser :

<p ><b><a href="#nogo" onClick="return overlay(this, 'subcontent2', 'bottom')">Voir le javascript</a></b><br />
</p>
<DIV id="subcontent2" style="position:absolute; display:none; border: 1px; background-color: #CCCCCC; width: 400px; height: 400px; padding: 10px">
<p>Votre texte ici, aussi long que vous voulez</p>
<p align="right"> <a href="#nogo" onClick="overlayclose('subcontent2'); return false">Fermer</a></p>
</DIV>

Chaque nouvelle boîte devra porter un "subcontentx", avec le même numéro référent dans le href du lien de base et dans l'id du div attaché à ce lien. On peut alors en placer autant que l'on veut sur la page, en les positionnant à l'aide du css. Ansi en mettant des padding au <p>, ou en l'alignant centre ou droite, on le repoussera vers le centre de la page, ou à droite.

Créateur de l'article

ALBIDOCHON

Fermer

Dans le même esprit

Bulles d'aide

FAQ cachée

Texte Tremblant

Objets draguables

Texte choc

Texte Fader

Texte Feu

Texte Glossy

Texte Glossy 2

Texte Matrix

Texte Néon

Titre Waves

Texte Mitraillette

Texte Multicolore

Texte Waves

Texte Spirale

Gradient coloré

Zoom Texte

Citez cet article

Commenter cet article
Commenter
Les messages comportant des attaques verbales contre les personnes seront supprimés.
Vous pouvez renouveler le code de sécurité en appliquant un rafraîchissement à votre navigateur.
Appliquer cette méthode de rafraîchissement si vous avez entré un mauvais code de sécurité.
Nom
E-mail
Site web
Titre
BBCode:
Commentaire

Code:*
Je désire être prévenu par mail des commentaires qui suivront
Powered by AkoComment Tweaked Special Edition v.1.4.6
AkoComment © Copyright 2004 by Arthur Konze - www.mamboportal.com
All right reserved