[JavaScript] Vorschau bei Mouseover

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

  1. Diese Seite verwendet Cookies. Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies. Weitere Informationen
  1. #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. Anzeige
  3. #2 5. Januar 2009
    Zuletzt von einem Moderator bearbeitet: 15. April 2017
  4. #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: :mad:, da war jemand schneller...
     
  5. #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!
     
  6. #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...
     
  7. #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
     
  8. #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!
     
  9. #8 5. Januar 2009
    AW: Vorschau bei Mouseover

    Stichwort: z-index


    Der Code steht dabei^^ naja egal.
     
  10. #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...
     
  11. #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?
     
  12. #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>
     
  13. #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";
    
     
  14. #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!
     

  15. Videos zum Thema
Die Seite wird geladen...
Similar Threads - JavaScript Vorschau Mouseover
  1. Antworten:
    0
    Aufrufe:
    3.565
  2. Antworten:
    6
    Aufrufe:
    2.817
  3. Antworten:
    2
    Aufrufe:
    871
  4. JavaScript Cookie Manager

    leex , 4. September 2015 , im Forum: Webentwicklung
    Antworten:
    2
    Aufrufe:
    1.128
  5. Antworten:
    9
    Aufrufe:
    1.264