Auf Thema antworten 2026

Beitrag

<blockquote data-quote="GariZZo" data-source="post: 1670649" data-attributes="member: 8701">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:<a href="http://valums.com/files/2009/vertical-menu/final.htm" target="_blank">Create a Scrolling Menu: Result</a>und hab auch schritt für schritt das tutorial verfolgt.Dennoch klappt es nicht wie ich es will: 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]var tooltip = $(&#039;&amp;lt;div class=&amp;quot;sc_menu_tooltip&amp;quot;&amp;gt;&amp;lt;/div&amp;gt;&#039;)[/code]Der gesammte html Code:[code]&lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;&gt;&lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;&gt;&lt;head&gt;&lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot; /&gt;&lt;title&gt;Werbeagentur Vision First - Main&nbsp; // Hamburg, Germany&lt;/title&gt;&lt;style type=&quot;text/css&quot;&gt;#Accordion1 .AccordionPanel .AccordionPanelTab strong {&nbsp; &nbsp; font-family: &quot;Lucida Sans Unicode&quot;, &quot;Lucida Grande&quot;, sans-serif;&nbsp; &nbsp; color: #aaf000;}#Accordion2 .AccordionPanel.AccordionPanelOpen .AccordionPanelContent table tr td {&nbsp; &nbsp; font-family: &quot;Lucida Sans Unicode&quot;, &quot;Lucida Grande&quot;, sans-serif;&nbsp; &nbsp; font-size: 14px;}.table2 {&nbsp; &nbsp; background-image: url(bilder/images/3.png);&nbsp; &nbsp; background-repeat: no-repeat;}#Accordion1 .AccordionPanel.AccordionPanelOpen .AccordionPanelContent table tr td {&nbsp; &nbsp; font-family: &quot;Lucida Sans Unicode&quot;, &quot;Lucida Grande&quot;, sans-serif;&nbsp; &nbsp; font-size: 14px;&nbsp; &nbsp; text-align: right;}body p {&nbsp; &nbsp; font-family: Arial, Helvetica, sans-serif;}body p {&nbsp; &nbsp; font-size: 10px;}body p {&nbsp; &nbsp; font-weight: bold;}body p {&nbsp; &nbsp; font-family: &quot;Lucida Sans Unicode&quot;, &quot;Lucida Grande&quot;, sans-serif;}body p {&nbsp; &nbsp; font-family: Arial, Helvetica, sans-serif;}body p {&nbsp; &nbsp; font-size: 12px;}body p {&nbsp; &nbsp; font-size: 10px;}div.sc_menu_wrapper {&nbsp; position: relative;&nbsp; height: 250px;&nbsp; /* Make bigger than a photo, because we need a place for a scroll-bar. */&nbsp; width: 200px;&nbsp; margin-top: 30px;&nbsp; overflow: auto;}div.sc_menu {&nbsp; padding: 15px 0;}.sc_menu a {&nbsp; display:block;&nbsp; margin-bottom: 1px;&nbsp; width: 155px;&nbsp; border: 2px rgb(79, 79, 79) solid;&nbsp; -webkit-border-radius: 4px;&nbsp; -moz-border-radius: 4px;&nbsp; /* When image support is turned off */&nbsp; color: #fd7b2d;&nbsp; background: rgb(79, 79, 79);&nbsp; }.sc_menu a:hover {&nbsp; border-color: rgb(253, 123, 45);&nbsp; border-style:solid;}.sc_menu img {&nbsp; display: block;&nbsp; border: none;}/* Styling tooltip */.sc_menu_tooltip {&nbsp; display: block;&nbsp; position: absolute;&nbsp; padding: 6px;&nbsp; font-size: 12px;&nbsp; &nbsp; color: #fff;&nbsp; -webkit-border-radius: 4px;&nbsp; -moz-border-radius: 4px;&nbsp; border: 1px solid rgb(79, 79, 79);&nbsp; background: rgb(0, 0, 0);&nbsp; /* Make background a bit transparent for browsers that support rgba */&nbsp; &nbsp; &nbsp; background: rgba(0, 0, 0, 0.5);}.table3 {&nbsp; &nbsp; background-image: url(bilder/images/iamges_input/images/content/page_slices_content_20.jpg);&nbsp; &nbsp; background-repeat: no-repeat;}&lt;/style&gt;&lt;script type=&quot;text/javascript&quot;&gt;function MM_swapImgRestore() { //v3.0&nbsp; var i,x,a=document.MM_sr; for(i=0;a&amp;&amp;i&lt;a.length&amp;&amp;(x=a[i])&amp;&amp;x.oSrc;i++) x.src=x.oSrc;}function MM_preloadImages() { //v3.0&nbsp; var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();&nbsp; &nbsp; var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i&lt;a.length; i++)&nbsp; &nbsp; if (a[i].indexOf(&quot;#&quot;)!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}}function MM_findObj(n, d) { //v4.01&nbsp; var p,i,x;&nbsp; if(!d) d=document; if((p=n.indexOf(&quot;?&quot;))&gt;0&amp;&amp;parent.frames.length) {&nbsp; &nbsp; d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}&nbsp; if(!(x=d[n])&amp;&amp;d.all) x=d.all[n]; for (i=0;!x&amp;&amp;i&lt;d.forms.length;i++) x=d.forms[i][n];&nbsp; for(i=0;!x&amp;&amp;d.layers&amp;&amp;i&lt;d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);&nbsp; if(!x &amp;&amp; d.getElementById) x=d.getElementById(n); return x;}function MM_swapImage() { //v3.0&nbsp; var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i&lt;(a.length-2);i+=3)&nbsp;&nbsp; if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}}&lt;/script&gt;&lt;script src=&quot;http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;&lt;script src=&quot;film_stylesheet.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;&lt;/head&gt;&lt;body onload=&quot;MM_preloadImages(&#039;bilder/images/iamges_input/images/buttons_06.png&#039;,&#039;bilder/images/iamges_input/images/buttons_08.png&#039;,&#039;bilder/images/iamges_input/images/buttons_10.png&#039;,&#039;bilder/images/iamges_input/images/buttons_12.png&#039;,&#039;bilder/images/iamges_input/images/content/page_slices_content_48.jpg&#039;,&#039;bilder/images/iamges_input/images/content/page_slices_content_50.jpg&#039;,&#039;bilder/images/iamges_input/images/content/page_slices_content_52.jpg&#039;)&quot;&gt;&lt;div align=&quot;center&quot;&gt;&nbsp; &lt;table width=&quot;1075&quot; height=&quot;790&quot; border=&quot;0&quot; cellspacing=&quot;0&quot; cellpadding=&quot;0&quot;&gt;&nbsp; &lt;tr&gt;&nbsp; &nbsp; &lt;td&gt;&lt;table width=&quot;100%&quot; border=&quot;0&quot; cellspacing=&quot;0&quot; cellpadding=&quot;0&quot;&gt;&nbsp; &nbsp; &nbsp; &lt;tr&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;td height=&quot;117&quot; colspan=&quot;11&quot;&gt;&lt;img src=&quot;bilder/images/iamges_input/images/input_01.png&quot; width=&quot;1075&quot; height=&quot;117&quot; /&gt;&lt;/td&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;/tr&gt;&nbsp; &nbsp; &nbsp; &lt;tr&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;td width=&quot;132&quot; height=&quot;113&quot; rowspan=&quot;3&quot;&gt;&lt;img src=&quot;bilder/images/iamges_input/images/input_02.png&quot; width=&quot;132&quot; height=&quot;113&quot; /&gt;&lt;/td&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;td width=&quot;122&quot; height=&quot;113&quot; rowspan=&quot;3&quot;&gt;&lt;img src=&quot;bilder/images/iamges_input/images/input_03.png&quot; width=&quot;122&quot; height=&quot;113&quot; /&gt;&lt;/td&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;td height=&quot;65&quot; colspan=&quot;9&quot;&gt;&lt;img src=&quot;bilder/images/iamges_input/images/input_04.png&quot; width=&quot;821&quot; height=&quot;65&quot; /&gt;&lt;/td&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;/tr&gt;&nbsp; &nbsp; &nbsp; &lt;tr&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;td width=&quot;328&quot; height=&quot;48&quot; rowspan=&quot;2&quot;&gt;&lt;img src=&quot;bilder/images/iamges_input/images/input_05.png&quot; width=&quot;328&quot; height=&quot;48&quot; /&gt;&lt;/td&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;td width=&quot;34&quot;&gt;&lt;img src=&quot;bilder/images/iamges_input/images/buttons_06.png&quot; width=&quot;34&quot; height=&quot;17&quot; /&gt;&lt;/td&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;td width=&quot;7&quot;&gt;&lt;img src=&quot;bilder/images/iamges_input/images/input_07.png&quot; width=&quot;7&quot; height=&quot;17&quot; /&gt;&lt;/td&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;td width=&quot;113&quot;&gt;&lt;a href=&quot;kommunikation.html&quot; onmouseout=&quot;MM_swapImgRestore()&quot; onmouseover=&quot;MM_swapImage(&#039;Image15&#039;,&#039;&#039;,&#039;bilder/images/iamges_input/images/buttons_08.png&#039;,1)&quot;&gt;&lt;img src=&quot;bilder/images/iamges_input/images/input_08.png&quot; name=&quot;Image15&quot; width=&quot;113&quot; height=&quot;17&quot; border=&quot;0&quot; id=&quot;Image15&quot; /&gt;&lt;/a&gt;&lt;/td&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;td width=&quot;8&quot;&gt;&lt;img src=&quot;bilder/images/iamges_input/images/input_09.png&quot; width=&quot;8&quot; height=&quot;17&quot; /&gt;&lt;/td&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;td width=&quot;80&quot; height=&quot;17&quot;&gt;&lt;a href=&quot;fotografie.html&quot; onmouseout=&quot;MM_swapImgRestore()&quot; onmouseover=&quot;MM_swapImage(&#039;Image16&#039;,&#039;&#039;,&#039;bilder/images/iamges_input/images/buttons_10.png&#039;,1)&quot;&gt;&lt;img src=&quot;bilder/images/iamges_input/images/input_10.png&quot; name=&quot;Image16&quot; width=&quot;80&quot; height=&quot;17&quot; border=&quot;0&quot; id=&quot;Image16&quot; /&gt;&lt;/a&gt;&lt;/td&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;td width=&quot;8&quot; height=&quot;17&quot;&gt;&lt;img src=&quot;bilder/images/iamges_input/images/input_11.png&quot; width=&quot;8&quot; height=&quot;17&quot; /&gt;&lt;/td&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;td width=&quot;60&quot; height=&quot;17&quot;&gt;&lt;a href=&quot;kontakt.html&quot; onmouseout=&quot;MM_swapImgRestore()&quot; onmouseover=&quot;MM_swapImage(&#039;Image17&#039;,&#039;&#039;,&#039;bilder/images/iamges_input/images/buttons_12.png&#039;,1)&quot;&gt;&lt;img src=&quot;bilder/images/iamges_input/images/input_12.png&quot; name=&quot;Image17&quot; width=&quot;60&quot; height=&quot;17&quot; border=&quot;0&quot; id=&quot;Image17&quot; /&gt;&lt;/a&gt;&lt;/td&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;td width=&quot;183&quot; height=&quot;48&quot; rowspan=&quot;2&quot;&gt;&lt;img src=&quot;bilder/images/iamges_input/images/input_13.png&quot; alt=&quot;&quot; width=&quot;183&quot; height=&quot;48&quot; /&gt;&lt;/td&gt;&nbsp; &nbsp; &nbsp; &lt;/tr&gt;&nbsp; &nbsp; &nbsp; &lt;tr&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;td height=&quot;31&quot; colspan=&quot;7&quot;&gt;&lt;img src=&quot;bilder/images/iamges_input/images/content/page_slices_content_14.png&quot; width=&quot;310&quot; height=&quot;31&quot; /&gt;&lt;/td&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;/tr&gt;&nbsp; &nbsp; &nbsp; &lt;tr&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;td height=&quot;298&quot; colspan=&quot;11&quot;&gt;&lt;table width=&quot;100%&quot; border=&quot;0&quot; cellspacing=&quot;0&quot; cellpadding=&quot;0&quot;&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;tr&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;td height=&quot;50&quot; colspan=&quot;12&quot;&gt;&lt;table width=&quot;100%&quot; border=&quot;0&quot; cellspacing=&quot;0&quot; cellpadding=&quot;0&quot;&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;tr&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;td width=&quot;1075&quot; height=&quot;50&quot;&gt;&lt;img src=&quot;bilder/images/iamges_input/images/content/page_slices_content_15.jpg&quot; width=&quot;1075&quot; height=&quot;48&quot; /&gt;&lt;/td&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/tr&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/table&gt;&lt;/td&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/tr&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;tr&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;td width=&quot;104&quot; height=&quot;330&quot; rowspan=&quot;5&quot;&gt;&amp;nbsp;&lt;/td&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;td width=&quot;160&quot; height=&quot;330&quot; rowspan=&quot;5&quot; class=&quot;table3&quot;&gt;&lt;div class=&quot;sc_menu_wrapper&quot;&gt;&nbsp; &lt;div class=&quot;sc_menu&quot;&gt;&nbsp; &nbsp; &lt;a title=&quot;Menu&quot; href=&quot;#&quot;&gt;&lt;img src=&quot;bilder/1.jpg&quot; alt=&quot;Menu&quot;/ align=&quot;middle&quot;&gt;&lt;/a&gt;&nbsp; &nbsp; &lt;a title=&quot;Navigation&quot; href=&quot;#&quot;&gt;&lt;img src=&quot;bilder/1.jpg&quot; alt=&quot;Navigation&quot;/&gt;&lt;/a&gt;&nbsp; &nbsp; &lt;a title=&quot;jQuery&quot; href=&quot;#&quot;&gt;&lt;img src=&quot;bilder/1.jpg&quot; alt=&quot;jQuery&quot;/&gt;&lt;/a&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;a title=&quot;CSS&quot; href=&quot;#&quot;&gt;&lt;img src=&quot;bilder/1.jpg&quot; alt=&quot;CSS&quot;/&gt;&lt;/a&gt;&nbsp; &nbsp; &lt;a title=&quot;Vertical&quot; href=&quot;#&quot;&gt;&lt;img src=&quot;bilder/1.jpg&quot; alt=&quot;Vertical&quot;/&gt;&lt;/a&gt;&nbsp; &nbsp; &lt;a title=&quot;Menu&quot; href=&quot;#&quot;&gt;&lt;img src=&quot;bilder/1.jpg&quot; alt=&quot;Menu&quot;/&gt;&lt;/a&gt;&nbsp; &nbsp; &lt;a title=&quot;Navigation&quot; href=&quot;#&quot;&gt;&lt;img src=&quot;bilder/1.jpg&quot; alt=&quot;Navigation&quot;/&gt;&lt;/a&gt;&nbsp; &nbsp; &nbsp; &lt;/div&gt;&lt;/div&gt;&lt;/td&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;td width=&quot;58&quot; rowspan=&quot;5&quot;&gt;&amp;nbsp;&lt;/td&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;td width=&quot;154&quot; height=&quot;86&quot;&gt;&amp;nbsp;&lt;/td&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;td width=&quot;15&quot; height=&quot;86&quot;&gt;&amp;nbsp;&lt;/td&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;td width=&quot;154&quot; height=&quot;86&quot;&gt;&amp;nbsp;&lt;/td&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;td width=&quot;15&quot; height=&quot;86&quot;&gt;&amp;nbsp;&lt;/td&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;td width=&quot;154&quot; height=&quot;86&quot;&gt;&amp;nbsp;&lt;/td&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;td width=&quot;14&quot; height=&quot;86&quot;&gt;&amp;nbsp;&lt;/td&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;td width=&quot;154&quot; height=&quot;88&quot;&gt;&amp;nbsp;&lt;/td&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;td width=&quot;14&quot;&gt;&amp;nbsp;&lt;/td&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;td width=&quot;79&quot;&gt;&amp;nbsp;&lt;/td&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/tr&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;tr&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;td height=&quot;35&quot; colspan=&quot;7&quot;&gt;&amp;nbsp;&lt;/td&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;td width=&quot;14&quot; height=&quot;35&quot;&gt;&amp;nbsp;&lt;/td&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;td width=&quot;79&quot; height=&quot;35&quot;&gt;&amp;nbsp;&lt;/td&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/tr&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;tr&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;td width=&quot;154&quot; height=&quot;86&quot;&gt;&amp;nbsp;&lt;/td&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;td height=&quot;86&quot;&gt;&amp;nbsp;&lt;/td&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;td width=&quot;154&quot; height=&quot;86&quot;&gt;&amp;nbsp;&lt;/td&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;td height=&quot;86&quot;&gt;&amp;nbsp;&lt;/td&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;td height=&quot;86&quot;&gt;&amp;nbsp;&lt;/td&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;td height=&quot;86&quot;&gt;&amp;nbsp;&lt;/td&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;td width=&quot;154&quot; height=&quot;86&quot;&gt;&amp;nbsp;&lt;/td&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;td width=&quot;14&quot; height=&quot;86&quot;&gt;&amp;nbsp;&lt;/td&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;td width=&quot;79&quot; height=&quot;86&quot;&gt;&amp;nbsp;&lt;/td&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/tr&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;tr&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;td height=&quot;35&quot; colspan=&quot;7&quot;&gt;&amp;nbsp;&lt;/td&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;td width=&quot;14&quot; height=&quot;35&quot;&gt;&amp;nbsp;&lt;/td&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;td width=&quot;79&quot; height=&quot;35&quot;&gt;&amp;nbsp;&lt;/td&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/tr&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;tr&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;td width=&quot;154&quot; height=&quot;86&quot;&gt;&amp;nbsp;&lt;/td&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;td height=&quot;86&quot;&gt;&amp;nbsp;&lt;/td&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;td height=&quot;86&quot;&gt;&amp;nbsp;&lt;/td&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;td height=&quot;86&quot;&gt;&amp;nbsp;&lt;/td&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;td height=&quot;86&quot;&gt;&amp;nbsp;&lt;/td&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;td height=&quot;86&quot;&gt;&amp;nbsp;&lt;/td&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;td width=&quot;154&quot; height=&quot;86&quot;&gt;&amp;nbsp;&lt;/td&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;td width=&quot;14&quot; height=&quot;86&quot;&gt;&amp;nbsp;&lt;/td&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;td width=&quot;79&quot; height=&quot;86&quot;&gt;&amp;nbsp;&lt;/td&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/tr&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;/table&gt;&lt;/td&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;/tr&gt;&nbsp; &nbsp; &nbsp; &lt;tr&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;td height=&quot;116&quot; colspan=&quot;11&quot;&gt;&lt;table width=&quot;100%&quot; border=&quot;0&quot; cellspacing=&quot;0&quot; cellpadding=&quot;0&quot;&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;tr&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;td width=&quot;1075&quot; height=&quot;116&quot;&gt;&lt;table width=&quot;100%&quot; border=&quot;0&quot; cellspacing=&quot;0&quot; cellpadding=&quot;0&quot;&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;tr&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;td width=&quot;322&quot; height=&quot;116&quot; rowspan=&quot;3&quot;&gt;&amp;nbsp;&lt;/td&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;td height=&quot;16&quot; colspan=&quot;4&quot;&gt;&amp;nbsp;&lt;/td&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;td width=&quot;482&quot; height=&quot;16&quot;&gt;&amp;nbsp;&lt;/td&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;td width=&quot;46&quot;&gt;&amp;nbsp;&lt;/td&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;td height=&quot;16&quot;&gt;&amp;nbsp;&lt;/td&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/tr&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;tr&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;td width=&quot;42&quot; height=&quot;26&quot;&gt;&lt;a href=&quot;#&quot; onmouseout=&quot;MM_swapImgRestore()&quot; onmouseover=&quot;MM_swapImage(&#039;Image19&#039;,&#039;&#039;,&#039;bilder/images/iamges_input/images/content/page_slices_content_48.jpg&#039;,1)&quot;&gt;&lt;img src=&quot;bilder/images/iamges_input/images/content/Film_buttons_48.jpg&quot; name=&quot;Image19&quot; width=&quot;42&quot; height=&quot;26&quot; border=&quot;0&quot; id=&quot;Image19&quot; /&gt;&lt;/a&gt;&lt;/td&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;td width=&quot;7&quot; height=&quot;26&quot;&gt;&amp;nbsp;&lt;/td&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;td width=&quot;92&quot; height=&quot;26&quot;&gt;&lt;a href=&quot;#&quot; onmouseout=&quot;MM_swapImgRestore()&quot; onmouseover=&quot;MM_swapImage(&#039;Image20&#039;,&#039;&#039;,&#039;bilder/images/iamges_input/images/content/page_slices_content_50.jpg&#039;,1)&quot;&gt;&lt;img src=&quot;bilder/images/iamges_input/images/content/Film_buttons_50.jpg&quot; name=&quot;Image20&quot; width=&quot;92&quot; height=&quot;26&quot; border=&quot;0&quot; id=&quot;Image20&quot; /&gt;&lt;/a&gt;&lt;/td&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;td width=&quot;7&quot; height=&quot;26&quot;&gt;&amp;nbsp;&lt;/td&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;td height=&quot;26&quot; colspan=&quot;2&quot;&gt;&lt;a href=&quot;#&quot; onmouseout=&quot;MM_swapImgRestore()&quot; onmouseover=&quot;MM_swapImage(&#039;Image21&#039;,&#039;&#039;,&#039;bilder/images/iamges_input/images/content/page_slices_content_52.jpg&#039;,1)&quot;&gt;&lt;img src=&quot;bilder/images/iamges_input/images/content/Film_buttons_52.jpg&quot; name=&quot;Image21&quot; width=&quot;53&quot; height=&quot;26&quot; border=&quot;0&quot; id=&quot;Image21&quot; /&gt;&lt;/a&gt;&lt;/td&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;td width=&quot;77&quot;&gt;&amp;nbsp;&lt;/td&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/tr&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;tr&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;td height=&quot;71&quot; colspan=&quot;7&quot;&gt;&amp;nbsp;&lt;/td&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/tr&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/table&gt;&lt;/td&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/tr&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;/table&gt;&lt;/td&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;/tr&gt;&nbsp; &nbsp; &nbsp; &lt;tr&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;td height=&quot;65&quot; colspan=&quot;11&quot;&gt;&lt;img src=&quot;bilder/images/iamges_input/images/input_17.png&quot; width=&quot;1075&quot; height=&quot;65&quot; /&gt;&lt;/td&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;/tr&gt;&nbsp; &nbsp; &lt;/table&gt;&lt;/td&gt;&nbsp; &lt;/tr&gt;&nbsp; &lt;/table&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;[/code]Der Java-Script Code:[code]// JavaScript Documentfunction makeScrollable(wrapper, scrollable){}$(function(){&nbsp;&nbsp; &nbsp; makeScrollable(&quot;div.sc_menu_wrapper&quot;, &quot;div.sc_menu&quot;);});function makeScrollable(wrapper, scrollable){&nbsp; // Get jQuery elements&nbsp; var wrapper = $(wrapper), scrollable = $(scrollable);&nbsp; // Hide images until they are not loaded&nbsp; scrollable.hide();&nbsp; var loading = $(&quot;&lt;div class=&#039;loading&#039;&gt;&lt;/div&gt;&quot;).appendTo(wrapper);&nbsp; // Set function that will check if all images are loaded&nbsp; var interval = setInterval(function(){&nbsp; &nbsp; var images = scrollable.find(&quot;img&quot;);&nbsp; &nbsp; var completed = 0;&nbsp; &nbsp; // Counts number of images that are succesfully loaded&nbsp; &nbsp; images.each(function(){&nbsp; &nbsp; &nbsp; if (this.complete) completed++;&nbsp;&nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; if (completed == images.length){&nbsp; &nbsp; &nbsp; clearInterval(interval);&nbsp; &nbsp; &nbsp; // Timeout added to fix problem with Chrome&nbsp; &nbsp; &nbsp; setTimeout(function(){&nbsp; &nbsp; &nbsp; &nbsp; loading.hide();&nbsp; &nbsp; &nbsp; &nbsp; // Remove scrollbars&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; wrapper.css({overflow: &quot;hidden&quot;});&nbsp; &nbsp; &nbsp; &nbsp; scrollable.slideDown(&quot;slow&quot;, function(){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; enable(); &nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; }, 1000); &nbsp; &nbsp; }&nbsp; }, 100);&nbsp; function enable(){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }}function enable(){&nbsp; // height of area at the top at bottom, that don&#039;t respond to mousemove&nbsp; var inactiveMargin = 100;&nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; // Cache for performance&nbsp; var wrapperWidth = wrapper.width();&nbsp; var wrapperHeight = wrapper.height();&nbsp; // Using outer height to include padding too&nbsp; var scrollableHeight = scrollable.outerHeight() + 2*inactiveMargin;&nbsp; // Do not cache wrapperOffset, because it can change when user resizes window&nbsp; // We could use onresize event, but it&#039;s just not worth doing that &nbsp; // var wrapperOffset = wrapper.offset();&nbsp; //When user move mouse over menu&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; wrapper.mousemove(function(e){&nbsp; &nbsp; var wrapperOffset = wrapper.offset();&nbsp; &nbsp; // Scroll menu&nbsp; &nbsp; var top = (e.pageY -&nbsp; wrapperOffset.top) * (scrollableHeight - wrapperHeight) / wrapperHeight&nbsp; - inactiveMargin;&nbsp; &nbsp; if (top &lt; 0){&nbsp; &nbsp; &nbsp; top = 0;&nbsp; &nbsp; }&nbsp; &nbsp; wrapper.scrollTop(top);&nbsp; });&nbsp; &nbsp; &nbsp;&nbsp; }function enable(){&nbsp; &nbsp; // height of area at the top at bottom, that don&#039;t respond to mousemove&nbsp; var inactiveMargin = 100;&nbsp; &nbsp;&nbsp; &nbsp; // Cache for performance&nbsp; var wrapperWidth = wrapper.width();&nbsp; var wrapperHeight = wrapper.height();&nbsp; // Using outer height to include padding too&nbsp; var scrollableHeight = scrollable.outerHeight() + 2*inactiveMargin;&nbsp; // Do not cache wrapperOffset, because it can change when user resizes window&nbsp; // We could use onresize event, but it&#039;s just not worth doing that &nbsp; // var wrapperOffset = wrapper.offset();&nbsp; // Create a invisible tooltip&nbsp; var tooltip = $(&#039;&amp;lt;div class=&amp;quot;sc_menu_tooltip&amp;quot;&amp;gt;&amp;lt;/div&amp;gt;&#039;)&nbsp; &nbsp; .css(&#039;opacity&#039;, 0)&nbsp; &nbsp; .appendTo(wrapper);&nbsp; // Save menu titles&nbsp; scrollable.find(&#039;a&#039;).each(function(){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; // The &quot;data&quot; function attaches custom data to an element&nbsp; &nbsp; $(this).data(&#039;tooltipText&#039;, this.title);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; // Remove default tooltip&nbsp; scrollable.find(&#039;a&#039;).removeAttr(&#039;title&#039;);&nbsp; &nbsp;&nbsp; &nbsp; // Remove default tooltip in IE&nbsp; scrollable.find(&#039;img&#039;).removeAttr(&#039;alt&#039;);&nbsp; var lastTarget;&nbsp; //When user move mouse over menu&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; wrapper.mousemove(function(e){&nbsp; &nbsp; // Save target&nbsp; &nbsp; lastTarget = e.target;&nbsp; &nbsp; var wrapperOffset = wrapper.offset();&nbsp; &nbsp; var tooltipLeft = e.pageX - wrapperOffset.left;&nbsp; &nbsp; // Do not let tooltip to move out of menu.&nbsp; &nbsp; // Because overflow is set to hidden, we will not be able too see it &nbsp; &nbsp; tooltipLeft = Math.min(tooltipLeft, wrapperWidth - 75); //tooltip.outerWidth());&nbsp; &nbsp; var tooltipTop = e.pageY - wrapperOffset.top&nbsp;&nbsp; wrapper.scrollTop() - 40;&nbsp; &nbsp; // Move tooltip under the mouse when we are in the higher part of the menu&nbsp; &nbsp; if (e.pageY - wrapperOffset.top &amp;lt; wrapperHeight/2){&nbsp; &nbsp; &nbsp; tooltipTop&nbsp; = 80;&nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; tooltip.css({top: tooltipTop, left: tooltipLeft});&nbsp; &nbsp; // Scroll menu&nbsp; &nbsp; var top = (e.pageY -&nbsp; wrapperOffset.top) * (scrollableHeight - wrapperHeight) / wrapperHeight&nbsp; - inactiveMargin;&nbsp; &nbsp; if (top &lt; 0){&nbsp; &nbsp; &nbsp; top = 0;&nbsp; &nbsp; }&nbsp; &nbsp; wrapper.scrollTop(top);&nbsp; });&nbsp; // Setting interval helps solving perfomance problems in IE&nbsp; var interval = setInterval(function(){&nbsp; &nbsp; if (!lastTarget) return;&nbsp; &nbsp; var currentText = tooltip.text();&nbsp; &nbsp; if (lastTarget.nodeName == &#039;IMG&#039;){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // We&#039;ve attached data to a link, not image&nbsp; &nbsp; &nbsp; var newText = $(lastTarget).parent().data(&#039;tooltipText&#039;);&nbsp; &nbsp; &nbsp; // Show tooltip with the new text&nbsp; &nbsp; &nbsp; if (currentText != newText) {&nbsp; &nbsp; &nbsp; &nbsp; tooltip&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; .stop(true)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; .css(&#039;opacity&#039;, 0)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; .text(newText)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; .animate({opacity: 1}, 1000);&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; }&nbsp; }, 200);&nbsp; // Hide tooltip when leaving menu&nbsp; wrapper.mouseleave(function(){&nbsp; &nbsp; lastTarget = false;&nbsp; &nbsp; tooltip.stop(true).css(&#039;opacity&#039;, 0).text(&#039;&#039;);&nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; }[/code]Ich hoffe ihr könnt mir helfen...MfGGariZZo</blockquote>

[QUOTE="GariZZo, post: 1670649, member: 8701"] 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: [url=http://valums.com/files/2009/vertical-menu/final.htm]Create a Scrolling Menu: Result[/url] und hab auch schritt für schritt das tutorial verfolgt. Dennoch klappt es nicht wie ich es will: 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]var tooltip = $('<div class="sc_menu_tooltip"></div>')[/code] Der gesammte html Code: [code]<!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Werbeagentur Vision First - Main // Hamburg, Germany</title> <style type="text/css"> #Accordion1 .AccordionPanel .AccordionPanelTab strong { font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif; color: #aaf000; } #Accordion2 .AccordionPanel.AccordionPanelOpen .AccordionPanelContent table tr td { font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif; font-size: 14px; } .table2 { background-image: url(bilder/images/3.png); background-repeat: no-repeat; } #Accordion1 .AccordionPanel.AccordionPanelOpen .AccordionPanelContent table tr td { font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif; font-size: 14px; text-align: right; } 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; } div.sc_menu_wrapper { position: relative; height: 250px; /* Make bigger than a photo, because we need a place for a scroll-bar. */ width: 200px; margin-top: 30px; overflow: auto; } div.sc_menu { padding: 15px 0; } .sc_menu a { display:block; margin-bottom: 1px; width: 155px; border: 2px rgb(79, 79, 79) solid; -webkit-border-radius: 4px; -moz-border-radius: 4px; /* When image support is turned off */ color: #fd7b2d; background: rgb(79, 79, 79); } .sc_menu a:hover { border-color: rgb(253, 123, 45); border-style:solid; } .sc_menu img { display: block; border: none; } /* Styling tooltip */ .sc_menu_tooltip { display: block; position: absolute; padding: 6px; font-size: 12px; color: #fff; -webkit-border-radius: 4px; -moz-border-radius: 4px; border: 1px solid rgb(79, 79, 79); background: rgb(0, 0, 0); /* Make background a bit transparent for browsers that support rgba */ background: rgba(0, 0, 0, 0.5); } .table3 { background-image: url(bilder/images/iamges_input/images/content/page_slices_content_20.jpg); background-repeat: no-repeat; } </style> <script type="text/javascript"> function MM_swapImgRestore() { //v3.0 var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc; } function MM_preloadImages() { //v3.0 var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array(); var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++) if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}} } function MM_findObj(n, d) { //v4.01 var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) { d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);} if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n]; for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document); if(!x && d.getElementById) x=d.getElementById(n); return x; } function MM_swapImage() { //v3.0 var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3) if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];} } </script> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js" type="text/javascript"></script> <script src="film_stylesheet.js" type="text/javascript"></script> </head> <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')"> <div align="center"> <table width="1075" height="790" border="0" cellspacing="0" cellpadding="0"> <tr> <td><table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td height="117" colspan="11"><img src="bilder/images/iamges_input/images/input_01.png" width="1075" height="117" /></td> </tr> <tr> <td width="132" height="113" rowspan="3"><img src="bilder/images/iamges_input/images/input_02.png" width="132" height="113" /></td> <td width="122" height="113" rowspan="3"><img src="bilder/images/iamges_input/images/input_03.png" width="122" height="113" /></td> <td height="65" colspan="9"><img src="bilder/images/iamges_input/images/input_04.png" width="821" height="65" /></td> </tr> <tr> <td width="328" height="48" rowspan="2"><img src="bilder/images/iamges_input/images/input_05.png" width="328" height="48" /></td> <td width="34"><img src="bilder/images/iamges_input/images/buttons_06.png" width="34" height="17" /></td> <td width="7"><img src="bilder/images/iamges_input/images/input_07.png" width="7" height="17" /></td> <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> <td width="8"><img src="bilder/images/iamges_input/images/input_09.png" width="8" height="17" /></td> <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> <td width="8" height="17"><img src="bilder/images/iamges_input/images/input_11.png" width="8" height="17" /></td> <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> <td width="183" height="48" rowspan="2"><img src="bilder/images/iamges_input/images/input_13.png" alt="" width="183" height="48" /></td> </tr> <tr> <td height="31" colspan="7"><img src="bilder/images/iamges_input/images/content/page_slices_content_14.png" width="310" height="31" /></td> </tr> <tr> <td height="298" colspan="11"><table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td height="50" colspan="12"><table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="1075" height="50"><img src="bilder/images/iamges_input/images/content/page_slices_content_15.jpg" width="1075" height="48" /></td> </tr> </table></td> </tr> <tr> <td width="104" height="330" rowspan="5"> </td> <td width="160" height="330" rowspan="5" class="table3"><div class="sc_menu_wrapper"> <div class="sc_menu"> <a title="Menu" href="#"><img src="bilder/1.jpg" alt="Menu"/ align="middle"></a> <a title="Navigation" href="#"><img src="bilder/1.jpg" alt="Navigation"/></a> <a title="jQuery" href="#"><img src="bilder/1.jpg" alt="jQuery"/></a> <a title="CSS" href="#"><img src="bilder/1.jpg" alt="CSS"/></a> <a title="Vertical" href="#"><img src="bilder/1.jpg" alt="Vertical"/></a> <a title="Menu" href="#"><img src="bilder/1.jpg" alt="Menu"/></a> <a title="Navigation" href="#"><img src="bilder/1.jpg" alt="Navigation"/></a> </div> </div> </td> <td width="58" rowspan="5"> </td> <td width="154" height="86"> </td> <td width="15" height="86"> </td> <td width="154" height="86"> </td> <td width="15" height="86"> </td> <td width="154" height="86"> </td> <td width="14" height="86"> </td> <td width="154" height="88"> </td> <td width="14"> </td> <td width="79"> </td> </tr> <tr> <td height="35" colspan="7"> </td> <td width="14" height="35"> </td> <td width="79" height="35"> </td> </tr> <tr> <td width="154" height="86"> </td> <td height="86"> </td> <td width="154" height="86"> </td> <td height="86"> </td> <td height="86"> </td> <td height="86"> </td> <td width="154" height="86"> </td> <td width="14" height="86"> </td> <td width="79" height="86"> </td> </tr> <tr> <td height="35" colspan="7"> </td> <td width="14" height="35"> </td> <td width="79" height="35"> </td> </tr> <tr> <td width="154" height="86"> </td> <td height="86"> </td> <td height="86"> </td> <td height="86"> </td> <td height="86"> </td> <td height="86"> </td> <td width="154" height="86"> </td> <td width="14" height="86"> </td> <td width="79" height="86"> </td> </tr> </table></td> </tr> <tr> <td height="116" colspan="11"><table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="1075" height="116"><table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="322" height="116" rowspan="3"> </td> <td height="16" colspan="4"> </td> <td width="482" height="16"> </td> <td width="46"> </td> <td height="16"> </td> </tr> <tr> <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> <td width="7" height="26"> </td> <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> <td width="7" height="26"> </td> <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> <td width="77"> </td> </tr> <tr> <td height="71" colspan="7"> </td> </tr> </table></td> </tr> </table></td> </tr> <tr> <td height="65" colspan="11"><img src="bilder/images/iamges_input/images/input_17.png" width="1075" height="65" /></td> </tr> </table></td> </tr> </table> </div> </body> </html> [/code] Der Java-Script Code: [code]// JavaScript Document function makeScrollable(wrapper, scrollable){ } $(function(){ makeScrollable("div.sc_menu_wrapper", "div.sc_menu"); }); function makeScrollable(wrapper, scrollable){ // Get jQuery elements var wrapper = $(wrapper), scrollable = $(scrollable); // Hide images until they are not loaded scrollable.hide(); var loading = $("<div class='loading'></div>").appendTo(wrapper); // Set function that will check if all images are loaded var interval = setInterval(function(){ var images = scrollable.find("img"); var completed = 0; // Counts number of images that are succesfully loaded images.each(function(){ if (this.complete) completed++; }); if (completed == images.length){ clearInterval(interval); // Timeout added to fix problem with Chrome setTimeout(function(){ loading.hide(); // Remove scrollbars wrapper.css({overflow: "hidden"}); scrollable.slideDown("slow", function(){ enable(); }); }, 1000); } }, 100); function enable(){ } } function enable(){ // height of area at the top at bottom, that don't respond to mousemove var inactiveMargin = 100; // Cache for performance var wrapperWidth = wrapper.width(); var wrapperHeight = wrapper.height(); // Using outer height to include padding too var scrollableHeight = scrollable.outerHeight() + 2*inactiveMargin; // Do not cache wrapperOffset, because it can change when user resizes window // We could use onresize event, but it's just not worth doing that // var wrapperOffset = wrapper.offset(); //When user move mouse over menu wrapper.mousemove(function(e){ var wrapperOffset = wrapper.offset(); // Scroll menu var top = (e.pageY - wrapperOffset.top) * (scrollableHeight - wrapperHeight) / wrapperHeight - inactiveMargin; if (top < 0){ top = 0; } wrapper.scrollTop(top); }); } function enable(){ // height of area at the top at bottom, that don't respond to mousemove var inactiveMargin = 100; // Cache for performance var wrapperWidth = wrapper.width(); var wrapperHeight = wrapper.height(); // Using outer height to include padding too var scrollableHeight = scrollable.outerHeight() + 2*inactiveMargin; // Do not cache wrapperOffset, because it can change when user resizes window // We could use onresize event, but it's just not worth doing that // var wrapperOffset = wrapper.offset(); // Create a invisible tooltip var tooltip = $('<div class="sc_menu_tooltip"></div>') .css('opacity', 0) .appendTo(wrapper); // Save menu titles scrollable.find('a').each(function(){ // The "data" function attaches custom data to an element $(this).data('tooltipText', this.title); }); // Remove default tooltip scrollable.find('a').removeAttr('title'); // Remove default tooltip in IE scrollable.find('img').removeAttr('alt'); var lastTarget; //When user move mouse over menu wrapper.mousemove(function(e){ // Save target lastTarget = e.target; var wrapperOffset = wrapper.offset(); var tooltipLeft = e.pageX - wrapperOffset.left; // Do not let tooltip to move out of menu. // Because overflow is set to hidden, we will not be able too see it tooltipLeft = Math.min(tooltipLeft, wrapperWidth - 75); //tooltip.outerWidth()); var tooltipTop = e.pageY - wrapperOffset.top wrapper.scrollTop() - 40; // Move tooltip under the mouse when we are in the higher part of the menu if (e.pageY - wrapperOffset.top < wrapperHeight/2){ tooltipTop = 80; } tooltip.css({top: tooltipTop, left: tooltipLeft}); // Scroll menu var top = (e.pageY - wrapperOffset.top) * (scrollableHeight - wrapperHeight) / wrapperHeight - inactiveMargin; if (top < 0){ top = 0; } wrapper.scrollTop(top); }); // Setting interval helps solving perfomance problems in IE var interval = setInterval(function(){ if (!lastTarget) return; var currentText = tooltip.text(); if (lastTarget.nodeName == 'IMG'){ // We've attached data to a link, not image var newText = $(lastTarget).parent().data('tooltipText'); // Show tooltip with the new text if (currentText != newText) { tooltip .stop(true) .css('opacity', 0) .text(newText) .animate({opacity: 1}, 1000); } } }, 200); // Hide tooltip when leaving menu wrapper.mouseleave(function(){ lastTarget = false; tooltip.stop(true).css('opacity', 0).text(''); }); } [/code] Ich hoffe ihr könnt mir helfen... MfG GariZZo [/QUOTE]

Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.

Authentifizierung

Wenn ▲ = 7, ▼ = 3, ◇ = 2 und die Summe von ▲ und ▼ durch ◇ geteilt wird, was ist das Ergebnis?