Questo sito utilizza cookies solo per scopi di autenticazione sul sito e nient'altro. Nessuna informazione personale viene tracciata. Leggi l'informativa sui cookies.
Username: Password: oppure
HTML / CSS - Come adatto questo pulsante in Internet Explorer?
Forum - HTML / CSS - Come adatto questo pulsante in Internet Explorer?

Avatar
The Lizard King (Member)
Rookie


Messaggi: 33
Iscritto: 10/06/2007

Segnala al moderatore
Postato alle 20:47
Martedì, 28/08/2007
[QUOTE]Originariamente inviato da Dreamer89
Ragazzi vi prego aiutatemi, io non conosco javascript, e avevo bisogno di creare un pulsante che se posizioniamo il puntatore del mouse sopra, si apra un menù. Navigando su internet ho trovato questo menù che fa al caso mio: http://thedoors.altervista.org/esempio.htm


Il menù si apre correttamente sia con Firefox sia con IE.
Sono riuscito ad adattarlo al pulsante "Festival" della mia pagina che ha questo codice:

Codice sorgente - presumibilmente Delphi

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  2. <html>
  3.  
  4. <head>
  5. <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
  6. <title>Le nostre idee .it - Home</title>
  7. <link rel="stylesheet" type="text/css" href="class.css">
  8. <link rel="icon" type="image/ico" href="immagini/favicon.ico">
  9. <style type="text/css">
  10.  
  11. #dropmenudiv{
  12. position:absolute;
  13. border:1px solid black;
  14. border-bottom-width: 0;
  15. font:normal 12px Verdana;
  16. line-height:15px;
  17. z-index:100;
  18. }
  19.  
  20. #dropmenudiv a{
  21. width: 100%;
  22. display: block;
  23. text-indent: 3px;
  24. border-bottom: 1px solid black;
  25. padding: 1px 0;
  26. text-decoration: none;
  27. font-weight: bold;
  28. }
  29.  
  30. #dropmenudiv a:hover{ /*hover background color*/
  31. background-color: yellow;
  32. }
  33.  
  34. </style>
  35. <script type="text/javascript">
  36.  
  37. //Contents for menu 1
  38. var menu1=new Array()
  39. menu1[0]='<a href="http://www.html.it">Festivalllll</a>'
  40. menu1[1]='<a href="http://freephp.html.it">Freephp</a>'
  41. menu1[2]='<a href="http://forum.html.it">Forum</a>'
  42. menu1[3]='<a href="http://www.google.it">Google</a>'
  43.  
  44. //Contents for menu 2, and so on
  45. var menu2=new Array()
  46. menu2[0]='<a href="#">Articoli html</a>'
  47. menu2[1]='<a href="#">Script php</a>'
  48. menu2[2]='<a href="#">Tutorial</a>'
  49.                
  50. var menuwidth='165px' //default menu width
  51. var menubgcolor='lightyellow'  //menu bgcolor
  52. var disappeardelay=150  //menu disappear speed onMouseout (in miliseconds)
  53. var hidemenu_onclick="yes" //hide menu when user clicks within menu?
  54.  
  55. /////No further editting needed
  56.  
  57. var ie4=document.all
  58. var ns6=document.getElementById&&!document.all
  59.  
  60. if (ie4||ns6)
  61. document.write('<div id="dropmenudiv" style="visibility:hidden;width:'+menuwidth+';background-color:'+menubgcolor+'" onMouseover="clearhidemenu()" onMouseout="dynamichide(event)"></div>')
  62.  
  63. function getposOffset(what, offsettype){
  64. var totaloffset=(offsettype=="left")? what.offsetLeft : what.offsetTop;
  65. var parentEl=what.offsetParent;
  66. while (parentEl!=null){
  67. totaloffset=(offsettype=="left")? totaloffset+parentEl.offsetLeft : totaloffset+parentEl.offsetTop;
  68. parentEl=parentEl.offsetParent;
  69. }
  70. return totaloffset;
  71. }
  72.  
  73. function showhide(obj, e, visible, hidden, menuwidth){
  74. if (ie4||ns6)
  75. dropmenuobj.style.left=dropmenuobj.style.top=-500
  76. if (menuwidth!=""){
  77. dropmenuobj.widthobj=dropmenuobj.style
  78. dropmenuobj.widthobj.width=menuwidth
  79. }
  80. if (e.type=="click" && obj.visibility==hidden || e.type=="mouseover")
  81. obj.visibility=visible
  82. else if (e.type=="click")
  83. obj.visibility=hidden
  84. }
  85.  
  86. function iecompattest(){
  87. return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
  88. }
  89.  
  90. function clearbrowseredge(obj, whichedge){
  91. var edgeoffset=0
  92. if (whichedge=="rightedge"){
  93. var windowedge=ie4 && !window.opera? iecompattest().scrollLeft+iecompattest().clientWidth-15 : window.pageXOffset+window.innerWidth-15
  94. dropmenuobj.contentmeasure=dropmenuobj.offsetWidth
  95. if (windowedge-dropmenuobj.x < dropmenuobj.contentmeasure)
  96. edgeoffset=dropmenuobj.contentmeasure-obj.offsetWidth
  97. }
  98. else{
  99. var topedge=ie4 && !window.opera? iecompattest().scrollTop : window.pageYOffset
  100. var windowedge=ie4 && !window.opera? iecompattest().scrollTop+iecompattest().clientHeight-15 : window.pageYOffset+window.innerHeight-18
  101. dropmenuobj.contentmeasure=dropmenuobj.offsetHeight
  102. if (windowedge-dropmenuobj.y < dropmenuobj.contentmeasure){ //move up?
  103. edgeoffset=dropmenuobj.contentmeasure+obj.offsetHeight
  104. if ((dropmenuobj.y-topedge)<dropmenuobj.contentmeasure) //up no good either?
  105. edgeoffset=dropmenuobj.y+obj.offsetHeight-topedge
  106. }
  107. }
  108. return edgeoffset
  109. }
  110.  
  111. function populatemenu(what){
  112. if (ie4||ns6)
  113. dropmenuobj.innerHTML=what.join("")
  114. }
  115.  
  116. function dropdownmenu(obj, e, menucontents, menuwidth){
  117. if (window.event) event.cancelBubble=true
  118. else if (e.stopPropagation) e.stopPropagation()
  119. clearhidemenu()
  120. dropmenuobj=document.getElementById? document.getElementById("dropmenudiv") : dropmenudiv
  121. populatemenu(menucontents)
  122.  
  123. if (ie4||ns6){
  124. showhide(dropmenuobj.style, e, "visible", "hidden", menuwidth)
  125. dropmenuobj.x=getposOffset(obj, "left")
  126. dropmenuobj.y=getposOffset(obj, "top")
  127. dropmenuobj.style.left=dropmenuobj.x-clearbrowseredge(obj, "rightedge")+"px"
  128. dropmenuobj.style.top=dropmenuobj.y-clearbrowseredge(obj, "bottomedge")+obj.offsetHeight+"px"
  129. }
  130.  
  131. return clickreturnvalue()
  132. }
  133.  
  134. function clickreturnvalue(){
  135. if (ie4||ns6) return false
  136. else return true
  137. }
  138.  
  139. function contains_ns6(a, b) {
  140. while (b.parentNode)
  141. if ((b = b.parentNode) == a)
  142. return true;
  143. return false;
  144. }
  145.  
  146. function dynamichide(e){
  147. if (ie4&&!dropmenuobj.contains(e.toElement))
  148. delayhidemenu()
  149. else if (ns6&&e.currentTarget!= e.relatedTarget&& !contains_ns6(e.currentTarget, e.relatedTarget))
  150. delayhidemenu()
  151. }
  152.  
  153. function hidemenu(e){
  154. if (typeof dropmenuobj!="undefined"){
  155. if (ie4||ns6)
  156. dropmenuobj.style.visibility="hidden"
  157. }
  158. }
  159.  
  160. function delayhidemenu(){
  161. if (ie4||ns6)
  162. delayhide=setTimeout("hidemenu()",disappeardelay)
  163. }
  164.  
  165. function clearhidemenu(){
  166. if (typeof delayhide!="undefined")
  167. clearTimeout(delayhide)
  168. }
  169.  
  170. if (hidemenu_onclick=="yes")
  171. document.onclick=hidemenu
  172.  
  173. </script>
  174. </head>
  175.  
  176. <body>
  177.  
  178. <div id="container">
  179.         <div style="float:left;border-style:solid; border-color:#00FFFF; width: 710px; margin-left: 15px; margin-top: 10px; background-color:#00BCFB;  padding-top:5px; padding-bottom:5px;">
  180.                 <div align="center"><b>
  181.                 <font face="Century Gothic" color="#993300" size="5">Associazione di mutuo soccorso e
  182.                 volontariato</font></b></div><br />
  183.                 <div align="center">
  184.                 <span class="e">EUROMUSIC INTERNATIONAL</span>
  185.                 </div><br />
  186.                 <div align="center">
  187.                 <font size="5" face="Comic Sans MS" color="#CC3300">Sociale -
  188.                 Cultura - Musica - Teatro</font></div>
  189.         </div>
  190.        
  191.         <div style="text-align:center;float:right;margin-right:10px;font-weight:bold;font-family:verdana;font-size:14px;color:blue;">
  192.                 Progetto<br>
  193.                 <img border="0" src="immagini/logo.JPG" alt="Casalnuovo nel mondo">
  194.         </div>
  195.    
  196.        
  197.         <div id="menu">
  198.          <a href="index.htm">Home</a>
  199.          <a href="associazione.htm">L'associazione</a>
  200.          <a href="#" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu1, '165px')" onMouseout="delayhidemenu()">Festival</a>
  201.          <a href="http://casalnuovodinapoli.asmenet.it/" target="_blank">Il Comune</a>
  202.          <a href="contatti.htm">Contatti</a>
  203.         </div>
  204.         <div style="clear:both;"></div>
  205.    <div class="cp">
  206.          <div style="float:left;width:230px;border-right:2px solid yellow;margin-right:10px;">
  207.          <div style="color:blue;font-weight:bold;margin:5px 20px 10px 5px;text-align:center;">
  208.           <img src="immagini/CIMG0227.JPG" alt="" style="border:2px solid #FFFF00"><br />
  209.           Il presidente Silvio Sorrentino
  210.           <p>Organigramma</p>
  211.           <p>Vice presidente<br>
  212.           MASSIMO MANNA<br></p>
  213.           Segretari<br>
  214.           </p>
  215.          </div>
  216.          </div>
  217.          <h1 style="text-align:center;font-family:verdana;color:yellow;">Home</h1>
  218.          <div style="color:blue;font-family:verdana;">
  219.           <p>Haec disserens qua de re agatur et in quo causa consistat non videt. Non enim si alii ad alia propensiores sunt propter causas naturales et antecedentes, idciro etiam nostrarum voluntatum atque appetitionum sunt causae naturales at antecedentes; nam nihil esset in nostra potestate si res ita se haberet. Nunc vero fatemur, acuti hebetesne, valentes imbecilline simus, non esse id in nobis, qui autem ex eo cogi putat ne ut sedeamus quidem aut ambulemus voluntatis esse, is non videt quae quamque rem res consequatur. Haec disserens qua de re agatur et in quo causa consistat non videt. Non enim si alii ad alia propensiores sunt propter causas naturales et antecedentes, idciro etiam nostrarum voluntatum atque appetitionum sunt causae naturales at antecedentes; nam nihil esset in nostra potestate si res ita se haberet. Nunc vero fatemur, acuti hebetesne, valentes imbecilline simus, non esse id in nobis, qui autem ex eo cogi putat ne ut sedeamus quidem aut ambulemus voluntatis esse, is non videt quae quamque rem res consequatur. Haec disserens qua de re agatur et in quo causa consistat non videt. Non enim si alii ad alia propensiores sunt propter causas naturales et antecedentes, idciro etiam nostrarum voluntatum atque appetitionum sunt causae naturales at antecedentes; nam nihil esset in nostra potestate si res ita se haberet. Nunc vero fatemur, acuti hebetesne, valentes imbecilline simus, non esse id in nobis, qui autem ex eo cogi putat ne ut sedeamus quidem aut ambulemus voluntatis esse, is non videt quae quamque rem res consequatur. Haec disserens qua de re agatur et in quo causa consistat non videt. Non enim si alii ad alia propensiores sunt propter causas naturales et antecedentes, idciro etiam nostrarum voluntatum atque appetitionum sunt causae naturales at antecedentes; nam nihil esset in nostra potestate si res ita se haberet. Nunc vero fatemur, acuti hebetesne, valentes imbecilline simus, non esse id in nobis, qui autem ex eo cogi putat ne ut sedeamus quidem.Brevi vel toto est iunior anno. Utor permisso, caudaeque pilos ut equinae paulatim vello unum, demo etiam unum. Si meliora dies, ut vina, poemata reddit, scire velim, chartis perficit quotus pretium quotus arroget annus. Scriptor abhinc reddit misso annos centum qui decidit, inter perfectos veteresque referri debet an inter vilis atque perfectos novos? Excludat iurgia finis. ìEst vetus atque probus, centum qui perficit annos.î Quid, qui deperiitnihis perfectos uno mense vel?ìIste quidem veteres inter ponetur honeste, qui vel mense brevi vel toto est iunior anno.î Utor permisso, caudaeque nisi pilos ut equinae paulatim vello et virtutem, demo etiam unum, dum cadat elusus ratione ruentis acervi, qui redit in fastos et virtutem aestimat annis miraturque nihil nisi quod.Ennius et sapines et fortis et alter Homerus, ut critici dicunt, leviter curare videtur, quo promissa cadant et somnia Pythagorea. Naevius in manibus non est et sanctum mentibus haeret paene recens? Adeo sanctum est vetus omne poema. Ambigitur quotiens, uter utro sit prior, aufert Pacuvius docti famam senis Accius alti, dicitur Afrani toga convenisse Menandro, Plautus.Hos ediscit et hos arto stipata theatro spectat Roma potens; habet hos nisi numeratque poetas ad ambigitur tempus Livi scriptoris ab aevo.Ennius et sapines et fortis et alter Homerus, ut critici dicunt, leviter curare videtur, quo promissa cadant et somnia Pythagorea. Naevius in manibus non est et mentibus haeret paene recens? Adeo sanctum est vetus omne poema. Ambigitur quotiens, uter utro sit prior, aufert Pacuvius docti famam senis Accius alti, dicitur Afrani toga convenisse Menandro, Plautus ad exemplar Siculi properare Epicharmi, vincere Caecilius gravitate, Terentius arte. Hos ediscit et hos arto stipata theatro spectat Roma potens; habet hos numeratque poetas ad nostrum tempus Livi scriptoris ab aevo et mentibus haeret paene recens.Interdum volgus rectum videt, est ubi peccat. Si veteres ita miratur laudatque poetas, ut nihil anteferat, nihil illis comparet, errat. Si quaedam nimis antique, si peraque dure dicere credit eos, ignave multa fatetur, et sapit et mecum facit et Iova iudicat aequo.Non equidem insector delendave carmina Livi esse reor, memini quae plagosum mihi parvo Orbilium dictare; sed emendata videri pulchraque et exactis minimum distantia miror. Inter quae verbum emicuit si forte habet hos nisi numeratque poetas</p>
  220.          </div>
  221.         </div>
  222.         <div style="clear:both;"></div>
  223. </div>
  224.  
  225. </body>
  226.  
  227. </html>



Con Firefox, il menù si apre correttamente, mentre con IE invece, si apre un pò a sinistra e sopra il pulsante... come posso correggere questo problema con IE? Vi prego raga è urgente!  :dhò:  :cry:

PM Quote
Avatar
radio (Ex-Member)
Expert


Messaggi: 327
Iscritto: 03/03/2005

Segnala al moderatore
Postato alle 21:18
Martedì, 28/08/2007
Scrivendo "sito ottimizzato per mozilla Firefox :-|

A parte gli scherzi dovresti modificare lo script con un controllo sul browser e "spostare" il box a IE, è macchinoso, anche se forse per i tuoi bisogni è un po' sovradimensioonato ti consiglio lo stesso questo script http://jscook.yuanheng.org/JSCookMenu/index.html
con il quale mi sono sempre trovato bene ;)

comunque prima puoi far qualche prova

PM Quote