begin process at 2010 03 18 06:30:00
  Trouver un code source :
 
dans
 
Accueil > Forum > 

Javascript / DHTML / Ajax

 > 

CSS

 > 

Général

 > 

fausse popup


Derniers messages déposésPoser une question dans le forum ou lancer une discussion

fausse popup

mardi 27 novembre 2007 à 23:02:50 | fausse popup

macone59

Je cherche à faire une fausse popup. C'est à dire qu'au depart j'ai une img visible puis au sur vol de celle-ci une image apparait en plus grand.
Voici un code que j'ai recuperé et dons j'ai bidouiller pour avoir un resultat mais rien.


     <html>
     <head>
     <STYLE TYPE='text/css'>
     .popperlink { position:absolute; visibility:hidden }
     .bord-tabl-uniqmnt { border: thin ridge; }
     </style>
     </head>
     <body>
     <div class="popperlink" id="topdecklink"></div>
     <script>
     var domok = document.getElementById;
     if (domok)
     {
     skn = document.getElementById("topdecklink").style;
     if(navigator.appName.substring(0,3) == "Net")
     document.captureEvents(Event.MOUSEMOVE);
     document.onmousemove = get_mouse;
     }
     function poplink(cl,num)
     {
     var content = null;
   

     content =
     "<table cellpadding='0' cellspacing='0'"+
     " bgcolor='#999999' border='0'>"+
     "<tr><td style='color: #FFFFFF; "+
     "font-weight: bold'>"+
     " "+cl+" "+"</td></tr>"+
     "<tr><td>"+
     "<table width='100px' height='100px' cellpadding='2' "+
     "cellspacing='2' border='0'>"+
     "<tr><td style='text-align: center; "+
     "font-size: 9px; font-family:tahoma;'>"+
  
     "</table>";
   
     if (domok)
     {
     // Rajoute le contenu hérité
     document.getElementById("topdecklink").innerHTML = content;
   
     // Rend visible le contenu
     skn.visibility = "visible";
     }
     }
     function get_mouse(e)
     {
     var x = (navigator.appName.substring(0,3) == "Net") ? e.pageX : event.x+document.body.parentNode.scrollLeft;
     var y = (navigator.appName.substring(0,3) == "Net") ? e.pageY : event.y+document.body.parentNode.scrollTop;
     skn.left = x + 20;
     skn.top = y - 10;
     }
     function killlink()
     {
     if (domok) skn.visibility = "hidden";
     }
     </script>
     <table width="100" border="0" cellpadding="0" cellspacing="0" align="center">
     <tr>
     <a href="#" onMouseOver="poplink('Popup','1')" onMouseOut="killlink()">
 
     <h2><img src="../verbiese_web/images/fr/catalogue/produits_chimiques/bouteuil.jpg"></h2>
     </a>
     </tr>
     <tr><a href="#" onMouseOver="poplink('Popup','2')" onMouseOut="killlink()">
     <h2><img src="../verbiese_web/images/fr/catalogue/produits_chimiques/bouteuil.jpg"></h2>
     </a>
     </tr>
     </table>
     </body>
     </html>

C'est la premier fois que je teste les forums donc esperons que je trouve la réponse à ma question.
Merci d'avance et escuzé moi de l'écriture sms.
mercredi 28 novembre 2007 à 01:29:11 | Re : fausse popup

capoueidiablo

alala, quand je pense qu'on fait du code si sale et si compliqué alors qu'avec un peu de CSS c'est fait en un tour de main ...

un coup de visibility: hidden et un peu de :hover bien loclisé et le tour est joué ...

attention toutefois à la pseudo classe :hover qui ne fonctionne que sur les balises html de type <a href ...

pour voir une implementation de tout ca : [ Lien ] 
je l'ai créé à l'instant, il reste donc quelques petites modifs a apporter pour que se soit compatible à toutes les résolutions d'écrans ... :)


--=Capoueidiablo=--
mercredi 28 novembre 2007 à 16:47:10 | Re : fausse popup

XtremDuke

Si ca peut t'aider :

http://www.riatoolbox.com/2007/09/05/picshow-un-splasher-dimages-leger/
mercredi 28 novembre 2007 à 20:30:18 | Re : fausse popup

PetoleTeam

