LinkBack URL
About LinkBacks
Zitierenzeig deinen code oder link
Hallo miteinander,
stecke momentan fest: suche effekt wie bei folgendem link:
http://www.cssplay.co.uk/menu/lightbox
also: beim mouseover soll das größere bild zentriert erscheinen. habe das mit ebenen im dw probiert, aber da flackert alles rum, wenn popups blockiert werden. habe mir den code der lightbox-seite angesehen: ich nix kapieren.
kann mir jemand helfen und eine leicht verständige version eines codes schicken? danke danke danke!!!
zeig deinen code oder link
computer tun nur das was man ihnen sagt, meistens
hier ist der code von den ebenen im dw:
<div id="pg1p1gr">
<td><div align="center"><img src="img/prodgr1.gif" name="prodgr1" width="120" height="80" onMouseOver="MM_showHideLayers('prgr1','','show')" onMouseOut="MM_showHideLayers('prgr1','','hide')"></div>
</td>
hoffe, du kannst etwas damit anfangen. wichtig wäre mir jedoch, dass das größere bild zentriert über dem kleineren erscheint. wie geht das?
hast du auch den css teil übernommen?
computer tun nur das was man ihnen sagt, meistens
Hallo,
das kann nicht der ganze Code für deine Bildanzeige sein.
Wenn ich den Quellcode deiner genannten Seite gehe,
sind dort jede Menge CSS-Anweisungen und CSS-Dateien eingebunden.
Du müßtest mal wirklich Deinen gesamten Code zeigen bzw. Online stellen.
Geändert von MichaelM (14.10.2008 um 14:59 Uhr)
Harleylujar, Michael!!
Man sieht nur mit dem Herzen gut - das Wesentliche ist für das Auge unsichtbar...
www.mikel-mueller.de
www.sanitaertechnik-mueller.de
deshalb auch meine frage zu css
computer tun nur das was man ihnen sagt, meistens
Also das ist alles, was ich gefunden hab. im css hab ich nur die styles. reicht das?
<script language="JavaScript" type="text/JavaScript">
<!--
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_showHideLayers() { //v6.0
var i,p,v,obj,args=MM_showHideLayers.arguments;
for (i=0; i<(args.length-2); i+=3) if ((obj=MM_findObj(args[i]))!=null) { v=args[i+2];
if (obj.style) { obj=obj.style; v=(v=='show')?'visible'v=='hide')?'hidden':v; }
obj.visibility=v; }
}
//-->
</script>
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) { //reloads the window if Nav4 resized
if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
//-->
</script>
und um die styles gehts, da wird alles definiert
computer tun nur das was man ihnen sagt, meistens
genau. und jetzt will ich das auf meine hp anwenden. ich weiß nur nicht, welcher teil des css für den bildertausch zuständig ist. kannst du mir da helfen?
habe bis jetzt kein bisschen von deinem css gesehen....
computer tun nur das was man ihnen sagt, meistens
nene, große verwirrung: also: ich habe im dw für die ebenen das verhalten bei mouseover ebene einblenden zugeordnet. im quellcode ist dann dieses javascript generiert worden. im stylesheet habe ich nichts geändert. aber das mit den ebenen passt mir eben nicht, weil das so eine zuckende geschichte ist. und ich dachte, diese seite auf lightbox ist so toll, genauso etwas will ich, nur kenn ich mich eben nicht aus, welchen teil des sourcecodes ich für meine seite verwenden soll um den gleichen effekt zu bekommen.
über verhalten (js) war das nicht vorhergesehen, nur css!
probiere dieses aus (nicht getestet!)und im headerHTML-Code:<div class="photo"> <ul class="topic"> <li><a class="set" href="#Portraits">Portraits<!--[if gte IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <ul> <li><a href="lbox/portrait1.jpg"><img src="lbox/portrait1a.jpg" alt="" title="" /></a></li> <li><a href="lbox/portrait2.jpg"><img src="lbox/portrait2a.jpg" alt="" title="" /></a></li> <li><a href="lbox/portrait3.jpg"><img src="lbox/portrait3a.jpg" alt="" title="" /></a></li> <li><a href="lbox/portrait4.jpg"><img src="lbox/portrait4a.jpg" alt="" title="" /></a></li> <li><a href="lbox/portrait5.jpg"><img src="lbox/portrait5a.jpg" alt="" title="" /></a></li> <li><a href="lbox/portrait6.jpg"><img src="lbox/portrait6a.jpg" alt="" title="" /></a></li> <li><a href="lbox/portrait7.jpg"><img src="lbox/portrait7a.jpg" alt="" title="" /></a></li> <li><a href="lbox/portrait8.jpg"><img src="lbox/portrait8a.jpg" alt="" title="" /></a></li> <li><a href="lbox/portrait9.jpg"><img src="lbox/portrait9a.jpg" alt="" title="" /></a></li> <li><a href="lbox/portrait10.jpg"><img src="lbox/portrait10a.jpg" alt="" title="" /></a></li> <li><a href="lbox/portrait11.jpg"><img src="lbox/portrait11a.jpg" alt="" title="" /></a></li> <li><a href="lbox/portrait12.jpg"><img src="lbox/portrait12a.jpg" alt="" title="" /></a></li> <li><a href="lbox/portrait13.jpg"><img src="lbox/portrait13a.jpg" alt="" title="" /></a></li> <li><a href="lbox/portrait14.jpg"><img src="lbox/portrait14a.jpg" alt="" title="" /></a></li> <li><a href="lbox/portrait15.jpg"><img src="lbox/portrait15a.jpg" alt="" title="" /></a></li> <li><a href="lbox/portrait16.jpg"><img src="lbox/portrait16a.jpg" alt="" title="" /></a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> <li class="active"><a class="set" href="#Landscapes">Landscapes<!--[if gte IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <ul> <li><a href="lbox/landscape1.jpg"><img src="lbox/landscape1a.jpg" alt="" title="" /></a></li> <li><a href="lbox/landscape2.jpg"><img src="lbox/landscape2a.jpg" alt="" title="" /></a></li> <li><a href="lbox/landscape3.jpg"><img src="lbox/landscape3a.jpg" alt="" title="" /></a></li> <li><a href="lbox/landscape4.jpg"><img src="lbox/landscape4a.jpg" alt="" title="" /></a></li> <li><a href="lbox/landscape5.jpg"><img src="lbox/landscape5a.jpg" alt="" title="" /></a></li> <li><a href="lbox/landscape6.jpg"><img src="lbox/landscape6a.jpg" alt="" title="" /></a></li> <li><a href="lbox/landscape7.jpg"><img src="lbox/landscape7a.jpg" alt="" title="" /></a></li> <li><a href="lbox/landscape8.jpg"><img src="lbox/landscape8a.jpg" alt="" title="" /></a></li> <li><a href="lbox/landscape9.jpg"><img src="lbox/landscape9a.jpg" alt="" title="" /></a></li> <li><a href="lbox/landscape10.jpg"><img src="lbox/landscape10a.jpg" alt="" title="" /></a></li> <li><a href="lbox/landscape11.jpg"><img src="lbox/landscape11a.jpg" alt="" title="" /></a></li> <li><a href="lbox/landscape12.jpg"><img src="lbox/landscape12a.jpg" alt="" title="" /></a></li> <li><a href="lbox/landscape13.jpg"><img src="lbox/landscape13a.jpg" alt="" title="" /></a></li> <li><a href="lbox/landscape14.jpg"><img src="lbox/landscape14a.jpg" alt="" title="" /></a></li> <li><a href="lbox/landscape15.jpg"><img src="lbox/landscape15a.jpg" alt="" title="" /></a></li> <li><a href="lbox/landscape16.jpg"><img src="lbox/landscape16a.jpg" alt="" title="" /></a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> <li><a class="set" href="#Flowers">Flowers<!--[if gte IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <ul> <li><a href="#flower1"><img src="lbox/flower1.jpg" alt="" title="" /></a></li> <li><a href="#flower2"><img src="lbox/flower2.jpg" alt="" title="" /></a></li> <li><a href="#flower3"><img src="lbox/flower3.jpg" alt="" title="" /></a></li> <li><a href="#flower4"><img src="lbox/flower4.jpg" alt="" title="" /></a></li> <li><a href="#flower5"><img src="lbox/flower5.jpg" alt="" title="" /></a></li> <li><a href="#flower6"><img src="lbox/flower6.jpg" alt="" title="" /></a></li> <li><a href="#flower7"><img src="lbox/flower7.jpg" alt="" title="" /></a></li> <li><a href="#flower8"><img src="lbox/flower8.jpg" alt="" title="" /></a></li> <li><a href="#flower9"><img src="lbox/flower9.jpg" alt="" title="" /></a></li> <li><a href="#flower10"><img src="lbox/flower10.jpg" alt="" title="" /></a></li> <li><a href="#flower11"><img src="lbox/flower11.jpg" alt="" title="" /></a></li> <li><a href="#flower12"><img src="lbox/flower12.jpg" alt="" title="" /></a></li> <li><a href="#flower13"><img src="lbox/flower13.jpg" alt="" title="" /></a></li> <li><a href="#flower14"><img src="lbox/flower14.jpg" alt="" title="" /></a></li> <li><a href="#flower15"><img src="lbox/flower15.jpg" alt="" title="" /></a></li> <li><a href="#flower16"><img src="lbox/flower16.jpg" alt="" title="" /></a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> <li><a class="set" href="#Trees">Trees<!--[if gte IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <ul> <li><a href="#tree1"><img src="lbox/tree1.jpg" alt="" title="" /></a></li> <li><a href="#tree1"><img src="lbox/tree2.jpg" alt="" title="" /></a></li> <li><a href="#tree1"><img src="lbox/tree3.jpg" alt="" title="" /></a></li> <li><a href="#tree1"><img src="lbox/tree4.jpg" alt="" title="" /></a></li> <li><a href="#tree1"><img src="lbox/tree5.jpg" alt="" title="" /></a></li> <li><a href="#tree1"><img src="lbox/tree6.jpg" alt="" title="" /></a></li> <li><a href="#tree1"><img src="lbox/tree7.jpg" alt="" title="" /></a></li> <li><a href="#tree1"><img src="lbox/tree8.jpg" alt="" title="" /></a></li> <li><a href="#tree1"><img src="lbox/tree9.jpg" alt="" title="" /></a></li> <li><a href="#tree1"><img src="lbox/tree10.jpg" alt="" title="" /></a></li> <li><a href="#tree1"><img src="lbox/tree11.jpg" alt="" title="" /></a></li> <li><a href="#tree1"><img src="lbox/tree12.jpg" alt="" title="" /></a></li> <li><a href="#tree1"><img src="lbox/tree13.jpg" alt="" title="" /></a></li> <li><a href="#tree1"><img src="lbox/tree14.jpg" alt="" title="" /></a></li> <li><a href="#tree1"><img src="lbox/tree15.jpg" alt="" title="" /></a></li> <li><a href="#tree1"><img src="lbox/tree16.jpg" alt="" title="" /></a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> <li><a class="set" href="#Birds">Birds<!--[if gte IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <ul> <li><a href="#bird1"><img src="lbox/bird1.jpg" alt="" title="" /></a></li> <li><a href="#bird2"><img src="lbox/bird2.jpg" alt="" title="" /></a></li> <li><a href="#bird3"><img src="lbox/bird3.jpg" alt="" title="" /></a></li> <li><a href="#bird4"><img src="lbox/bird4.jpg" alt="" title="" /></a></li> <li><a href="#bird5"><img src="lbox/bird5.jpg" alt="" title="" /></a></li> <li><a href="#bird6"><img src="lbox/bird6.jpg" alt="" title="" /></a></li> <li><a href="#bird7"><img src="lbox/bird7.jpg" alt="" title="" /></a></li> <li><a href="#bird8"><img src="lbox/bird8.jpg" alt="" title="" /></a></li> <li><a href="#bird9"><img src="lbox/bird9.jpg" alt="" title="" /></a></li> <li><a href="#bird10"><img src="lbox/bird10.jpg" alt="" title="" /></a></li> <li><a href="#bird11"><img src="lbox/bird11.jpg" alt="" title="" /></a></li> <li><a href="#bird12"><img src="lbox/bird12.jpg" alt="" title="" /></a></li> <li><a href="#bird13"><img src="lbox/bird13.jpg" alt="" title="" /></a></li> <li><a href="#bird14"><img src="lbox/bird14.jpg" alt="" title="" /></a></li> <li><a href="#bird15"><img src="lbox/bird15.jpg" alt="" title="" /></a></li> <li><a href="#bird16"><img src="lbox/bird16.jpg" alt="" title="" /></a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> </ul> <br class="clear" /> </div>HTML-Code:<style type="text/css"> ul.download {list-style-image:url(../menus/zip.gif);} ul.download li {padding-left:5px; font-size:11px; line-height:1.5em;} /* ================================================================ This copyright notice must be untouched at all times. The original version of this stylesheet and the associated (x)html is available at http://www.cssplay.co.uk/menu/lightbox.html Copyright (c) 2005-2007 Stu Nicholls. All rights reserved. This stylesheet and the associated (x)html may be modified in any way to fit your requirements. =================================================================== */ /* common styling */ a {color:#000;} a:hover {text-decoration:none;} a:visited {color:#000;} /* slides styling */ .photo {width:635px; height:550px; text-align:left; position:relative; margin:0 auto;} .photo ul.topic {padding:0; margin:0; list-style:none; width:635px; height:auto; position:relative; z-index:10;} .photo ul.topic li {display:block; width:125px; height:31px; float:left;} .photo ul.topic li a.set {display:block; font-size:11px; width:124px; height:30px; text-align:center; line-height:30px; color:#000; text-decoration:none; border:1px solid #fff; border-width:1px 1px 0 0; background:#ccc; font-family:verdana, arial, sans-serif;} .photo ul.topic li a ul, .photo ul.topic li ul {display:none;} .photo ul.topic li.active a {color:#000; background:#bbb;} .photo ul.topic li a:hover, .photo ul.topic li:hover a {color:#fff; background:#aaa;} .photo ul.topic li.active ul {display:block; position:absolute; left:0; top:31px; list-style:none; padding:0; margin:0; height:375px; background:#ddd; width:464px; padding:40px 60px; border:20px solid #bbb; z-index:1;} .photo ul.topic li a:hover ul, .photo ul.topic li:hover ul {display:block; position:absolute; left:0; top:31px; list-style:none; padding:0; margin:0; height:375px; background:#ddd; width:464px; padding:40px 60px; border:20px solid #aaa; z-index:100;} .photo ul.topic li ul li {display:inline; width:112px; height:87px; float:left; border:1px solid #fff; margin:1px;} .photo ul.topic li ul li a {display:block; width:110px; height:85px; cursor:default; float:left; text-decoration:none; background:#444; border:1px solid #888;} .photo ul.topic li ul li a img {display:block; width:100px; height:75px; border:5px solid #eee;} .photo ul.topic li a:hover ul li a:hover, .photo ul.topic li:hover ul li a:hover {white-space:normal; position:relative;} .photo ul.topic li a:hover ul li a:hover img, .photo ul.topic li:hover ul li a:hover img {position:absolute; left:-50px; top:-32px; width:200px; height:150px; border-color:#fff;} </style>
computer tun nur das was man ihnen sagt, meistens
Danke, ich schau mal, wie ich das hinkriege. mir ist aufgefallen, das ist in einer liste. jetzt hab ich aber alle meine bilder in einer tabelle. mir ist aber aufgefallen, dass lightbox das auch als liste hat. kann das der grund sein, warums nicht funktioniert? würde nämlidh schon gerne bei der tabelle bleiben, sonst kann ich das alles ummodeln.
<table border="0" align="center">
<tr>
<td height="20"> </td>
</tr>
<tr>
<td>
<table border="0" align="center" cellpadding="3">
<tr>
<td><div align="center"><img src="img/prodgr1.gif" name="prodgr1" onMouseOver="MM_swapImage('prodgr1','','img/pgruppe1/gr1prod1gr.gif',1)" onMouseOut="MM_swapImgRestore()"></div>
</td>
<td><div align="center"><img src="img/prodgr2.gif" width="120" height="80"></div></td>
<td><div align="center"><img src="img/prodgr3.gif" width="120" height="80"></div></td>
<td><div align="center"><img src="img/prodgr4.gif" width="120" height="80"></div></td>
<td><div align="center"><img src="img/prodgr5.gif" width="120" height="80"></div></td>
</tr>
<tr>
<td><div align="center"><a href="prodgr1.htm" target="mainFrame">Produktgruppe
1</a></div></td>
<td><div align="center">Produktgruppe 2</div></td>
<td><div align="center">Produktgruppe 3</div></td>
<td><div align="center">Produktgruppe 4</div></td>
<td><div align="center">Produktgruppe 5</div></td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td><div align="center"><img src="img/prodgr6.gif" width="120" height="80"></div></td>
<td><div align="center"><img src="img/prodgr7.gif" width="120" height="80"></div></td>
<td><div align="center"><img src="img/prodgr8.gif" width="120" height="80"></div></td>
<td><div align="center"><img src="img/prodgr9.gif" width="120" height="80"></div></td>
<td><div align="center"><img src="img/prodgr10.gif" width="120" height="80"></div></td>
</tr>
<tr>
<td>Produktgruppe 6</td>
<td>Produktgruppe 7</td>
<td>Produktgruppe 8</td>
<td>Produktgruppe 9</td>
<td>Produktgruppe 10</td>
</tr>
<tr>
<td colspan="4"><div align="center" class="fusszeile"></div>
<div align="center"></div>
<div align="center">
<p class="fusszeile"> </p>
</div></td>
<td> <div align="right"><a href="shop.htm" target="_blank">zum Shop></a></div></td>
</tr>
</table></td>
</tr>
<tr>
<td><div align="center" class="fusszeile"> </td>
</tr>
</table>
<p class="fusszeile"> </p>
</body>
das css stylt die liste, ich persönlich würde auch zur liste tendieren. es ist einfacher aus deiner tabelle eine liste zu erstellen (wo auch das css feststeht) als aus der liste eine tabelle, wobei das css noch angepasst werden müsste, geschweige die frage ob es dann überhaupt funzt.
computer tun nur das was man ihnen sagt, meistens
Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)
