Mouseover Bild anzeigen

S

Spranta

Erfahrenes Mitglied
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
 
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?
 
1. Du hast ein Div mit position:absolute und display:none;
HTML: 
<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.
HTML: 
<a href="#" onMosueOver="tooltip('test.gif');">bla bla</a>

3. Das Bild wird in dem Div getauscht
Javascript: 
<script type="text/javascript">
document.getElementById('output').innerHTML = '<img src=' + id + ' />';
</script>

4. Das Div bekommt die Position von der Position der Maus.
Javascript: 
<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;
Javascript: 
<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
 
Hallo

habe es jetzt wie folgt aufgebaut
HTML: 
<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
 
Zuletzt bearbeitet:
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
 
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^^
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück