#1 5. Januar 2009 Zuletzt von einem Moderator bearbeitet: 14. April 2017 Vorschau bei Mouseover Hallo Leute, habe ein Problem! Ich will eine Gallerie erzeigen, wo ich so eine Vorschau habe: {bild-down: https://www.xup.in/tn/2009_01/56671117.jpeg} Die Gallerie ist Dynamisch. Danke BW gibts wie immer! + Multi-Zitat Zitieren
#2 5. Januar 2009 Zuletzt von einem Moderator bearbeitet: 15. April 2017 AW: Vorschau bei Mouseover Wenn du es nicht selber machen willst, kannst du Prototype oder script.aculo.us - web 2.0 javascript verwenden. Habe die beiden noch nie gebaucht, kann dir also nicht sagen wie es funktioniert. Jedoch habe ich gesehen das andere Webseiten diese Framework benutzen. Wart einfach bis Murdoc sich dazu äussert. *edit* gerade das hier gefunden: [JavaScript] Name einer JS Bildergalerie bzw. eines JS Scripts - RR:Board + Multi-Zitat Zitieren
#3 5. Januar 2009 AW: Vorschau bei Mouseover HTML: <html> <head> <script language="javascript"> function vorschau(url) { document.getElementById("bild").src = url; document.getElementById("layer").style.visibility = "visible"; } function layeraus() { document.getElementById("layer").style.visibility = "hidden"; } </script> </head> <body> <div id="layer" style="visibility: hidden; position:absolute; left: 10px; top: 15px; z-index:2;"> <img src="" id="bild"></div> <img src="i-was.jpg" onmouseover="vorschau('i-was_jpg_in_gross.jpg');" onmouseout="layeraus();"> </body> </html> den div musste dann natürlich noch mittig machen und so groß wie du ihn haben willst, ety edit: , da war jemand schneller... + Multi-Zitat Zitieren
#4 5. Januar 2009 AW: Vorschau bei Mouseover zum link bei rr ähm nein keine ligthbox, sondern sollte durch den mousover eben größer dargestellt werden, wie man es von Test Stock Photos - stock.xchng kennt genau soetwas will ich! + Multi-Zitat Zitieren
#5 5. Januar 2009 AW: Vorschau bei Mouseover wenn dus größer darstellen willst musst natürlich auch entweder eine große und eine kleine grafik haben oder eine große an der kleinen stelle durch stylesheets klein machen das script müsste aber eig funzen(außer vllt flüchtigkeitsfehler...)... edit: bei deinem link passiert bei mir nichts... + Multi-Zitat Zitieren
#6 5. Januar 2009 AW: Vorschau bei Mouseover Dann nimm das doch von denen, scheint ja ein Freescript zu sein. Warum das Rad neu erfinden? Spoiler PHP: 67 var w = 18 var h = 1910 if ( document . getElementById || document . all ) 11document . write ( '<div id="trailimageid" style="position:absolute;visibility:hidden;left:0px;top:-1000px;width:1px;height:1px;border:1px solid #888888;background:#DDDDDD;"><img id="ttimg" src="img/s.gif" /></div>' ) 1213 function gettrailobj () 14 { 15 if ( document . getElementById ) return document . getElementById ( "trailimageid" ). style16 else if ( document . all ) return document . all . trailimagid . style17 } 1819 function truebody () 20 { 21 return (! window . opera && document . compatMode && document . compatMode != "BackCompat" )? document . documentElement : document . body22 } 2324 function hidetrail () 25 { 26 document . onmousemove = "" 27 document . getElementById ( 'ttimg' ). src = '/img/s.gif' 28 gettrailobj (). visibility = "hidden" 29 gettrailobj (). left =- 100030 gettrailobj (). top = 031 } 323334 function showtrail ( width , height , file ) 35 { 36 if( navigator . userAgent . toLowerCase (). indexOf ( 'opera' ) == - 1 ) 37 { 38 w = width39 h = height4041 // followmouse() 4243 document . getElementById ( 'ttimg' ). src = file44 document . onmousemove = followmouse45 gettrailobj (). visibility = "visible" 46 gettrailobj (). width = w + "px" 47 gettrailobj (). height = h + "px" 484950 } 51 } 525354 function followmouse ( e ) 55 { 5657 if( navigator . userAgent . toLowerCase (). indexOf ( 'opera' ) == - 1 ) 58 { 5960 var xcoord = 2061 var ycoord = 206263 if ( typeof e != "undefined" ) 64 { 65 xcoord += e . pageX66 ycoord += e . pageY67 } 68 else if ( typeof window . event != "undefined" ) 69 { 70 xcoord += truebody (). scrollLeft + event . clientX71 ycoord += truebody (). scrollTop + event . clientY72 } 7374 var docwidth = document . all ? truebody (). scrollLeft + truebody (). clientWidth : pageXOffset + window . innerWidth - 1575 var docheight = document . all ? Math . max ( truebody (). scrollHeight , truebody (). clientHeight ) : Math . max ( document . body . offsetHeight , window . innerHeight ) 7677 if ( xcoord + w + 3 > docwidth ) 78 xcoord = xcoord - w -( 20 * 2 ) 7980 if ( ycoord - truebody (). scrollTop + h > truebody (). clientHeight ) 81 ycoord = ycoord - h - 20 ; 8283 gettrailobj (). left = xcoord + "px" 84 gettrailobj (). top = ycoord + "px" 8586 } 8788 } Cut & Paste Simple Image Trail + Multi-Zitat Zitieren
#7 5. Januar 2009 AW: Vorschau bei Mouseover das funktionier soweit ... nur legt sich der layer zwischen den content oO ^^ kannst mir da auch noch weiterhelfen? ansosnten ist das suuuper @Nosferatu ja kalr wieso neu erfinden, aber so ein script ist immer total kompliziert aufgebaut und hat meist noch feinheiten, die ich ja ned brauche .... aber danke auch an dich! + Multi-Zitat Zitieren
#8 5. Januar 2009 AW: Vorschau bei Mouseover Stichwort: z-index Der Code steht dabei^^ naja egal. + Multi-Zitat Zitieren
#9 5. Januar 2009 AW: Vorschau bei Mouseover ja... tut mir leid... ich hab vergessen den edit deutlich zu machen... jezz sollte alles klappen... musst nur die pixelzahlen hinter left und top so anpassen, dass der layer mittig is... + Multi-Zitat Zitieren
#10 5. Januar 2009 AW: Vorschau bei Mouseover gut, jetzt hab ich das auch ... *gg* thX nur noch eine frage mit der position des layers ... finde das bei g00gle nicht, wie mach ich es, dass die position immer neben dem cursor ist? + Multi-Zitat Zitieren
#11 5. Januar 2009 Zuletzt von einem Moderator bearbeitet: 14. April 2017 AW: Vorschau bei Mouseover Nimm doch einfach mal den Code von der Seite die du gepostet hast und pass ihn an deins an... Hier ist das Javascript: http://www.sxc.hu/inc/tooltip.js Und das hier der Code: HTML: <script type="text/javascript" src="tooltip.js"></script> <body> <div class="thumb"><div class="thumb_img"><a href="##LINK##" onmouseover="showtrail(300,200,'##BILDURL##');" onmouseout="hidetrail();"><img src="##BILDURL##" width="100" height="66.6666666667" style="padding-top:27px;" /></a> </body> Die tooltip.js ins selbe Verzeichnis wie die HTML bzw. beim include den Pfad anpassen und anstatt der ##XXX## dein Bild und verlinkung eingeben.. Und siehe da, das Bild bleibt an der Maus dran.. Beispiel: Dein Beispielbild aus dem 1. Post HTML: <script type="text/javascript" src="tooltip.js"></script> <body> <div class="thumb"><div class="thumb_img"><a href="https://xup.in" onmouseover="showtrail(300,200,'https://www.xup.in/pic,56671117/Unbenannt-2.jpg');" onmouseout="hidetrail();"><img src="https://www.xup.in/pic,56671117/Unbenannt-2.jpg" width="100" height="66.6666666667" style="padding-top:27px;" /></a> </body> + Multi-Zitat Zitieren
#12 5. Januar 2009 AW: Vorschau bei Mouseover mom HTML: var x = 0; var y = 0; if(document.addEventListener) document.addEventListener("mousemove", Maus, true); else { document.onmousemove = Maus; } function Maus(e) { if(e) { x = e.clientX; y = e.clientY; } else { x = window.event.clientX; y = window.event.clientY; } } //dann noch in die function vorschau : document.getElementById("layer").style.left = x - 6 + "px"; document.getElementById("layer").style.top = y - 120 + "px"; + Multi-Zitat Zitieren
#13 6. Januar 2009 AW: Vorschau bei Mouseover ich weis ich bin blöd, aber danke ihr habt des welt einen gefallen getan und mich ein stückchen gescheiter gemacht! danke!!!! BWs habt ihr alle! + Multi-Zitat Zitieren