Mouseover mit fixiertem Image von dave, 11.12.2011 11:49

Mouseover mit fixiertem Image

touch3x 11.12.2011 10:59

Servus Forum.
Wie oben schon erwähnt, möchte ich, wenn ich über einen Text fahre ein Image kommt, welches oben rechts von Bild fixiert ist, und nicht an dem Cursor hängt, so wie ich es jetzt habe.
Bitte um Hilfe.

Beifügen werde ich meinen Code.

<html>  
<head>  
<style type="text/css">  
<!--  
.MouseOverGrafikCSS {  
position: absolute;  
visibility: hidden;  
z-index: 100;  
}  
-->  
</style>  
<title></title>  
</head>  
<body onMouseMove="mouse(event);">  
<span id="MouseOverGrafikCSS" class="MouseOverGrafikCSS"></span>  
<script language="JavaScript">  
<!--  
  
// Definition der Grafiken  
var Grafik1 =('<img src=\"lockdown.png\" width=\"699\" height=\"734\">');  
var Grafik2 =('<img src=\"bootleg.png\" width=\"699\" height=\"734\">');  
var Grafik3 =('<img src=\"mission.png\" width=\"699\" height=\"734\">');  
var Grafik4 =('<img src=\"carbon.png\" width=\"699\" height=\"734\">');  
var Grafik5 =('<img src=\"dome.png\" width=\"457\" height=\"480\">');  
var Grafik6 =('<img src=\"downturn.png\" width=\"701\" height=\"734\">');  
var Grafik7 =('<img src=\"hardhat.png\" width=\699\" height=\"734\">');  
var Grafik8 =('<img src=\"interchange.png\" width=\"709\" height=\"734\">');  
var Grafik9 =('<img src=\"fallen.png\" width=\"699\" height=\"734\">');  
var Grafik10 =('<img src=\"bakaara.png\" width=\"699\" height=\"734\">');  
var Grafik11 =('<img src=\"resistance.png\" width=\"699\" height=\"734\">');  
var Grafik12 =('<img src=\"arkaden.png\" width=\"699\" height=\"734\">');  
var Grafik13 =('<img src=\"outpost.png\" width=\"699\" height=\"734\">');  
var Grafik14 =('<img src=\"seatown.png\" width=\"699\" height=\"734\">');  
var Grafik15 =('<img src=\"underground.png\" width=\"699\" height=\"734\">');  
  
var XPosition = 10;  
var YPosition = 20;  
var MouseOverObjekt, MouseOverGrafik;  
var Anzeige = -1000;  
  
MouseOverGrafik = document.getElementById('MouseOverGrafikCSS').style;  
  
function MouseOver(Grafik)  
{  
Anzeige = YPosition;  
document.getElementById('MouseOverGrafikCSS').innerHTML = Grafik;  
MouseOverGrafik.visibility = "visible";  
}  
  
function mouse(e)  
{  
x = document.all ? window.event.x : e.pageX;  
y = document.all ? window.event.y : e.pageY;  
  
MouseOverGrafik.left = x+XPosition;  
MouseOverGrafik.top = y+Anzeige;  
}  
  
function MouseOverBeenden()  
{  
Anzeige = -1000;  
MouseOverGrafik.visibility = "hidden";  
}  
  
