Seite 1 von 1
Suche Script
Verfasst: 20.05.2009, 15:45
von Michael
Hi,
kennt einer von euch ein Script, mit dem man Fotos mit Notizen (z.B. wie hier
https://www.amazon.de/gp/customer-media ... F8&index=4 ) ergänzen kann.
Einfach mit der Maus über das Bild gehen. Dann kann man sehen, wo eine Notiz hinterlegt wurde.
Danke schon mal im Voraus
Gruß
Michael
Re: Suche Script
Verfasst: 20.05.2009, 19:39
von Mork vom Ork
Schnell zusammengehackt, nicht so hübsch, funktioniert dafür im Gegensatz zu dem Amazon-Teil auch mit Opera bzw. in allen Browsern ohne Javascript.
Code: Alles auswählen
<!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">
/* Basisfunktionalität, nicht ändern */
.notiz {
position:relative;
}
.notiz:hover div {
position:absolute;
/* Ab hier Kasten gestalten */
border:2px solid white;
}
.notiz div p {
display:none;
position:absolute;
margin:0;
}
.notiz div:hover p {
display:block;
}
/* Ab hier Kasten gestalten */
.notiz:hover div {
border:2px solid white;
}
/* Ab hier Notiz gestalten */
.notiz div p {
background-color:white;
padding:0.3em;
}
/* Positionsangaben je Bild, lassen sich genauso gut im HTML-Code als style-Attribut unterbringen */
/* Position des Kastens für Notiz eins, relativ zum Bild */
.notiz.eins div {
top:20px;
left:20px;
width:50px;
height:50px;
}
/* Position der Notiz für Notiz eins, relativ zum Kasten */
.notiz.eins p {
top:50px;
left:-15px;
width:80px;
}
</style>
</head>
<body>
<div class="notiz eins">
<img src="bild.jpg">
<div>
<p>Eine Notiz.</p>
</div>
</div>
</body>
</html>
Verfasst: 25.05.2009, 00:49
von omon007
