[JavaScript] Vorschau bei Mouseover

Dieses Thema im Forum "Webentwicklung" wurde erstellt von Dark|pUM4, 5. Januar 2009 .

  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!
     
  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
     
  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...
     
  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!
     
  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...
     
  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:

    6
    7
    var  w = 1
    8
    var  h = 1
    9
    10
    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>' )
    12
    13
    function  gettrailobj ()
    14 {
    15  if ( document . getElementById ) return  document . getElementById ( "trailimageid" ). style
    16 
    else if ( document . all ) return  document . all . trailimagid . style
    17
    }
    18
    19
    function  truebody ()
    20 {
    21  return (! window . opera  &&  document . compatMode  &&  document . compatMode != "BackCompat" )?  document . documentElement  document . body
    22
    }
    23
    24
    function  hidetrail ()
    25 {
    26 document . onmousemove = ""
    27 document . getElementById ( 'ttimg' ). src = '/img/s.gif'
    28 gettrailobj (). visibility = "hidden"
    29 gettrailobj (). left =- 1000
    30 gettrailobj
    (). top = 0
    31
    }
    32
    33
    34
    function  showtrail ( width , height , file )
    35 {
    36  if( navigator . userAgent . toLowerCase (). indexOf ( 'opera' ) == - 1 )
    37  {
    38 w = width
    39 h
    = height
    40
    41 
    // followmouse()
    42
    43 document
    . getElementById ( 'ttimg' ). src = file
    44 document
    . onmousemove = followmouse
    45 gettrailobj
    (). visibility = "visible"
    46 gettrailobj (). width = w + "px"
    47 gettrailobj (). height = h + "px"
    48
    49
    50 
    }
    51 }
    52
    53
    54
    function  followmouse ( e )
    55 {
    56
    57 
    if( navigator . userAgent . toLowerCase (). indexOf ( 'opera' ) == - 1 )
    58  {
    59
    60 
    var  xcoord = 20
    61 
    var  ycoord = 20
    62
    63 
    if ( typeof e  !=  "undefined" )
    64  {
    65 xcoord += e . pageX
    66 ycoord
    += e . pageY
    67 
    }
    68  else if ( typeof window . event  != "undefined" )
    69  {
    70 xcoord += truebody (). scrollLeft + event . clientX
    71 ycoord
    += truebody (). scrollTop + event . clientY
    72 
    }
    73
    74 
    var  docwidth = document . all truebody (). scrollLeft + truebody (). clientWidth  pageXOffset + window . innerWidth - 15
    75 
    var  docheight = document . all Math . max ( truebody (). scrollHeight truebody (). clientHeight ) :  Math . max ( document . body . offsetHeight window . innerHeight )
    76
    77 
    if ( xcoord + w + 3 > docwidth )
    78 xcoord = xcoord - w -( 20 * 2 )
    79
    80 
    if ( ycoord - truebody (). scrollTop + h > truebody (). clientHeight )
    81 ycoord = ycoord - h - 20 ;
    82
    83 gettrailobj
    (). left = xcoord + "px"
    84 gettrailobj (). top = ycoord + "px"
    85
    86 
    }
    87
    88
    }

    Cut & Paste Simple Image Trail
     
  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!
     
  8. 5. Januar 2009
    AW: Vorschau bei Mouseover

    Stichwort: z-index


    Der Code steht dabei^^ naja egal.
     
  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...
     
  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?
     
  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>
     
  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";
    
     
  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!
     
  14. Video Script

    Videos zum Themenbereich

    * gefundene Videos auf YouTube, anhand der Überschrift.