// -->  
</script>  
<p><span style="color:lime">  
<a href="#" onmouseover="MouseOver(Grafik1);" onmouseout="window.setTimeout(MouseOverBeenden, 2000);">Lockdown</a><br><br>  
<a href="#" onmouseover="MouseOver(Grafik2);" onmouseout="window.setTimeout(MouseOverBeenden, 2000);">Bootleg</a><br><br>  
<a href="#" onmouseover="MouseOver(Grafik3);" onmouseout="window.setTimeout(MouseOverBeenden, 2000);">Mission</a><br><br>  
<a href="#" onmouseover="MouseOver(Grafik4);" onmouseout="window.setTimeout(MouseOverBeenden, 2000);">Carbon</a><br><br>  
<a href="#" onmouseover="MouseOver(Grafik5);" onmouseout="window.setTimeout(MouseOverBeenden, 2000);">Dome</a><br><br>  
<a href="#" onmouseover="MouseOver(Grafik6);" onmouseout="window.setTimeout(MouseOverBeenden, 2000);">Downturn</a><br><br>  
<a href="#" onmouseover="MouseOver(Grafik7);" onmouseout="window.setTimeout(MouseOverBeenden, 2000);">Hardhat</a><br><br>  
<a href="#" onmouseover="MouseOver(Grafik8);" onmouseout="window.setTimeout(MouseOverBeenden, 2000);">Interchange</a><br><br>  
<a href="#" onmouseover="MouseOver(Grafik9);" onmouseout="window.setTimeout(MouseOverBeenden, 2000);">Fallen</a><br><br>  
<a href="#" onmouseover="MouseOver(Grafik10);" onmouseout="window.setTimeout(MouseOverBeenden, 2000);">Bakaara</a><br><br>  
<a href="#" onmouseover="MouseOver(Grafik11);" onmouseout="window.setTimeout(MouseOverBeenden, 2000);">Resistance</a><br><br>  
<a href="#" onmouseover="MouseOver(Grafik12);" onmouseout="window.setTimeout(MouseOverBeenden, 2000);">Arkaden</a><br><br>  
<a href="#" onmouseover="MouseOver(Grafik13);" onmouseout="window.setTimeout(MouseOverBeenden, 2000);">Outpost</a><br><br>  
<a href="#" onmouseover="MouseOver(Grafik14);" onmouseout="window.setTimeout(MouseOverBeenden, 2000);">Seatown</a><br><br>  
<a href="#" onmouseover="MouseOver(Grafik15);" onmouseout="window.setTimeout(MouseOverBeenden, 2000);">Undergreound</a><br><br>  
<a href="#" onmouseover="MouseOver(Grafik16);" onmouseout="window.setTimeout(MouseOverBeenden, 2000);">Village</a>  
  
</span>  
</p>  
</body>  
</html>

Beitrag melden

– Informationen zu den Bewertungsregeln

Mouseover mit fixiertem Image

dave 11.12.2011 11:49

+1 Informationen zu den Bewertungsregeln

Hi,

Wie oben schon erwähnt, möchte ich, wenn ich über einen Text fahre ein Image kommt, welches oben rechts von Bild fixiert ist, und nicht an dem Cursor hängt, so wie ich es jetzt habe.

Mir ist nicht klar _wo_ das Bild sein soll.
"oben rechts von Bild fixiert" ist für mich unverständlich.

<html>

Warum deklarierst du HTML-Code als CSS?  
Warum gibst du keinen Doctype an?  
~~~html
  

> <head>  
> <style type="text/css">  
> <!--

Was erwartest du dir von diesem auskommentieren?
Warum lagerst du das CSS nicht in eine andere Datei aus?

  

> .MouseOverGrafikCSS {  
> position: absolute;  
> visibility: hidden;  
> z-index: 100;  
> }

~~~~~~html
  

> -->  
> </style>  
> <title></title>

Ein leerer Titel macht keinen Sinn, aber ich denke der kommt noch?

  

> </head>

Es fehlt die Angabe des Charsets. Diese ist zwar nicht zwingend nötig aber absolut empfehlenswert anzugeben.

  

> <body onMouseMove="mouse(event);">  
> <span id="MouseOverGrafikCSS" class="MouseOverGrafikCSS"></span>  
> <script language="JavaScript">  
  
Es fehlt das type-Attribut (falls nicht HTML5), das language-Attribut ist unnötig  
[code lang=html]  

> <!--

Was erhoffst du dir von diesem HTML-Kommentar?

  

