[HTML] Layer

vonTurnundTaxis · Beitrag von **vonTurnundTaxis** » 14.01.2007 14:57

Die <layer>-HTML-Funktionen gibt es nur für eine alte Netscape-Version. Trotzdem sieht man immer häufiger - insbesondere auf den "Web 2.0"-Seiten aufploppende - den Layern nicht unähnliche Bereiche.
Nun die banale Frage: Wie macht man sowas?

Als Beispiel nenne ich mal Snap, das Vorschauen zu Links anzeigt, über denen sich gerade die Maus befindet.

SimonSimCity · Beitrag von **SimonSimCity** » 14.01.2007 15:44

Für FireFox gibt es ein PlugIn (GooglePreview), womit neben jedem Sucheintrag ein Vorschaubild der Seite angezeigt wird.

Falls du sowas meinst, das ist nicht echtzeit...

Ich kenn einen Shop, der immer Monatshighlights macht, und bei diesem Shop wird meißtens in der Vorschau das Highlight von vor 3-4 Monaten angezeigt.
Die gehen wahrscheinlich hin und lassen die Seiten fotografieren (Bildschirmausdruck) um sie dann in einer Datenbank zu hinterlegen.

Aber der Link verweist nur auf eine JavaScript-Datei, an die einige Daten übergeben werden. Es kann sein, dass diese JS Funktion das in Echtzeit schafft. Hier der Text, den du in deine Seite einbauen sollst (Als Domain hab´ ich "google.de" eingegeben).

<script defer="defer" id="snap_preview_anywhere" type="text/javascript" src="http://spa.snap.com/snap_preview_anywhe ... "></script>

Es wird nicht viel bringen, einfach diese JS-Datei herunter zu laden, da hier wahrscheinlich ein dynamischer Code (wie z.B. PHP, ASP, Perl) eingebaut ist, ohne den der Code nicht funktioniert.

Es sei denn, sie rechnen mit einem Anfänger, der sich diese Tool holt..-

Kaeru Gaman · Beitrag von **Kaeru Gaman** » 14.01.2007 15:51

ich meine auch, dass es sich um eine externe bibliothek handelt.

auf der FAQ-site von SNAP steht:

What is Snap Preview Anywhere™
Snap Preview Anywhere™ adds value to websites by powering them with the largest library of high quality link previews...for free!

vonTurnundTaxis · Beitrag von **vonTurnundTaxis** » 14.01.2007 15:52

Nein, es geht mir doch nicht um die Vorschau sondern um das Fensterchen in dem die Vorschau drin ist. Es könnte auch etwas ganz anderes darin sein, wie beispielsweise bei Jamendo die Auswahlboxen, die erscheinen, wenn man über ein Cover fährt.

edel · Beitrag von **edel** » 14.01.2007 15:53

Code: Alles auswählen

<html>
	<head>
		<style type="text/css">
			a:hover {background-color: #000;color:#000;}
			div.link a:hover {background-color: #000;color:#000;}
			div.link a:link span{display: none;}
			div.link a:visited span{display: none;}
			div.link a:hover span {background-image: url("http://www.pastrugni.com/tutorial/texture/acqua/nuvola.jpg");background-repeat: no-repeat;position: absolute;margin: 10px 0px 0px 20px; display: block;width:200;height:200px;padding: 2px 10px 2px 10px;}
		</style>	
	</head>
	<body>
		<div class="link"><a href="bla">1<span>Link : 1</span></a></div>
		<div class="link"><a href="bla">2<span>Link : 2</span></a></div>
		<div class="link"><a href="bla">3<span>Link : 3</span></a></div>
		<div class="link"><a href="bla">4<span>Link : 4</span></a></div>
	</body>
</html>

Weiss nur nicht mehr woher ...

vonTurnundTaxis · Beitrag von **vonTurnundTaxis** » 14.01.2007 17:24

Danke, aber das ist auch nicht, wonach ich suche.
Was ich suche ist etwas, das möglichst genau so funktioniert wie die Netscape-Layer.

//Nachtrag:
Dieses Codeschnipselchen von Hroudtwolf war es was ich gesucht habe:

Code: Alles auswählen

!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<body>
<div id="deinlayer" style="font-size: 10px; z-index: 2; top: 100px; left: 100px;">Das
Layer...<br>
<br>
<br>
</div>
<a href="#" onclick="document.getElementById('deinlayer').style.visibility='hidden';"> Layer
ausblenden</a>
</body>
</html>

SimonSimCity · Beitrag von **SimonSimCity** » 14.01.2007 21:36

http://simonsimcity.kilu2.de/PopUpBallon.htm

Hier ist ein Beispiel (kopiert von PandaAntiVirus OnlineScan).

Funktioniert aber nur richtig im IE.

Falls jemand das noch für andere Browser anpassen will: nur zu!

-> Für den, ders haben will:

Ladet euch die HTML-Datei und die GIF-Datei herunter (http://simonsimcity.kilu2.de/)

Beachtet, das dieses Script nicht W3C conform ist.

Es hat folgende Fehler (bin grad zu faul zum rausmachen...)

Fehlendes HTML-Element <title>
HTML-Tag <style> erfordert Attribut "type"
HTML-Tag <script> erfordert Attribut "type"
Bei <img> fehlt das Attribut "alt"

SimonSimCity · Beitrag von **SimonSimCity** » 27.05.2007 09:55

Falls du immer noch daran interessiert bist:

http://www.websnapr.com/

Damit kannst du das auch in deiner Seite einbinden...
Codeausschnitt:

<script src="http://www.websnapr.com/js/previewbubble.js" type="text/javascript"></script>
<li><img src="social/delicious.png" border="0" alt="bookmark websnapr at del.icio.us"/> <a class="previewlink" href="http://del.icio.us/post?url=http%3A%2F% ... our%20Site" target="_blank">Add to del.icio.us</a></li>