Anzeige

Java Script Menübalken...

Java Script Menübalken... | PSD-Tutorials.de

Erstellt von GariZZo, 07.01.2011.

  1. GariZZo

    GariZZo Noch nicht viel geschrieben

    Dabei seit:
    25.07.2005
    Beiträge:
    43
    Java Script Menübalken...
    Thema müsste heissen Java-Script Scrollmenü

    Hallo zusammen,

    ich habe zwar ein tutorial für mein Problem gefunden, jedoch funktioniert das ganze noch nicht, und deshalb hoffe ich, dass ihr mir helfen könnt.

    Ich möchte quasi diese Funktion:
    Create a Scrolling Menu: Result

    und hab auch schritt für schritt das tutorial verfolgt.

    Dennoch klappt es nicht wie ich es will: Werbeagentur Vision First - Main // Hamburg, Germany

    Es scrollt nicht (geschweige, dass ich die Bilder nicht zentriert kriege)...

    Ausserdem verweisst mich Dreamweaver, dass im allerletzten Code ein Fehler ist.
    und zwar in der zeile:
    Code (Text):
    1. var tooltip = $('<div class="sc_menu_tooltip"></div>')

    Der gesammte html Code:
    Code (Text):
    1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    2. <html xmlns="http://www.w3.org/1999/xhtml">
    3. <head>
    4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    5. <title>Werbeagentur Vision First - Main  // Hamburg, Germany</title>
    6. <style type="text/css">
    7. #Accordion1 .AccordionPanel .AccordionPanelTab strong {
    8.     font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
    9.     color: #aaf000;
    10. }
    11. #Accordion2 .AccordionPanel.AccordionPanelOpen .AccordionPanelContent table tr td {
    12.     font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
    13.     font-size: 14px;
    14. }
    15. .table2 {
    16.     background-image: url(bilder/images/3.png);
    17.     background-repeat: no-repeat;
    18. }
    19. #Accordion1 .AccordionPanel.AccordionPanelOpen .AccordionPanelContent table tr td {
    20.     font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
    21.     font-size: 14px;
    22.     text-align: right;
    23. }
    24. body p {
    25.     font-family: Arial, Helvetica, sans-serif;
    26. }
    27. body p {
    28.     font-size: 10px;
    29. }
    30. body p {
    31.     font-weight: bold;
    32. }
    33. body p {
    34.     font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
    35. }
    36. body p {
    37.     font-family: Arial, Helvetica, sans-serif;
    38. }
    39. body p {
    40.     font-size: 12px;
    41. }
    42. body p {
    43.     font-size: 10px;
    44. }
    45.  
    46.  
    47.  
    48. div.sc_menu_wrapper {
    49.   position: relative;
    50.   height: 250px;
    51.   /* Make bigger than a photo, because we need a place for a scroll-bar. */
    52.   width: 200px;
    53.  
    54.   margin-top: 30px;
    55.   overflow: auto;
    56. }
    57. div.sc_menu {
    58.   padding: 15px 0;
    59. }
    60. .sc_menu a {
    61.   display:block;
    62.   margin-bottom: 1px;
    63.   width: 155px;
    64.  
    65.   border: 2px rgb(79, 79, 79) solid;
    66.   -webkit-border-radius: 4px;
    67.   -moz-border-radius: 4px;
    68.  
    69.   /* When image support is turned off */
    70.   color: #fd7b2d;
    71.   background: rgb(79, 79, 79);  
    72. }
    73. .sc_menu a:hover {
    74.   border-color: rgb(253, 123, 45);
    75.   border-style:solid;
    76. }
    77. .sc_menu img {
    78.   display: block;
    79.   border: none;
    80. }
    81.  
    82. /* Styling tooltip */
    83. .sc_menu_tooltip {
    84.   display: block;
    85.   position: absolute;
    86.  
    87.   padding: 6px;
    88.   font-size: 12px;  
    89.   color: #fff;
    90.  
    91.   -webkit-border-radius: 4px;
    92.   -moz-border-radius: 4px;
    93.  
    94.   border: 1px solid rgb(79, 79, 79);
    95.   background: rgb(0, 0, 0);
    96.   /* Make background a bit transparent for browsers that support rgba */    
    97.   background: rgba(0, 0, 0, 0.5);
    98. }
    99.  
    100.  
    101.  
    102. .table3 {
    103.     background-image: url(bilder/images/iamges_input/images/content/page_slices_content_20.jpg);
    104.     background-repeat: no-repeat;
    105. }
    106. </style>
    107. <script type="text/javascript">
    108. function MM_swapImgRestore() { //v3.0
    109.   var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
    110. }
    111. function MM_preloadImages() { //v3.0
    112.   var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    113.     var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    114.     if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
    115. }
    116.  
    117. function MM_findObj(n, d) { //v4.01
    118.   var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    119.     d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
    120.   if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
    121.   for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
    122.   if(!x && d.getElementById) x=d.getElementById(n); return x;
    123. }
    124.  
    125. function MM_swapImage() { //v3.0
    126.   var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
    127.    if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
    128. }
    129. </script>
    130. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js" type="text/javascript"></script>
    131. <script src="film_stylesheet.js" type="text/javascript"></script>
    132. </head>
    133.  
    134. <body onload="MM_preloadImages('bilder/images/iamges_input/images/buttons_06.png','bilder/images/iamges_input/images/buttons_08.png','bilder/images/iamges_input/images/buttons_10.png','bilder/images/iamges_input/images/buttons_12.png','bilder/images/iamges_input/images/content/page_slices_content_48.jpg','bilder/images/iamges_input/images/content/page_slices_content_50.jpg','bilder/images/iamges_input/images/content/page_slices_content_52.jpg')">
    135. <div align="center">
    136.   <table width="1075" height="790" border="0" cellspacing="0" cellpadding="0">
    137.   <tr>
    138.     <td><table width="100%" border="0" cellspacing="0" cellpadding="0">
    139.       <tr>
    140.         <td height="117" colspan="11"><img src="bilder/images/iamges_input/images/input_01.png" width="1075" height="117" /></td>
    141.         </tr>
    142.       <tr>
    143.         <td width="132" height="113" rowspan="3"><img src="bilder/images/iamges_input/images/input_02.png" width="132" height="113" /></td>
    144.         <td width="122" height="113" rowspan="3"><img src="bilder/images/iamges_input/images/input_03.png" width="122" height="113" /></td>
    145.         <td height="65" colspan="9"><img src="bilder/images/iamges_input/images/input_04.png" width="821" height="65" /></td>
    146.         </tr>
    147.       <tr>
    148.         <td width="328" height="48" rowspan="2"><img src="bilder/images/iamges_input/images/input_05.png" width="328" height="48" /></td>
    149.         <td width="34"><img src="bilder/images/iamges_input/images/buttons_06.png" width="34" height="17" /></td>
    150.         <td width="7"><img src="bilder/images/iamges_input/images/input_07.png" width="7" height="17" /></td>
    151.         <td width="113"><a href="kommunikation.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image15','','bilder/images/iamges_input/images/buttons_08.png',1)"><img src="bilder/images/iamges_input/images/input_08.png" name="Image15" width="113" height="17" border="0" id="Image15" /></a></td>
    152.         <td width="8"><img src="bilder/images/iamges_input/images/input_09.png" width="8" height="17" /></td>
    153.         <td width="80" height="17"><a href="fotografie.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image16','','bilder/images/iamges_input/images/buttons_10.png',1)"><img src="bilder/images/iamges_input/images/input_10.png" name="Image16" width="80" height="17" border="0" id="Image16" /></a></td>
    154.         <td width="8" height="17"><img src="bilder/images/iamges_input/images/input_11.png" width="8" height="17" /></td>
    155.         <td width="60" height="17"><a href="kontakt.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image17','','bilder/images/iamges_input/images/buttons_12.png',1)"><img src="bilder/images/iamges_input/images/input_12.png" name="Image17" width="60" height="17" border="0" id="Image17" /></a></td>
    156.         <td width="183" height="48" rowspan="2"><img src="bilder/images/iamges_input/images/input_13.png" alt="" width="183" height="48" /></td>
    157.       </tr>
    158.       <tr>
    159.         <td height="31" colspan="7"><img src="bilder/images/iamges_input/images/content/page_slices_content_14.png" width="310" height="31" /></td>
    160.         </tr>
    161.       <tr>
    162.         <td height="298" colspan="11"><table width="100%" border="0" cellspacing="0" cellpadding="0">
    163.           <tr>
    164.             <td height="50" colspan="12"><table width="100%" border="0" cellspacing="0" cellpadding="0">
    165.               <tr>
    166.                 <td width="1075" height="50"><img src="bilder/images/iamges_input/images/content/page_slices_content_15.jpg" width="1075" height="48" /></td>
    167.               </tr>
    168.             </table></td>
    169.           </tr>
    170.           <tr>
    171.             <td width="104" height="330" rowspan="5">&nbsp;</td>
    172.             <td width="160" height="330" rowspan="5" class="table3"><div class="sc_menu_wrapper">
    173.   <div class="sc_menu">
    174.     <a title="Menu" href="#"><img src="bilder/1.jpg" alt="Menu"/ align="middle"></a>
    175.     <a title="Navigation" href="#"><img src="bilder/1.jpg" alt="Navigation"/></a>
    176.     <a title="jQuery" href="#"><img src="bilder/1.jpg" alt="jQuery"/></a>        
    177.     <a title="CSS" href="#"><img src="bilder/1.jpg" alt="CSS"/></a>
    178.     <a title="Vertical" href="#"><img src="bilder/1.jpg" alt="Vertical"/></a>
    179.     <a title="Menu" href="#"><img src="bilder/1.jpg" alt="Menu"/></a>
    180.     <a title="Navigation" href="#"><img src="bilder/1.jpg" alt="Navigation"/></a>    
    181.   </div>
    182. </div>
    183. </td>
    184.             <td width="58" rowspan="5">&nbsp;</td>
    185.             <td width="154" height="86">&nbsp;</td>
    186.             <td width="15" height="86">&nbsp;</td>
    187.             <td width="154" height="86">&nbsp;</td>
    188.             <td width="15" height="86">&nbsp;</td>
    189.             <td width="154" height="86">&nbsp;</td>
    190.             <td width="14" height="86">&nbsp;</td>
    191.             <td width="154" height="88">&nbsp;</td>
    192.             <td width="14">&nbsp;</td>
    193.             <td width="79">&nbsp;</td>
    194.             </tr>
    195.           <tr>
    196.             <td height="35" colspan="7">&nbsp;</td>
    197.             <td width="14" height="35">&nbsp;</td>
    198.             <td width="79" height="35">&nbsp;</td>
    199.             </tr>
    200.           <tr>
    201.             <td width="154" height="86">&nbsp;</td>
    202.             <td height="86">&nbsp;</td>
    203.             <td width="154" height="86">&nbsp;</td>
    204.             <td height="86">&nbsp;</td>
    205.             <td height="86">&nbsp;</td>
    206.             <td height="86">&nbsp;</td>
    207.             <td width="154" height="86">&nbsp;</td>
    208.             <td width="14" height="86">&nbsp;</td>
    209.             <td width="79" height="86">&nbsp;</td>
    210.             </tr>
    211.           <tr>
    212.             <td height="35" colspan="7">&nbsp;</td>
    213.             <td width="14" height="35">&nbsp;</td>
    214.             <td width="79" height="35">&nbsp;</td>
    215.             </tr>
    216.           <tr>
    217.             <td width="154" height="86">&nbsp;</td>
    218.             <td height="86">&nbsp;</td>
    219.             <td height="86">&nbsp;</td>
    220.             <td height="86">&nbsp;</td>
    221.             <td height="86">&nbsp;</td>
    222.             <td height="86">&nbsp;</td>
    223.             <td width="154" height="86">&nbsp;</td>
    224.             <td width="14" height="86">&nbsp;</td>
    225.             <td width="79" height="86">&nbsp;</td>
    226.             </tr>
    227.         </table></td>
    228.         </tr>
    229.       <tr>
    230.         <td height="116" colspan="11"><table width="100%" border="0" cellspacing="0" cellpadding="0">
    231.           <tr>
    232.             <td width="1075" height="116"><table width="100%" border="0" cellspacing="0" cellpadding="0">
    233.               <tr>
    234.                 <td width="322" height="116" rowspan="3">&nbsp;</td>
    235.                 <td height="16" colspan="4">&nbsp;</td>
    236.                 <td width="482" height="16">&nbsp;</td>
    237.                 <td width="46">&nbsp;</td>
    238.                 <td height="16">&nbsp;</td>
    239.                 </tr>
    240.               <tr>
    241.                 <td width="42" height="26"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image19','','bilder/images/iamges_input/images/content/page_slices_content_48.jpg',1)"><img src="bilder/images/iamges_input/images/content/Film_buttons_48.jpg" name="Image19" width="42" height="26" border="0" id="Image19" /></a></td>
    242.                 <td width="7" height="26">&nbsp;</td>
    243.                 <td width="92" height="26"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image20','','bilder/images/iamges_input/images/content/page_slices_content_50.jpg',1)"><img src="bilder/images/iamges_input/images/content/Film_buttons_50.jpg" name="Image20" width="92" height="26" border="0" id="Image20" /></a></td>
    244.                 <td width="7" height="26">&nbsp;</td>
    245.                 <td height="26" colspan="2"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image21','','bilder/images/iamges_input/images/content/page_slices_content_52.jpg',1)"><img src="bilder/images/iamges_input/images/content/Film_buttons_52.jpg" name="Image21" width="53" height="26" border="0" id="Image21" /></a></td>
    246.                 <td width="77">&nbsp;</td>
    247.               </tr>
    248.               <tr>
    249.                 <td height="71" colspan="7">&nbsp;</td>
    250.                 </tr>
    251.             </table></td>
    252.           </tr>
    253.         </table></td>
    254.         </tr>
    255.       <tr>
    256.         <td height="65" colspan="11"><img src="bilder/images/iamges_input/images/input_17.png" width="1075" height="65" /></td>
    257.         </tr>
    258.     </table></td>
    259.   </tr>
    260.   </table>
    261. </div>
    262. </body>
    263. </html>
    264.  

    Der Java-Script Code:

    Code (Text):
    1. // JavaScript Document
    2.  
    3.  
    4. function makeScrollable(wrapper, scrollable){
    5. }
    6. $(function(){  
    7.   makeScrollable("div.sc_menu_wrapper", "div.sc_menu");
    8. });
    9.  
    10.  
    11. function makeScrollable(wrapper, scrollable){
    12.   // Get jQuery elements
    13.   var wrapper = $(wrapper), scrollable = $(scrollable);
    14.  
    15.   // Hide images until they are not loaded
    16.   scrollable.hide();
    17.   var loading = $("<div class='loading'></div>").appendTo(wrapper);
    18.  
    19.   // Set function that will check if all images are loaded
    20.   var interval = setInterval(function(){
    21.     var images = scrollable.find("img");
    22.     var completed = 0;
    23.  
    24.     // Counts number of images that are succesfully loaded
    25.     images.each(function(){
    26.       if (this.complete) completed++;  
    27.     });
    28.  
    29.     if (completed == images.length){
    30.       clearInterval(interval);
    31.       // Timeout added to fix problem with Chrome
    32.       setTimeout(function(){
    33.  
    34.         loading.hide();
    35.         // Remove scrollbars    
    36.         wrapper.css({overflow: "hidden"});
    37.  
    38.         scrollable.slideDown("slow", function(){
    39.           enable();
    40.         });                
    41.       }, 1000);
    42.     }
    43.   }, 100);
    44.  
    45.   function enable(){            
    46.   }
    47. }
    48.  
    49.  
    50. function enable(){
    51.   // height of area at the top at bottom, that don't respond to mousemove
    52.   var inactiveMargin = 100;        
    53.   // Cache for performance
    54.   var wrapperWidth = wrapper.width();
    55.   var wrapperHeight = wrapper.height();
    56.   // Using outer height to include padding too
    57.   var scrollableHeight = scrollable.outerHeight() + 2*inactiveMargin;
    58.   // Do not cache wrapperOffset, because it can change when user resizes window
    59.   // We could use onresize event, but it's just not worth doing that
    60.   // var wrapperOffset = wrapper.offset();
    61.  
    62.   //When user move mouse over menu          
    63.   wrapper.mousemove(function(e){
    64.     var wrapperOffset = wrapper.offset();
    65.     // Scroll menu
    66.     var top = (e.pageY -  wrapperOffset.top) * (scrollableHeight - wrapperHeight) / wrapperHeight  - inactiveMargin;
    67.  
    68.     if (top < 0){
    69.       top = 0;
    70.     }
    71.  
    72.     wrapper.scrollTop(top);
    73.   });      
    74. }
    75.  
    76.  
    77.  
    78. function enable(){  
    79.   // height of area at the top at bottom, that don't respond to mousemove
    80.   var inactiveMargin = 100;    
    81.   // Cache for performance
    82.   var wrapperWidth = wrapper.width();
    83.   var wrapperHeight = wrapper.height();
    84.   // Using outer height to include padding too
    85.   var scrollableHeight = scrollable.outerHeight() + 2*inactiveMargin;
    86.   // Do not cache wrapperOffset, because it can change when user resizes window
    87.   // We could use onresize event, but it's just not worth doing that
    88.   // var wrapperOffset = wrapper.offset();
    89.  
    90.   // Create a invisible tooltip
    91.   var tooltip = $('&lt;div class=&quot;sc_menu_tooltip&quot;&gt;&lt;/div&gt;')
    92.     .css('opacity', 0)
    93.     .appendTo(wrapper);
    94.  
    95.   // Save menu titles
    96.   scrollable.find('a').each(function(){            
    97.     // The "data" function attaches custom data to an element
    98.     $(this).data('tooltipText', this.title);                
    99.   });
    100.  
    101.   // Remove default tooltip
    102.   scrollable.find('a').removeAttr('title');    
    103.   // Remove default tooltip in IE
    104.   scrollable.find('img').removeAttr('alt');
    105.  
    106.   var lastTarget;
    107.   //When user move mouse over menu          
    108.   wrapper.mousemove(function(e){
    109.     // Save target
    110.     lastTarget = e.target;
    111.  
    112.     var wrapperOffset = wrapper.offset();
    113.  
    114.     var tooltipLeft = e.pageX - wrapperOffset.left;
    115.     // Do not let tooltip to move out of menu.
    116.     // Because overflow is set to hidden, we will not be able too see it
    117.     tooltipLeft = Math.min(tooltipLeft, wrapperWidth - 75); //tooltip.outerWidth());
    118.  
    119.     var tooltipTop = e.pageY - wrapperOffset.top   wrapper.scrollTop() - 40;
    120.     // Move tooltip under the mouse when we are in the higher part of the menu
    121.     if (e.pageY - wrapperOffset.top &lt; wrapperHeight/2){
    122.       tooltipTop  = 80;
    123.     }              
    124.     tooltip.css({top: tooltipTop, left: tooltipLeft});
    125.  
    126.     // Scroll menu
    127.     var top = (e.pageY -  wrapperOffset.top) * (scrollableHeight - wrapperHeight) / wrapperHeight  - inactiveMargin;
    128.  
    129.     if (top < 0){
    130.       top = 0;
    131.     }
    132.     wrapper.scrollTop(top);
    133.   });
    134.  
    135.   // Setting interval helps solving perfomance problems in IE
    136.   var interval = setInterval(function(){
    137.     if (!lastTarget) return;
    138.  
    139.     var currentText = tooltip.text();
    140.  
    141.     if (lastTarget.nodeName == 'IMG'){                  
    142.       // We've attached data to a link, not image
    143.       var newText = $(lastTarget).parent().data('tooltipText');
    144.  
    145.       // Show tooltip with the new text
    146.       if (currentText != newText) {
    147.         tooltip
    148.           .stop(true)
    149.           .css('opacity', 0)    
    150.           .text(newText)
    151.           .animate({opacity: 1}, 1000);
    152.       }                
    153.     }
    154.   }, 200);
    155.  
    156.   // Hide tooltip when leaving menu
    157.   wrapper.mouseleave(function(){
    158.     lastTarget = false;
    159.     tooltip.stop(true).css('opacity', 0).text('');
    160.   });          
    161. }
    162.  
    Ich hoffe ihr könnt mir helfen...

    MfG
    GariZZo
     
    #1      
  2. stroyer

    stroyer Aktives Mitglied

    Dabei seit:
    03.01.2009
    Beiträge:
    567
    Java Script Menübalken...
    AW: Java Script Menübalken...

    ein Fehler ist folgender in der JS:
    Code (Text):
    1.  
    2.   function enable(){            
    3.   }
    4. }
    5.  
    6.  
    7. function enable(){
    8.  
    Die function enable gehört nicht extra sondern oben eingefügt.

    Du hast ein paar Funktionen doppelt drinnen. Im Tutorial werden die von Schritt zu Schritt ergänzt.
    Der richtige JS-Code:

    Code (Text):
    1.  
    2. function makeScrollable(wrapper, scrollable){
    3.     // Get jQuery elements
    4.     var wrapper = $(wrapper), scrollable = $(scrollable);
    5.    
    6.     // Hide images until they are not loaded
    7.     scrollable.hide();
    8.     var loading = $('<div class="loading">Loading...</div>').appendTo(wrapper);
    9.    
    10.     // Set function that will check if all images are loaded
    11.     var interval = setInterval(function(){
    12.         var images = scrollable.find('img');
    13.         var completed = 0;
    14.        
    15.         // Counts number of images that are succesfully loaded
    16.         images.each(function(){
    17.             if (this.complete) completed++;    
    18.         });
    19.        
    20.         if (completed == images.length){
    21.             clearInterval(interval);
    22.             // Timeout added to fix problem with Chrome
    23.             setTimeout(function(){
    24.                
    25.                 loading.hide();
    26.                 // Remove scrollbars    
    27.                 wrapper.css({overflow: 'hidden'});                        
    28.                
    29.                 scrollable.slideDown('slow', function(){
    30.                     enable();    
    31.                 });                    
    32.             }, 1000);    
    33.         }
    34.     }, 100);
    35.    
    36.     function enable(){
    37.         // height of area at the top at bottom, that don't respond to mousemove
    38.         var inactiveMargin = 99;                    
    39.         // Cache for performance
    40.         var wrapperWidth = wrapper.width();
    41.         var wrapperHeight = wrapper.height();
    42.         // Using outer height to include padding too
    43.         var scrollableHeight = scrollable.outerHeight() + 2*inactiveMargin;
    44.         // Do not cache wrapperOffset, because it can change when user resizes window
    45.         // We could use onresize event, but it's just not worth doing that
    46.         // var wrapperOffset = wrapper.offset();
    47.        
    48.         // Create a invisible tooltip
    49.         var tooltip = $('<div class="sc_menu_tooltip"></div>')
    50.             .css('opacity', 0)
    51.             .appendTo(wrapper);
    52.    
    53.         // Save menu titles
    54.         scrollable.find('a').each(function(){                
    55.             $(this).data('tooltipText', this.title);                
    56.         });
    57.        
    58.         // Remove default tooltip
    59.         scrollable.find('a').removeAttr('title');        
    60.         // Remove default tooltip in IE
    61.         scrollable.find('img').removeAttr('alt');    
    62.        
    63.         var lastTarget;
    64.         //When user move mouse over menu            
    65.         wrapper.mousemove(function(e){
    66.             // Save target
    67.             lastTarget = e.target;
    68.  
    69.             var wrapperOffset = wrapper.offset();
    70.        
    71.             var tooltipLeft = e.pageX - wrapperOffset.left;
    72.             // Do not let tooltip to move out of menu.
    73.             // Because overflow is set to hidden, we will not be able too see it
    74.             tooltipLeft = Math.min(tooltipLeft, wrapperWidth - 75); //tooltip.outerWidth());
    75.            
    76.             var tooltipTop = e.pageY - wrapperOffset.top + wrapper.scrollTop() - 40;
    77.             // Move tooltip under the mouse when we are in the higher part of the menu
    78.             if (e.pageY - wrapperOffset.top < wrapperHeight/2){
    79.                 tooltipTop += 80;
    80.             }                
    81.             tooltip.css({top: tooltipTop, left: tooltipLeft});                
    82.            
    83.             // Scroll menu
    84.             var top = (e.pageY -  wrapperOffset.top) * (scrollableHeight - wrapperHeight) / wrapperHeight - inactiveMargin;
    85.             if (top < 0){
    86.                 top = 0;
    87.             }            
    88.             wrapper.scrollTop(top);
    89.         });
    90.        
    91.         // Setting interval helps solving perfomance problems in IE
    92.         var interval = setInterval(function(){
    93.             if (!lastTarget) return;    
    94.                                        
    95.             var currentText = tooltip.text();
    96.            
    97.             if (lastTarget.nodeName == 'IMG'){                    
    98.                 // We've attached data to a link, not image
    99.                 var newText = $(lastTarget).parent().data('tooltipText');
    100.  
    101.                 // Show tooltip with the new text
    102.                 if (currentText != newText) {
    103.                     tooltip
    104.                         .stop(true)
    105.                         .css('opacity', 0)    
    106.                         .text(newText)
    107.                         .animate({opacity: 1}, 1000);
    108.                 }                    
    109.             }
    110.         }, 200);
    111.        
    112.         // Hide tooltip when leaving menu
    113.         wrapper.mouseleave(function(){
    114.             lastTarget = false;
    115.             tooltip.stop(true).css('opacity', 0).text('');
    116.         });            
    117.        
    118.         /*
    119.         //Usage of hover event resulted in performance problems
    120.         scrollable.find('a').hover(function(){
    121.             tooltip
    122.                 .stop()
    123.                 .css('opacity', 0)
    124.                 .text($(this).data('tooltipText'))
    125.                 .animate({opacity: 1}, 1000);
    126.    
    127.         }, function(){
    128.             tooltip
    129.                 .stop()
    130.                 .animate({opacity: 0}, 300);
    131.         });
    132.         */            
    133.     }
    134. }
    135.    
    136. $(function(){    
    137.     makeScrollable("div.sc_menu_wrapper", "div.sc_menu");
    138. });
    139.  
    Bezüglich Dreamweaver: Kann sein, dass hinten ein Strichpunkt fehlt?

    CSS von
    Code (Text):
    1.  
    2. body p {    font-family: Arial, Helvetica, sans-serif; } body p {   font-size: 10px; } body p {     font-weight: bold; } body p {   font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif; } body p {     font-family: Arial, Helvetica, sans-serif; } body p {   font-size: 12px; } body p {     font-size: 10px; }
    3.  
    könntest du zusammenfassen, der erzeugte Code vom DW ist wie gewohnt schrecklich, was aber nichts an der Funktionalität ändert.
     
    Zuletzt bearbeitet: 07.01.2011
    #2      
  3. GariZZo

    GariZZo Noch nicht viel geschrieben

    Dabei seit:
    25.07.2005
    Beiträge:
    43
    Java Script Menübalken...
    Oh tatsächlich, es fehlte der Strichpunkt...
    Du hast mir sehr geholfen!!

    VIELEN DANK!!

    Ach noch eine Frage, ich bekomm die Bilder vom Menübalken nicht zentriert... ;/
     
    Zuletzt von einem Moderator bearbeitet: 07.01.2011
    #3      
  4. stroyer

    stroyer Aktives Mitglied

    Dabei seit:
    03.01.2009
    Beiträge:
    567
    Java Script Menübalken...
    AW: Java Script Menübalken...

    .sc_menu um text-align:center; ergänzen und .sc_menu>a{margin:auto;}
    sollte reichen
     
    #4      
  5. GariZZo

    GariZZo Noch nicht viel geschrieben

    Dabei seit:
    25.07.2005
    Beiträge:
    43
    Java Script Menübalken...
    AW: Java Script Menübalken...

    vielen vielen dank, du hast mir sehr geholfen!
     
    #5      
  6. stroyer

    stroyer Aktives Mitglied

    Dabei seit:
    03.01.2009
    Beiträge:
    567
    Java Script Menübalken...
    AW: Java Script Menübalken...

    kein Problem, gerne wieder ;)
     
    #6      
  7. GariZZo

    GariZZo Noch nicht viel geschrieben

    Dabei seit:
    25.07.2005
    Beiträge:
    43
    Java Script Menübalken...
    Ok ich hab ein neues Problem,

    und zwar funktionieren bei mir mehrere JavaScript Funktionen nicht.
    Kurioserweiser nach Positionieren im Head Bereich. Ich hab zum einen die Nav Links mit der JS was ich oben gepostet hab, und nun soll noch eine MultiBox (LightBox) noch auf die Seite. Wenn ich die JS Headzeile vor der JS-Funktion der Navigation setzte, funktioniert meine Lightbox nicht mehr, wenn ich aber die JS-Zeile nach der JS-Funktion der Navi setzte, funktioniert die Lightbox, aber meine Navileiste Links bekommt scrollbalken und es verschiebt sich...

    Also so:
    Code (Text):
    1. <script type="text/javascript" src="multibox/mootools.js"></script>
    2. <script type="text/javascript" src="multibox/multibox.js"></script>
    3. <script type="text/javascript" src="multibox/overlay.js"></script>
    4.  
    5.  
    6. <script type="text/javascript">
    7. function MM_swapImgRestore() { //v3.0
    8.   var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
    9. }
    10. function MM_preloadImages() { //v3.0
    11.   var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    12.     var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    13.     if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
    14. }
    15.  
    16. function MM_findObj(n, d) { //v4.01
    17.   var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    18.     d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
    19.   if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
    20.   for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
    21.   if(!x && d.getElementById) x=d.getElementById(n); return x;
    22. }
    23.  
    24. function MM_swapImage() { //v3.0
    25.   var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
    26.    if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
    27. }
    28. </script>
    29. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js" type="text/javascript"></script>
    30. <script src="film_stylesheet.js" type="text/javascript"></script>
    Funktioniert meine Lightbox nicht...

    und so:
    Code (Text):
    1. <script type="text/javascript" src="multibox/mootools.js"></script>
    2. <script type="text/javascript" src="multibox/multibox.js"></script>
    3. <script type="text/javascript" src="multibox/overlay.js"></script>
    4.  
    5.  
    6. <script type="text/javascript">
    7. function MM_swapImgRestore() { //v3.0
    8.   var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
    9. }
    10. function MM_preloadImages() { //v3.0
    11.   var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    12.     var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    13.     if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
    14. }
    15.  
    16. function MM_findObj(n, d) { //v4.01
    17.   var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    18.     d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
    19.   if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
    20.   for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
    21.   if(!x && d.getElementById) x=d.getElementById(n); return x;
    22. }
    23.  
    24. function MM_swapImage() { //v3.0
    25.   var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
    26.    if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
    27. }
    28. </script>
    29. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js" type="text/javascript"></script>
    30. <script type="text/javascript" src="multibox/mootools.js"></script>
    31. <script type="text/javascript" src="multibox/multibox.js"></script>
    32. <script type="text/javascript" src="multibox/overlay.js"></script>
    33.  
    34.  
    35. <script src="film_stylesheet.js" type="text/javascript"></script>
    funktioniert meine Lightbox, aber meine Navileiste bekommt scrollbalken etc...

    Wo ist das Prob? Man kann doch nicht etwa eine JS-Funktion anwenden oder?

    Ah ne nicht vor der Navi JS Funktion sondern vor oder nach der
    Code (Text):
    1. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js" type="text/javascript"></script>
    Zeile

    Hmm ich glaube das Liegt dadran das die jquerry.js und die von der Multibox (mootools.js) sich ziemlich ähneln!
     
    Zuletzt von einem Moderator bearbeitet: 08.01.2011
    #7      
  8. stroyer

    stroyer Aktives Mitglied

    Dabei seit:
    03.01.2009
    Beiträge:
    567
    Java Script Menübalken...
    AW: Java Script Menübalken...

    jQuery und Mootools ähneln sich in der Tat (zB beide verwenden die $-Funktion aber der Parameter ist unterschiedlich). Es gibt zwar Möglichkeiten unter jQuery eine benutzerdefinierte jQuery Funktion statt $ zu definieren, aber dann muss der ganze Code, der von jQuery abhängt umgeschrieben werden.
    Prinzipiell ist es zu empfehlen sich für ein Javascript-Framework (ich würde jQuery bevorzugen) zu entscheiden und alles schauen mit dem zu lösen.
    Für jQuery gibt es genug Lightboxes, zB. (jQuery lightBox plugin)
     
    #8      
  9. GariZZo

    GariZZo Noch nicht viel geschrieben

    Dabei seit:
    25.07.2005
    Beiträge:
    43
    Java Script Menübalken...
    Das probier ich mal aus, danke erstmal! Meld mich sicherlich! ;)


    Edit:
    Also irgendwie kommt es mit dem jQuery Plugin auch in die quere... Wo denk ich falsch?
     
    Zuletzt von einem Moderator bearbeitet: 08.01.2011
    #9      
  10. stroyer

    stroyer Aktives Mitglied

    Dabei seit:
    03.01.2009
    Beiträge:
    567
    Java Script Menübalken...
    AW: Java Script Menübalken...

    Mootools Script und Multiboxscripte alles herausgenommen?
    nichts doppelt (zB jquery) eingefügt?
    Hast du eine Version online?
    bzw. was sagen debugger wie unter Firefox die Fehlerkonsole (Strg+Umschalt+J)?
     
    #10      
  11. GariZZo

    GariZZo Noch nicht viel geschrieben

    Dabei seit:
    25.07.2005
    Beiträge:
    43
    Java Script Menübalken...
    AW: Java Script Menübalken...

    Ja die Alten Scripte sind raus, habs es mal geuppt:

    Werbeagentur Vision First - Main // Hamburg, Germany

    Die Lightbox ist eingefügt, aber funtz nicht :(

    Code (Text):
    1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    2. <html xmlns="http://www.w3.org/1999/xhtml">
    3. <head>
    4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    5. <title>Werbeagentur Vision First - Main  // Hamburg, Germany</title>
    6.  
    7. <script type="text/javascript">
    8. function MM_swapImgRestore() { //v3.0
    9.   var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
    10. }
    11. function MM_preloadImages() { //v3.0
    12.   var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    13.     var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    14.     if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
    15. }
    16.  
    17. function MM_findObj(n, d) { //v4.01
    18.   var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    19.     d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
    20.   if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
    21.   for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
    22.   if(!x && d.getElementById) x=d.getElementById(n); return x;
    23. }
    24.  
    25. function MM_swapImage() { //v3.0
    26.   var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
    27.    if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
    28. }
    29. </script>
    30. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js" type="text/javascript"></script>
    31. <script src="film_stylesheet.js" type="text/javascript"></script>
    32.  
    33.     <link rel="stylesheet" type="text/css" href="../style-projects-jquery.css" />
    34.     <script type="text/javascript" src="js/jquery.js"></script>
    35.     <script type="text/javascript" src="js/jquery.lightbox-0.5.js"></script>
    36.     <link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.5.css" media="screen" />
    37.    
    38.         <script type="text/javascript">
    39.     $(function() {
    40.         $('#gallery a').lightBox();
    41.     });
    42.     </script>
    43.  
    44.    
    45. <style type="text/css">
    46. #Accordion1 .AccordionPanel .AccordionPanelTab strong {
    47.     font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
    48.     color: #aaf000;
    49. }
    50. #Accordion2 .AccordionPanel.AccordionPanelOpen .AccordionPanelContent table tr td {
    51.     font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
    52.     font-size: 14px;
    53. }
    54. .table2 {
    55.     background-image: url(bilder/images/3.png);
    56.     background-repeat: no-repeat;
    57. }
    58. #Accordion1 .AccordionPanel.AccordionPanelOpen .AccordionPanelContent table tr td {
    59.     font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
    60.     font-size: 14px;
    61.     text-align: right;
    62. }
    63. body p {
    64.     font-family: Arial, Helvetica, sans-serif;
    65. }
    66. body p {
    67.     font-size: 10px;
    68. }
    69. body p {
    70.     font-weight: bold;
    71. }
    72. body p {
    73.     font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
    74. }
    75. body p {
    76.     font-family: Arial, Helvetica, sans-serif;
    77. }
    78. body p {
    79.     font-size: 12px;
    80. }
    81. body p {
    82.     font-size: 10px;
    83. }
    84.  
    85.  
    86.  
    87. div.sc_menu_wrapper {
    88.   position: relative;  
    89.   height: 280px;
    90.   /* Make bigger than a photo, because we need a place for a scroll-bar. */
    91.   width: 160px;
    92.  
    93.   margin-top: 10px;
    94.   overflow: auto;
    95. }
    96. div.sc_menu {
    97.   padding: 1px 11px;
    98.   text-align:center;
    99.  
    100. }
    101. .sc_menu a {
    102.   display: block;
    103.   width: 130px;
    104.   margin-bottom: 2px;
    105.  
    106.   border: 4px rgb(79, 79, 79) solid;
    107.   -webkit-border-radius: 0px;
    108.   -moz-border-radius: 0px;
    109.  
    110.   /* When image support is turned off */
    111.   color: #fd7b2d;
    112.   background: rgb(79, 79, 79);  
    113. }
    114. .sc_menu a:hover {
    115.   border-color: rgb(253, 123, 45);
    116.   border-style:solid;
    117. }
    118. .sc_menu img {
    119.  
    120.   border: none;
    121. }
    122.  
    123.  
    124. .sc_menu_wrapper .loading {
    125.   position: absolute;
    126.   top: 50px;
    127.   left: 20px;
    128.  
    129.   margin: 0 auto;
    130.   padding: 10px;
    131.  
    132.   width: 100px;
    133.   -webkit-border-radius: 4px;
    134.   -moz-border-radius: 4px;
    135.  
    136.   text-align: center;
    137.   color: #fff;
    138.   border: 1px solid rgb(79, 79, 79);
    139.   background: #1F1D1D;
    140. }
    141.  
    142.  
    143.  
    144. .table3 {
    145.     background-image: url(bilder/images/iamges_input/images/content/page_slices_content_20.jpg);
    146.     background-repeat: no-repeat;
    147. }
    148. .fontabc {
    149.     font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
    150.     font-size: 12px;
    151. }
    152. </style>
    153.  
    154.  
    155. </head>
    156.  
    157. <body onload="MM_preloadImages('bilder/images/iamges_input/images/buttons_06.png','bilder/images/iamges_input/images/buttons_08.png','bilder/images/iamges_input/images/buttons_10.png','bilder/images/iamges_input/images/buttons_12.png','bilder/images/iamges_input/images/content/page_slices_content_48.jpg','bilder/images/iamges_input/images/content/page_slices_content_50.jpg','bilder/images/iamges_input/images/content/page_slices_content_52.jpg','bilder/1a.jpg')" alink="#000000" link="#000000" vlink="#000000">
    158. <div align="center">
    159.   <table width="1075" height="790" border="0" cellspacing="0" cellpadding="0">
    160.   <tr>
    161.     <td><table width="100%" border="0" cellspacing="0" cellpadding="0">
    162.       <tr>
    163.         <td height="117" colspan="11"><img src="bilder/images/iamges_input/images/input_01.png" width="1075" height="117" /></td>
    164.         </tr>
    165.       <tr>
    166.         <td width="132" height="113" rowspan="3"><img src="bilder/images/iamges_input/images/input_02.png" width="132" height="113" /></td>
    167.         <td width="122" height="113" rowspan="3"><img src="bilder/images/iamges_input/images/input_03.png" width="122" height="113" /></td>
    168.         <td height="65" colspan="9"><img src="bilder/images/iamges_input/images/input_04.png" width="821" height="65" /></td>
    169.         </tr>
    170.       <tr>
    171.         <td width="328" height="48" rowspan="2"><img src="bilder/images/iamges_input/images/input_05.png" width="328" height="48" /></td>
    172.         <td width="34"><img src="bilder/images/iamges_input/images/buttons_06.png" width="34" height="17" /></td>
    173.         <td width="7"><img src="bilder/images/iamges_input/images/input_07.png" width="7" height="17" /></td>
    174.         <td width="113"><a href="kommunikation.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image15','','bilder/images/iamges_input/images/buttons_08.png',1)"><img src="bilder/images/iamges_input/images/input_08.png" name="Image15" width="113" height="17" border="0" id="Image15" /></a></td>
    175.         <td width="8"><img src="bilder/images/iamges_input/images/input_09.png" width="8" height="17" /></td>
    176.         <td width="80" height="17"><a href="fotografie.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image16','','bilder/images/iamges_input/images/buttons_10.png',1)"><img src="bilder/images/iamges_input/images/input_10.png" name="Image16" width="80" height="17" border="0" id="Image16" /></a></td>
    177.         <td width="8" height="17"><img src="bilder/images/iamges_input/images/input_11.png" width="8" height="17" /></td>
    178.         <td width="60" height="17"><a href="kontakt.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image17','','bilder/images/iamges_input/images/buttons_12.png',1)"><img src="bilder/images/iamges_input/images/input_12.png" name="Image17" width="60" height="17" border="0" id="Image17" /></a></td>
    179.         <td width="183" height="48" rowspan="2"><img src="bilder/images/iamges_input/images/input_13.png" alt="" width="183" height="48" /></td>
    180.       </tr>
    181.       <tr>
    182.         <td height="31" colspan="7"><img src="bilder/images/iamges_input/images/content/page_slices_content_14.png" width="310" height="31" /></td>
    183.         </tr>
    184.       <tr>
    185.         <td height="298" colspan="11"><table width="100%" border="0" cellspacing="0" cellpadding="0">
    186.           <tr>
    187.             <td height="50" colspan="12"><table width="100%" border="0" cellspacing="0" cellpadding="0">
    188.               <tr>
    189.                 <td width="1075" height="50"><img src="bilder/images/iamges_input/images/content/page_slices_content_15.jpg" width="1075" height="48" /></td>
    190.               </tr>
    191.             </table></td>
    192.           </tr>
    193.           <tr>
    194.             <td width="104" height="330" rowspan="7">&nbsp;</td>
    195.             <td width="160" height="330" rowspan="7" class="table3"><div class="sc_menu_wrapper">
    196.   <div class="sc_menu">
    197.     <a href="film_checker.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image27','','bilder/1a.jpg',1)"><img src="bilder/1.jpg" name="Image27" width="128" height="40" border="0" id="Image27" /></a>
    198.     <a title="Navigation" href="#"><img src="bilder/1.jpg" alt="Navigation"/></a>
    199.     <a title="jQuery" href="#"><img src="bilder/1.jpg" alt="jQuery"/></a>        
    200.     <a title="CSS" href="#"><img src="bilder/1.jpg" alt="CSS"/></a>
    201.     <a title="Vertical" href="#"><img src="bilder/1.jpg" alt="Vertical"/></a>
    202.     <a title="Menu" href="#"><img src="bilder/1.jpg" alt="Menu"/></a>
    203.     <a title="Navigation" href="#"><img src="bilder/1.jpg" alt="Navigation"/></a>    
    204.   </div>
    205. </div>
    206. </td>
    207.             <td width="58" rowspan="7">&nbsp;</td>
    208.             <td width="154" height="86"><a href="photos/checker01_g.jpg" title="Utilize a flexibilidade dos seletores da jQuery e crie um grupo de imagens como desejar. $('#gallery').lightBox();">
    209.                 <img src="photos/checker01_k.jpg" width="154" height="86" alt="" />            </a></td>
    210.             <td width="15" height="86">&nbsp;</td>
    211.             <td width="154" height="86">&nbsp;</td>
    212.             <td width="15" height="86">&nbsp;</td>
    213.             <td width="154" height="86">&nbsp;</td>
    214.             <td width="14" height="86">&nbsp;</td>
    215.             <td width="154" height="88">&nbsp;</td>
    216.             <td width="14">&nbsp;</td>
    217.             <td width="79">&nbsp;</td>
    218.             </tr>
    219.           <tr>
    220.             <td height="17" class="fontabc">Checker Part 1</td>
    221.             <td height="17">&nbsp;</td>
    222.             <td height="17" class="fontabc">Checker Part2</td>
    223.             <td height="17">&nbsp;</td>
    224.             <td height="17" class="fontabc">Checker Part 3</td>
    225.             <td height="17">&nbsp;</td>
    226.             <td height="17" class="fontabc">Checker Part 4</td>
    227.             <td width="14" height="35" rowspan="2">&nbsp;</td>
    228.             <td width="79" height="35" rowspan="2">&nbsp;</td>
    229.             </tr>
    230.           <tr>
    231.             <td height="18" colspan="6">&nbsp;</td>
    232.             <td height="18">&nbsp;</td>
    233.           </tr>
    234.           <tr>
    235.             <td width="154" height="86">&nbsp;</td>
    236.             <td height="86">&nbsp;</td>
    237.             <td width="154" height="86">&nbsp;</td>
    238.             <td height="86">&nbsp;</td>
    239.             <td height="86">&nbsp;</td>
    240.             <td height="86">&nbsp;</td>
    241.             <td width="154" height="86">&nbsp;</td>
    242.             <td width="14" height="86">&nbsp;</td>
    243.             <td width="79" height="86">&nbsp;</td>
    244.             </tr>
    245.           <tr>
    246.             <td height="17" class="fontabc">Checker Part 5</td>
    247.             <td height="17">&nbsp;</td>
    248.             <td height="17" class="fontabc">Checker Part 6</td>
    249.             <td height="17">&nbsp;</td>
    250.             <td height="17" class="fontabc">Checker Part 7</td>
    251.             <td height="17">&nbsp;</td>
    252.             <td height="17" class="fontabc">Checker Part 8</td>
    253.             <td width="14" height="35" rowspan="2">&nbsp;</td>
    254.             <td width="79" height="35" rowspan="2">&nbsp;</td>
    255.             </tr>
    256.           <tr>
    257.             <td height="18" colspan="7">&nbsp;</td>
    258.           </tr>
    259.           <tr>
    260.             <td width="154" height="86">&nbsp;</td>
    261.             <td height="86">&nbsp;</td>
    262.             <td height="86">&nbsp;</td>
    263.             <td height="86">&nbsp;</td>
    264.             <td height="86">&nbsp;</td>
    265.             <td height="86">&nbsp;</td>
    266.             <td width="154" height="86">&nbsp;</td>
    267.             <td width="14" height="86">&nbsp;</td>
    268.             <td width="79" height="86">&nbsp;</td>
    269.             </tr>
    270.         </table></td>
    271.         </tr>
    272.       <tr>
    273.         <td height="116" colspan="11"><table width="100%" border="0" cellspacing="0" cellpadding="0">
    274.           <tr>
    275.             <td width="1075" height="116"><table width="100%" border="0" cellspacing="0" cellpadding="0">
    276.               <tr>
    277.                 <td width="322" height="116" rowspan="5">&nbsp; </td>
    278.                 <td height="18" colspan="4" class="fontabc">Checker Part 9</td>
    279.                 <td width="28" height="18">&nbsp;</td>
    280.                 <td width="167"><span class="fontabc">Checker Part 10</span></td>
    281.                 <td width="154"><span class="fontabc">Checker Part 11</span></td>
    282.                 <td width="15">&nbsp;</td>
    283.                 <td width="112"><span class="fontabc">Checker Part 12</span></td>
    284.                 <td width="42"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image1','','bilder/images/iamges_input/images/content/page_slices_content_48.jpg',1)"></a></td>
    285.                 <td height="36" rowspan="2">&nbsp;</td>
    286.                 </tr>
    287.               <tr>
    288.                 <td height="18" colspan="4" class="fontabc">&nbsp;</td>
    289.                 <td height="18" colspan="5">&nbsp;</td>
    290.                 <td width="42"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image1','','bilder/images/iamges_input/images/content/page_slices_content_48.jpg',1)"><img src="bilder/images/iamges_input/images/content/Film_buttons_48.jpg" alt="" name="Image1" width="42" height="26" border="0" id="Image1" /></a></td>
    291.               </tr>
    292.               <tr>
    293.                 <td width="42" height="26"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image19','','bilder/images/iamges_input/images/content/page_slices_content_48.jpg',1)"><img src="bilder/images/iamges_input/images/content/Film_buttons_48.jpg" name="Image19" width="42" height="26" border="0" id="Image19" /></a></td>
    294.                 <td width="4" height="26">&nbsp;</td>
    295.                 <td width="92" height="26"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image20','','bilder/images/iamges_input/images/content/page_slices_content_50.jpg',1)"><img src="bilder/images/iamges_input/images/content/Film_buttons_50.jpg" name="Image20" width="92" height="26" border="0" id="Image20" /></a></td>
    296.                 <td width="4" height="26">&nbsp;</td>
    297.                 <td height="26" colspan="6"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image21','','bilder/images/iamges_input/images/content/page_slices_content_52.jpg',1)"><img src="bilder/images/iamges_input/images/content/Film_buttons_52.jpg" name="Image21" width="53" height="26" border="0" id="Image21" /></a></td>
    298.                 <td width="93">&nbsp;</td>
    299.               </tr>
    300.               <tr>
    301.                 <td height="19" colspan="11"><span class="fontabc">Checker</span></td>
    302.                 </tr>
    303.               <tr>
    304.                 <td height="36" colspan="11">&nbsp;</td>
    305.               </tr>
    306.             </table></td>
    307.           </tr>
    308.         </table></td>
    309.         </tr>
    310.       <tr>
    311.         <td height="65" colspan="11"><img src="bilder/images/iamges_input/images/input_17.png" width="1075" height="65" /></td>
    312.         </tr>
    313.     </table></td>
    314.   </tr>
    315.   </table>
    316. </div>
    317. </body>
    318. </html>
    319.  
     
    #11      
  12. stroyer

    stroyer Aktives Mitglied

    Dabei seit:
    03.01.2009
    Beiträge:
    567
    Java Script Menübalken...
    AW: Java Script Menübalken...

    das, was ich gemeint habe:
    Code (Text):
    1.  
    2. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js" type="text/javascript"></script>
    3. <script type="text/javascript" src="[URL="http://www.psd-tutorials.de/modules/Forum/view-source:http://www.garo-studios.de/Vision/js/jquery.js"]js/jquery.js[/URL]"></script>
    4.  
    nimm das untere mal raus...
     
    #12      
  13. GariZZo

    GariZZo Noch nicht viel geschrieben

    Dabei seit:
    25.07.2005
    Beiträge:
    43
    Java Script Menübalken...
    AW: Java Script Menübalken...

    Achso, ja ok. Leider auch ohne der js/jquery.js funzt die lightbox nicht :/
     
    #13      
  14. stroyer

    stroyer Aktives Mitglied

    Dabei seit:
    03.01.2009
    Beiträge:
    567
    Java Script Menübalken...
    AW: Java Script Menübalken...

    es gibt nirgends im HTML-Code ein Element mit der id gallery, dass einen link enthält ( $('#gallery a')). Drinnen das muss so zu sagen der CSS-Selektor für alle Links der Lightbox sein. weise jedem link die class gallery1 zu und verwende dann $('.gallery1') , dann sollte es gehen.
     
    #14      
  15. GariZZo

    GariZZo Noch nicht viel geschrieben

    Dabei seit:
    25.07.2005
    Beiträge:
    43
    Java Script Menübalken...
    AW: Java Script Menübalken...

    OMG, dankesehr! Es klappt alles! WOW, VIELEN DANK!!
     
    #15      
Seobility SEO Tool
x
×
×