Membre Club
Bonjour,
j'y vais de ma contribution également...
a partir de  ta source et en éliminant l'inutile cela donne
<html>
<head>
<style type='text/css'>
.popperlink {
  position : absolute;
  visibility : hidden;
  left : 400px;
  top : 10px;
}
.table_image {
  height : 200px;
  width : 200px;
  border : 1px solid #80c0f0;
  background-color : #c0c0c0;
}
</style>
<script type="text/javascript">
//-------------------
function poplink( cl){
  var content = null;
  var Obj = document.getElementById("topdecklink");
  content = "<table class='table_image' cellpadding='0' cellspacing='0'"+
  "<tr><td valign='center' align='center' style='color: #FFFFFF;font-weight: bold'>" +cl +"<\/td><\/tr><\/table>";
  if( Obj){
    Obj.innerHTML = content;
    Obj.style.visibility = "visible";
  }
}
</script>
</head>
<body>
<div class="popperlink" id="topdecklink"></div>
<table width="100" border="0" cellpadding="0" cellspacing="0" _align="center">
  <tr><td>
    <a href="#" onmouseover="poplink('Image 1')">
      <h2><img src="../verbiese_web/images/fr/catalogue/produits_chimiques/bouteuil.jpg"></h2>
    </a>
  </td></tr>
  <tr><td>
    <a href="#" onmouseover="poplink('Image 2<br>Etc...')">
      <h2><img src="../verbiese_web/images/fr/catalogue/produits_chimiques/bouteuil.jpg"></h2>
    </a>
  </td></tr>
</table>
</body>
</html>


Attention dans ton code penses bien à fermer une balise ouverte, il y a tout plein d'erreur...
On est entre la solution de
capoueidiablo , légère et celle de XtremDuke bien plus lourde.
Tu peux d'inspirer de la source de
capoueidiablo pour utiliser plus de CSS.

Voilà tu as le choix...

;0)

mercredi 28 novembre 2007 à 21:41:13 | Re : fausse popup

macone59

Merci a tous pour vos réponses. Franchement j'y croyait pas à ses forum mais vous me prouver le contraire. Quel rapidité et efficacité. Encore merci
jeudi 29 novembre 2007 à 12:11:56 | Re : fausse popup

capoueidiablo

"de la réactivité de CodeS-SourceS tu t'étonnera"

bienvenu à toi!

--=Capoueidiablo=--


Cette discussion est classée dans : var, document, skn, if, domok


Répondre à ce message

Sujets en rapport avec ce message

au secours a tous [ par 999999 ] salut à tous j'ai un petit problème de javascript. Voila j'ai trouvé un script qui permet d'afficher un texte au passage de la souris sur un lien. Voi Player multi format sécuriter java & php [ par c2bomb ] bonjour a tous,je cherche a afficher mon player,dans une fenetre style popup,mais hélas je suis vraiment nulle en javascript...si quelq'un peut m'aide 2 menuS deroulants java dans une page [ par DEVLYNE ] Bonjour!Sachez que je suis uns très grande débutante mais j'ai un petit souci.J'utilise un logiciel gratuit: Coffee Cup DHTML menu pour faire mes menu Compilation conditionnelle. [ par A3nigma64 ] J'ai trouvé un script assez bien pour faire un compte à rebours mais voila lorsque je l'applique sur une de mes page web le compte à rebours ne s'affi Afficher texte avec X et Y [ par bshaka ] Bonjour à tous,j'ai trouvé sur le web cette fonction qui affiche date et heure à une position x et y, pour l'appeler, je fais :InitHorloge(265,56,"fon Affichier un texte avec la position X et Y [ par bshaka ] Bonjour à tous,j'ai trouvé sur le web cette fonction qui affiche date et heure à une position x et y, pour l'appeler, je fais :InitHorloge(265,56,"fon FORMULAIRE champs obligatoires boutons radio [ par ju0123456789 ] Bonjour,Pour mon site web, je suis en train de créer un formulaire de commande, et j'ai créé un script qui oblige l'utilisateur de rentrer les chamsp probleme incompatibilité IE-FF svp HELP !! [ par ju0123456789 ] Bonjour, depuis plusieurs jours, je mesuis pris la tête pour mon script de mon site web de commande en ligne, mais malheureusement il ne marche pas so Besoin d'aide sur une pop link ! [ par groseline ] bonjour à tous !!!  je suis en train de construire un site, et j'ai mis des infos-bulle sur des icones, ça marche impec, mon seul soucis, c'est que lo Affichage d'horloge [ par bshaka ] Bonjour à tous,J'ai trouvé cette fonction pour afficher l'horloge à une position X Y sur le net, sauf qu'elle n'affiche pas l'horloge à la bonne posit


Nos sponsors


Appels d'offres

Sondage...

Comparez les prix

CalendriCode

Mars 2010
LMMJVSD
1234567
891011121314
15161718192021
22232425262728
293031    

Consulter la suite du CalendriCode

Photothèque

 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils.
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 0,437 sec (3)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales