Auf Thema antworten 2026

Beitrag

<blockquote data-quote="declaudi" data-source="post: 1443103" data-attributes="member: 257975">AW: On Mouse Over Effekt per GrafikaustauschHallo da bin ich noch mal. Habe das script von&nbsp;&nbsp; nochmal bearbeitet und bin auch endlich mal etwas weiter gekommen. Aber noch nicht so ganz zu frieden.Da ist erstmal mein Script:Der Headbereich:[html]&lt;style type=&quot;text/css&quot;&gt;&nbsp; &nbsp; * {margin: 0; padding: 0;}&nbsp; &nbsp; img {border: none;}&nbsp; &nbsp; ul.thumb {&nbsp; &nbsp; &nbsp; &nbsp; float: left;&nbsp; &nbsp; &nbsp; &nbsp; list-style: none;&nbsp; &nbsp; &nbsp; &nbsp; margin: 0; padding: 10px;&nbsp; &nbsp; }&nbsp; &nbsp; ul.thumb li {&nbsp; &nbsp; &nbsp; &nbsp; margin: 0; padding: 5px;&nbsp; &nbsp; &nbsp; &nbsp; float: left;&nbsp; &nbsp; &nbsp; &nbsp; position: relative;&nbsp; &nbsp; &nbsp; &nbsp; width: 50px;&nbsp; &nbsp; }&nbsp; &nbsp; ul.thumb li img {&nbsp; &nbsp; &nbsp; &nbsp; width: 44px; height: 46px;&nbsp; &nbsp; &nbsp; &nbsp; padding: 5px;&nbsp; &nbsp; &nbsp; &nbsp; background: url(grafikgaleriesammlung/icons/thumb1.png);&nbsp; &nbsp; &nbsp; &nbsp; position: absolute;&nbsp; &nbsp; &nbsp; &nbsp; left: 0; top: 0;&nbsp; &nbsp; &nbsp; &nbsp; -ms-interpolation-mode: bicubic; &nbsp; &nbsp; }&nbsp; &nbsp; ul.thumb li img.hover {&nbsp; &nbsp; &nbsp; &nbsp; background:url(grafikgaleriesammlung/icons/corporatedesign.png) no-repeat center center;&nbsp; &nbsp; &nbsp; &nbsp; border: none;&nbsp; &nbsp; }&lt;/style&gt;&lt;script type=&quot;text/javascript&quot; src=&quot;grafikgaleriesammlung/icons/jquery-latest.js&quot;&gt;&lt;/script&gt; &lt;script type=&quot;text/javascript&quot;&gt; &nbsp; &nbsp; $(document).ready(function(){&nbsp; &nbsp; &nbsp; &nbsp; //Larger thumbnail preview &nbsp; &nbsp; $(&quot;ul.thumb li&quot;).hover(function() { &nbsp; &nbsp; $(this).css({&#039;z-index&#039; : &#039;10&#039;});&nbsp; &nbsp; $(this).find(&#039;img&#039;).addClass(&quot;hover&quot;).stop()&nbsp; &nbsp; .animate({width: &#039;65px&#039;, height: &#039;70px&#039;,}, 200);&nbsp; &nbsp; &nbsp; } , function() {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $(this).css({&#039;z-index&#039; : &#039;0&#039;});&nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; $(this).find(&#039;img&#039;).removeClass(&quot;hover&quot;).stop()&nbsp; &nbsp; &nbsp; &nbsp; .animate({width: &#039;44px&#039;, height: &#039;46px&#039;,}, 400);&nbsp; &nbsp; });&nbsp; &nbsp; });&lt;/script&gt; [/html]Der Bodybereich[html]&lt;ul class=&quot;thumb&quot; id=&quot;table_icons&quot;&gt;&nbsp; &nbsp; &lt;li&gt;&lt;a href=&quot;corporate_design.html&quot;&gt;&lt;img src=&quot;grafikgaleriesammlung/icons/thumb1.jpg&quot; alt=&quot;&quot; /&gt;&lt;/a&gt;&lt;/li&gt;&nbsp; &nbsp; &lt;li&gt;&lt;a href=&quot;typografie.html&quot;&gt;&lt;img src=&quot;grafikgaleriesammlung/icons/thumb2.jpg&quot; alt=&quot;&quot; /&gt;&lt;/a&gt;&lt;/li&gt;&nbsp; &nbsp; &lt;li&gt;&lt;a href=&quot;grafische_produkte.html&quot;&gt;&lt;imggrafikgaleriesammlung/icons/thumb3.jpg&quot; alt=&quot;&quot; /&gt;&lt;/ src=&quot;a&gt;&lt;/li&gt;&nbsp; &nbsp; &lt;li&gt;&lt;a href=&quot;lailos_group.html&quot;&gt;&lt;img src=&quot;grafikgaleriesammlung/icons/thumb4.jpg&quot; alt=&quot;&quot; /&gt;&lt;/a&gt;&lt;/li&gt;&nbsp; &nbsp; &lt;li&gt;&lt;a href=&quot;fotografie.html&quot;&gt;&lt;img src=&quot;grafikgaleriesammlung/icons/thumb5.jpg&quot; alt=&quot;&quot; /&gt;&lt;/a&gt;&lt;/li&gt;&nbsp; &nbsp; &lt;li&gt;&lt;ahref=&quot;bildbearbeitung.html&quot;&gt;&lt;img src=&quot;grafikgaleriesammlung/icons/thumb6.jpg&quot; alt=&quot;&quot; /&gt;&lt;/a&gt;&lt;/li&gt;&nbsp; &nbsp; &lt;li&gt;&lt;a href=&quot;plastik.html&quot;&gt;&lt;img src=&quot;grafikgaleriesammlung/icons/thumb7.jpg&quot; alt=&quot;&quot; /&gt;&lt;/a&gt;&lt;/li&gt;&nbsp; &nbsp; &lt;li&gt;&lt;a href=&quot;malerei.html&quot;&gt;&lt;img src=&quot;grafikgaleriesammlung/icons/thumb8.jpg&quot; alt=&quot;&quot; /&gt;&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;[/html]Die noch auftretenden Probleme:Die Icons werden zwar animiert vergrößert, aber dabei aus der Mitte geschoben.Nach dem onMouseover - quasi beim runtergehen mit der Maus rastert es das Iconin einem größerem Rahmen mehrfach bevor es in die eigentlich Ursprungsgröße zurückspringt und ich weiß nicht genau wo ich das im Script beeinflusssen kann.Und ein nächstes Problem ist das immer nur die gleiche Grafik in allen 8 &quot;Rahmen&quot; erscheint. Wie speise ich die verschiedenenGrafiken durch das Script?Und noch eine allgemeine Frage: Muss ich irgendwo im Script angeben woher das jquery stammt oder darf ich es frei nutzen?Danke schon mal nochmal</blockquote>

[QUOTE="declaudi, post: 1443103, member: 257975"] [b]AW: On Mouse Over Effekt per Grafikaustausch[/b] Hallo da bin ich noch mal. Habe das script von nochmal bearbeitet und bin auch endlich mal etwas weiter gekommen. Aber noch nicht so ganz zu frieden. [U][B]Da ist erstmal mein Script:[/B][/U] [I] [U][B]Der Headbereich:[/B][/U][/I] [html]<style type="text/css"> * {margin: 0; padding: 0;} img {border: none;} ul.thumb { float: left; list-style: none; margin: 0; padding: 10px; } ul.thumb li { margin: 0; padding: 5px; float: left; position: relative; width: 50px; } ul.thumb li img { width: 44px; height: 46px; padding: 5px; background: url(grafikgaleriesammlung/icons/thumb1.png); position: absolute; left: 0; top: 0; -ms-interpolation-mode: bicubic; } ul.thumb li img.hover { background:url(grafikgaleriesammlung/icons/corporatedesign.png) no-repeat center center; border: none; } </style> <script type="text/javascript" src="grafikgaleriesammlung/icons/jquery-latest.js"></script> <script type="text/javascript"> $(document).ready(function(){ //Larger thumbnail preview $("ul.thumb li").hover(function() { $(this).css({'z-index' : '10'}); $(this).find('img').addClass("hover").stop() .animate({width: '65px', height: '70px',}, 200); } , function() { $(this).css({'z-index' : '0'}); $(this).find('img').removeClass("hover").stop() .animate({width: '44px', height: '46px',}, 400); }); }); </script> [/html][B][I][U]Der Bodybereich[/U][/I][/B] [html]<ul class="thumb" id="table_icons"> <li><a href="corporate_design.html"><img src="grafikgaleriesammlung/icons/thumb1.jpg" alt="" /></a></li> <li><a href="typografie.html"><img src="grafikgaleriesammlung/icons/thumb2.jpg" alt="" /></a></li> <li><a href="grafische_produkte.html"><imggrafikgaleriesammlung/icons/thumb3.jpg" alt="" /></ src="a></li> <li><a href="lailos_group.html"><img src="grafikgaleriesammlung/icons/thumb4.jpg" alt="" /></a></li> <li><a href="fotografie.html"><img src="grafikgaleriesammlung/icons/thumb5.jpg" alt="" /></a></li> <li><ahref="bildbearbeitung.html"><img src="grafikgaleriesammlung/icons/thumb6.jpg" alt="" /></a></li> <li><a href="plastik.html"><img src="grafikgaleriesammlung/icons/thumb7.jpg" alt="" /></a></li> <li><a href="malerei.html"><img src="grafikgaleriesammlung/icons/thumb8.jpg" alt="" /></a></li> </ul> [/html][B][I][U]Die noch auftretenden Probleme:[/U][/I][/B] Die Icons werden zwar animiert vergrößert, aber dabei aus der Mitte geschoben. Nach dem onMouseover - quasi beim runtergehen mit der Maus rastert es das Icon in einem größerem Rahmen mehrfach bevor es in die eigentlich Ursprungsgröße zurückspringt und ich weiß nicht genau wo ich das im Script beeinflusssen kann. Und ein nächstes Problem ist das immer nur die gleiche Grafik in allen 8 "Rahmen" erscheint. Wie speise ich die verschiedenen Grafiken durch das Script? Und noch eine allgemeine Frage: Muss ich irgendwo im Script angeben woher das jquery stammt oder darf ich es frei nutzen? Danke schon mal nochmal [/QUOTE]

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

Authentifizierung

Wenn ▲ = 5, ▼ = 2 und ■ = 7, was ist ▲ × ▼ + ■?