>   
> // Definition der Grafiken  
> var Grafik1 =('<img src=\"lockdown.png\" width=\"699\" height=\"734\">');  
> var Grafik2 =('<img src=\"bootleg.png\" width=\"699\" height=\"734\">');  
> var Grafik3 =('<img src=\"mission.png\" width=\"699\" height=\"734\">');  
> var Grafik4 =('<img src=\"carbon.png\" width=\"699\" height=\"734\">');  
> var Grafik5 =('<img src=\"dome.png\" width=\"457\" height=\"480\">');  
> var Grafik6 =('<img src=\"downturn.png\" width=\"701\" height=\"734\">');  
> var Grafik7 =('<img src=\"hardhat.png\" width=\699\" height=\"734\">');  
> var Grafik8 =('<img src=\"interchange.png\" width=\"709\" height=\"734\">');  
> var Grafik9 =('<img src=\"fallen.png\" width=\"699\" height=\"734\">');  
> var Grafik10 =('<img src=\"bakaara.png\" width=\"699\" height=\"734\">');  
> var Grafik11 =('<img src=\"resistance.png\" width=\"699\" height=\"734\">');  
> var Grafik12 =('<img src=\"arkaden.png\" width=\"699\" height=\"734\">');  
> var Grafik13 =('<img src=\"outpost.png\" width=\"699\" height=\"734\">');  
> var Grafik14 =('<img src=\"seatown.png\" width=\"699\" height=\"734\">');  
> var Grafik15 =('<img src=\"underground.png\" width=\"699\" height=\"734\">');

Warum speicherst du die Grafiken nicht in einem Array?

  

> var XPosition = 10;  
> var YPosition = 20;  
> var MouseOverObjekt, MouseOverGrafik;  
> var Anzeige = -1000;  
>   
> MouseOverGrafik = document.getElementById('MouseOverGrafikCSS').style;  
>   
> function MouseOver(Grafik)  
> {  
> Anzeige = YPosition;  
> document.getElementById('MouseOverGrafikCSS').innerHTML = Grafik;  
> MouseOverGrafik.visibility = "visible";  
> }  
>   
> function mouse(e)  
> {  
> x = document.all ? window.event.x : e.pageX;  
> y = document.all ? window.event.y : e.pageY;  
>   
> MouseOverGrafik.left = x+XPosition;  
> MouseOverGrafik.top = y+Anzeige;  
> }

Wenn du nicht willst dass das Bild an der Position des Maus-Cursors angezeigt wird, warum weist du ihm dann diese Position zu?

  

> function MouseOverBeenden()  
> {  
> Anzeige = -1000;  
> MouseOverGrafik.visibility = "hidden";  
> }

// -->
</script>
<p><span style="color:lime">

  
Warum verwendest du inline-Styles?  
~~~html
  

> <a href="#" onmouseover="MouseOver(Grafik1);" onmouseout="window.setTimeout(MouseOverBeenden, 2000);">Lockdown</a><br><br>

Ein Link der nicht verlinken soll ist selten ein Link. Oder _willst_ du hier an das obere Ende der Seite springen?
"br"-Elemente sind für Zeilenumbrüche, nicht um einen Abstand zu erhalten. Abstände macht man mit CSS.

  

