Pop-up-Vorschau wie bei templatemonster.com

Das ist eine Pseudo Klasse in CSS, z. B. so:

CSS: 
a.infobox {  
  text-decoration: underline; 
}
  a.infobox:hover { 
  cursor:help;
  font-size: 12px; 
  color: #FF01FF; 
  text-decoration: underline; 
}
a.infobox span { 
  visibility:hidden; 
  position:absolute; 
  width: 130px;
  height: 80px;
  left: 2.5em;
  margin-top:-5em; 
  padding:1em; 
  text-decoration:none; 
  vertical-align: middle;
}
a.infobox:hover span { 
  visibility:visible; 
  border:1px solid #FF01FF;
  color: #000000;
  z-index: +1; 
  background: #cccccc; 
}

HTML: 
<a href="<?php echo $path; ?>/" class="infobox">Start<span>Die Startseite!</span></a>&nbsp;&nbsp;&nbsp;
Habe ich mir irgendwanneinmal zusammengefrickelt... Bzw. bei einer Site abgeguckt, weiß grade nimmer wo genau. Ansonsten schau dir mal bei Templatemonster einfach die CSS bzw. den HTML Code an.
 
Auf der Seite wird das ganze wohl mit Javascript realisiert.
Hier ein Codeausschnitt der Datei:
HTML: 
><IMG SRC="http://images.templatemonster.com/screenshots/12700/12700-m.jpg" border=0 alt='Template 12700' border=1 style="border-color: 777777" 					
        	onmouseover="showtrail('http://images.templatemonster.com/screenshots/12700/12700-b.jpg ','Template 12700',430,551)"   onmouseout="hidetrail()"
	 ></a>
pMx
 
Danke vorab

Funktioniert teilweise. Aber wenn ich ein Bild anzeigen lassen will, geht das nicht. Muss ich das speziell einlesen oder so? Wir eben alles dynamisch generiert.
 
Vom Grundprinzip her funktioniert das so:

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title></title>

<style type="text/css">
<!--
a.infobox {
  text-decoration: underline;
}
a.infobox:hover {
  border: none;
  color: #FF01FF;
  text-decoration: underline;
}
a.infobox span {
  visibility: hidden;
  position: absolute;
  text-decoration: none;
  padding: 10px;
}
a.infobox:hover span {
  visibility: visible;
  color: #000000;
  z-index: 1;
  background: #cccccc;
}
a.infobox:hover span img {
  display: block;
  border: none;
}
-->
</style>

</head>
<body>

<a href="#" class="infobox">Start<span><img src="..."></span></a>

</body>
</html>
Ansonsten schau dir mal die "CSS Photo Galleries" von Stu Nicholls an.
 
Hallo

Ja Danke, das habe ich so auch gemacht, aber es geht nicht. er zeigt mir einfach den Bild-Platzhalter an. Aber der Pfad stimmt.

Gruss
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück