RE: Vorschau für Beiträge per "Mouseover"

18.02.2015 22:40

Lady of the light
#16 RE: Vorschau für Beiträge per "Mouseover"

Das sieht sehr, sehr gut aus

****************************************************
Bitte nicht anchatten - der Chat ist bei mir ausgeblendet und ich sehe eure Nachrichten teilweise erst 20 Minuten später. Schreibt lieber eine PN.
Bitte außerdem nicht in Themen taggen, in denen ich eh aktiv bin. Ich habe alle Themen, an denen ich mitdiskutiere, aboniert und kriege mit, wenn ihr was schreibt. Danke!

Antworten

Beitrag melden

#17

18.02.2015 23:07

.BiL.
#17 RE: Vorschau für Beiträge per "Mouseover"

.BiL.

... und es klingt, als hättest du schon einen Lösungsansatz?

Im FoX läuft schon seit März 2014 eine Ideensammlung dazu ... jetzt hast du uns wieder richtig heiß gemacht.

.
Viele Grüße .BiL.
Friends of Xobor

Fragen zu Plugins und Pluginideen bitte nicht per PN, sondern öffentlich oder im FoXum stellen.

Antworten

Beitrag melden

#18

20.02.2015 23:25

Wolfgang
#18 RE: Vorschau für Beiträge per "Mouseover"

Wolfgang

Hier einige Lösungsansätze.
Geht wohl am besten über "IFRAME".
Vorher Screenshots erstellen und dann anzeigen, währe die größere Herausforderung!!!
Fehlt nur der Einbau!!!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Unbenanntes Dokument</title>
 
<script>
hover = function() {
    if (!document.body.currentStyle) return;
    var DIVcomments = document.getElementById('comments');
    var DIVcomment_wrap = document.getElementById('comment-wrap');
    DIVcomments.onmouseover = function() {
        DIVcomment_wrap.style.display = 'block';
    }
    DIVcomments.onmouseout = function() {
        DIVcomment_wrap.style.display = 'none';
    }
}
window.onload = hover;
</script>
 
<style>
#comments {background:#fff}
iframe {width:100%; height:250px;border:0;}
#comment-wrap {background:#fff;position:relative}
#comments #comment-wrap{display:none;z-index:5;padding:10px}
#comments:hover #comment-wrap {display:block}
</style>
</head>
 
<body>
 

<div id="comments">
<a href="http://www.hilfe-tricks-tipps.de/t437f31-Durchgehende-Laufschrift-Ticker-mit-vielseitigen-Funktionen.html#msg1968">Durchgehende Laufschrift</a>
<div id="comment-wrap">
<iframe src="http://www.hilfe-tricks-tipps.de/t437f31-Durchgehende-Laufschrift-Ticker-mit-vielseitigen-Funktionen.html#msg1968"></iframe>
</div>
</div>
</body>
</html>
 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
 
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Unbenanntes Dokument</title>
</head>
 
<body>
<style>
.box{
    display: none;
    width: 100%;
}
 
a:hover + .box,.box:hover{
    display: block;
    position: relative;
    z-index: 100;
}
</style>
<a href="http://www.hilfe-tricks-tipps.de/t437f31-Durchgehende-Laufschrift-Ticker-mit-vielseitigen-Funktionen.html#msg1968">Hilfe</a>
 
<div class="box"><iframe src="http://www.hilfe-tricks-tipps.de/t437f31-Durchgehende-Laufschrift-Ticker-mit-vielseitigen-Funktionen.html#msg1968" width = "100%" height = "500px"></iframe></div> 
</body>
</html>
 