> <a href="#" onmouseover="MouseOver(Grafik2);" onmouseout="window.setTimeout(MouseOverBeenden, 2000);">Bootleg</a><br><br>  
> <a href="#" onmouseover="MouseOver(Grafik3);" onmouseout="window.setTimeout(MouseOverBeenden, 2000);">Mission</a><br><br>  
> <a href="#" onmouseover="MouseOver(Grafik4);" onmouseout="window.setTimeout(MouseOverBeenden, 2000);">Carbon</a><br><br>  
> <a href="#" onmouseover="MouseOver(Grafik5);" onmouseout="window.setTimeout(MouseOverBeenden, 2000);">Dome</a><br><br>  
> <a href="#" onmouseover="MouseOver(Grafik6);" onmouseout="window.setTimeout(MouseOverBeenden, 2000);">Downturn</a><br><br>  
> <a href="#" onmouseover="MouseOver(Grafik7);" onmouseout="window.setTimeout(MouseOverBeenden, 2000);">Hardhat</a><br><br>  
> <a href="#" onmouseover="MouseOver(Grafik8);" onmouseout="window.setTimeout(MouseOverBeenden, 2000);">Interchange</a><br><br>  
> <a href="#" onmouseover="MouseOver(Grafik9);" onmouseout="window.setTimeout(MouseOverBeenden, 2000);">Fallen</a><br><br>  
> <a href="#" onmouseover="MouseOver(Grafik10);" onmouseout="window.setTimeout(MouseOverBeenden, 2000);">Bakaara</a><br><br>  
> <a href="#" onmouseover="MouseOver(Grafik11);" onmouseout="window.setTimeout(MouseOverBeenden, 2000);">Resistance</a><br><br>  
> <a href="#" onmouseover="MouseOver(Grafik12);" onmouseout="window.setTimeout(MouseOverBeenden, 2000);">Arkaden</a><br><br>  
> <a href="#" onmouseover="MouseOver(Grafik13);" onmouseout="window.setTimeout(MouseOverBeenden, 2000);">Outpost</a><br><br>  
> <a href="#" onmouseover="MouseOver(Grafik14);" onmouseout="window.setTimeout(MouseOverBeenden, 2000);">Seatown</a><br><br>  
> <a href="#" onmouseover="MouseOver(Grafik15);" onmouseout="window.setTimeout(MouseOverBeenden, 2000);">Undergreound</a><br><br>  
> <a href="#" onmouseover="MouseOver(Grafik16);" onmouseout="window.setTimeout(MouseOverBeenden, 2000);">Village</a>

Du hast hier eine Liste von "Links", warum sind die in keiner Liste?

  

> </span>  
> </p>  
> </body>  
> </html>

Evtl, kann man das Ganze einfach nur mit CSS lösen? Hängt davon ab wo du das Bild denn haben willst.

<!doctype html>  
<html>  
<head>  
  <meta http-equiv="content-type" content="text/html; charset=utf-8">  
  <title>Foo</title>  
  <link rel="stylesheet" type="text/css" href="formate.css">  
</head>  
<body>  
  <ul class="foo">  
    <li class="lockdown">Lockdown</li>  
    <li class="bootleg">Bootleg</li>  
    […]  
  </ul>  
</body>  
</html>

.foo {  
  list-style:none;  
  padding:0;  
  margin:.5em 0;  
}  
.foo li::after {  
  content:"";  
  width:699px;  
  height:734px;  
  background:url(/path/to/Sprite) no-repeat;  
  position:fixed/absolute;  
  left:Xpx;  
  top:Ypx;  
  opacity:0;  
  [-vendor-prefixes-]transition:opacity 0s linear 2s;  
}  
.foo li:hover::after {  
  opacity:1;  
  [-vendor-prefixes-]transition:opacity 0s linear 0s;  
}  
.foo li.lockdown::after {  
  background-position:Xpx Ypx;  
}  
.foo li.bootleg::after {  
  background-position:Xpx Ypx;  
}

~dave

Beitrag melden

+1 Informationen zu den Bewertungsregeln

Mouseover mit fixiertem Image
touch3x 11.12.2011 12:52

css
– Informationen zu den Bewertungsregeln
Servus dave.
Erstmal danke für deinen ausführlichen Kommentar zu dem Code.
Mit oben rechts meine ich in main-frame also dort wo der content steht, oben rechts vom frame also ziemlich in der ecke.
Ich habe diesen code im Internet gefunden, und da es funktioniert hat, habe ich es übernommen und nur die Bilder geändert.
Ich habe die einzelnen Sachen nicht definiert und weiß auch nicht was ich ändern muss, damit das Bild in der Ecke erscheint und nicht am Cursor.
Bitte erneut um Hilfe.
Beitrag melden

–
Informationen zu den Bewertungsregeln

SELFHTML Forum - Ergänzung zur Dokumentation Übersicht

touch3x: Mouseover mit fixiertem Image

Mouseover mit fixiertem Image

Mouseover mit fixiertem Image

Mouseover mit fixiertem Image

Mouseover mit fixiertem Image