[JavaScript] Vorschau bei Mouseover

Dark|pUM4 · 5. Januar 2009

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!

Anzeige

Nosferatu · 5. Januar 2009

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

t-low · 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...

Dark|pUM4 · 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!

t-low · 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...

Nosferatu · 5. Januar 2009

AW: Vorschau bei Mouseover

Dann nimm das doch von denen, scheint ja ein Freescript zu sein. Warum das Rad neu erfinden?

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

Dark|pUM4 · 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!

Nosferatu · 5. Januar 2009

AW: Vorschau bei Mouseover

Stichwort: z-index

Der Code steht dabei^^ naja egal.

t-low · 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...

Dark|pUM4 · 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?

°EraZoR° · 5. Januar 2009

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>

t-low · 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";

Dark|pUM4 · 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!

[JavaScript] Vorschau bei Mouseover

Videos zum Thema

Ähnliche Themen mit den Stichworten: JavaScript Vorschau Mouseover

Nützliche Suchen

[JavaScript] Vorschau bei Mouseover

Videos zum Thema

Ähnliche Themen mit den Stichworten: JavaScript Vorschau Mouseover