# Mouseover Bild anzeigen



## Spranta (1. August 2006)

Hallo

ich möchte gerne sowas wie bei TemplateMonster machen. Sprich wenn man auf ein Bild mit dem Mauszeiger fährt dan öffnet sich ein Div wo das Bild nochmal in groß zu sehen ist. Weiss einer wie man sowas macht? Hab mir die JavaScript sachen von templatemonster kopiert aber leider nicht hinbekommen. Würde mich über ne Lösung freuen.

Gruß
Spranta


----------



## tobee (1. August 2006)

Im Prinzip:
Ein Div ist unsichtbar. Beim mouseOver wechselt sich der Inhalt (Bild) des Div, wird noch an die Maus positioniert und sichtbar gemacht.
Oder womit hast du noch Schwierigkeiten?


----------



## Spranta (1. August 2006)

ich hab keine ahung von javascript das is mein problem ;-)


----------



## tobee (1. August 2006)

*1. Du hast ein Div mit position:absolute und display:none;*

```
<div id="output" style="position:absolute; display:none;"></div>
```

*2. Der User geht auf den Link, übergibt den Parameter was für ein BIld das ist.*

```
<a href="#" onMosueOver="tooltip('test.gif');">bla bla</a>
```

*3. Das Bild wird in dem Div getauscht*

```
<script type="text/javascript">
document.getElementById('output').innerHTML = '<img src=' + id + ' />';
</script>
```

*4. Das Div bekommt die Position von der Position der Maus.*

```
<script type="text/javascript">
document.getElementById('output').style.top = window.event.y;
document.getElementById('output').style.left = window.event.x;
</script>
```

*5. Und man stellt das Div auf display:block;*

```
<script type="text/javascript">
document.getElementById('output').style.display = 'block';
</script>
```

Das hier soll nur als HIlfestellung dienen. Wenn ich dir jetzt alles vorprogrammier lernst du  ja nicht so viel daraus. Und du willst ja fleißig dazu lernen 
Falls es noch Probleme gibt - einfach fragen

Tobee


----------



## Spranta (2. August 2006)

Hallo

habe es jetzt wie folgt aufgebaut

```
<html>
<head>
<title>Test</title>
<script type="text/javascript">
function tooltip (id) {
document.getElementById('output').innerHTML = '<img src=' + id + ' />';
document.getElementById('output').style.top = window.event.y;
document.getElementById('output').style.left = window.event.x;
document.getElementById('output').style.display = 'block';
}
function tooltipdown () {
document.getElementById('output').style.display = "none";
}

</script>
</head>
<body>
<div id="output" style="position:absolute; display:none;"></div>
<a href="#"  onMouseOver="tooltip('gravatar.png');" onMouseOut="tooltipdown();">bla bla</a> 
</body>
</html>
```

Leider funktioniert es nicht im Firefox sondern nur im IE

Gruß
Spranta


----------



## tobee (3. August 2006)

Ich hab hier in der Objektreferenz was gefunden. Schau es dir mal an.


----------



## Aser (17. September 2006)

tag,
ich hoffe mal, dass ihr euch noch mit diesem Thread befasst^^
jedenfalls... ich habe genau dasselbe Problem... dieser Beispielquellcode ist genau das, wonach ich gesucht habe... 

aber wenn ichs mit dem Explorer oeffne, erscheint ein Warnhinweis und die Sache wird geblockt... notfalls erlaubt man den "Eingriff" und das Script laeuft super...

beim Firefox geht da allerdings ueberhaupt nix... selbstversaendlich koennt ich beim Firefox die Sicherheitseinstellungen dementsprechend anpassen... 

Ich habe da jetzt aber zwei Probleme:
1. Von meiner Zielgruppe nutzt keiner den Explorer
2. Firefox-Usern will ich es nicht zumuten, dass diese fuer jeden Mist auf meiner Seite deren Preferences aendern muessen, das vergrault mir nur die Cliente

Gibt es nun die Moeglichkeit das irgendwie "firefoxfreundlicher" zu machen...
normalerweise taet ich mich selbst erkundigen, aber bei Javascript bin ich blutiger ie

dann mal vielen Dank im Voraus


----------



## Aser (17. September 2006)

also, die abgescpeckte version vom Script ...
wenn man die Positionskoordinaten weglaesst, dann gehts... wollt des nur mal erwaehtn haben...
ich glaube jetzt versteh ich auch den letzten geposteten Link^^


----------

