Suche Script

Beitrag von **Michael** » 20.05.2009, 15:45

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

von **Anzeige von ABAKUS** »

Beitrag von **Mork vom Ork** » 20.05.2009, 19:39

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&#58;//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 &#123;
	position&#58;relative;
&#125;
.notiz&#58;hover div &#123;
	position&#58;absolute;
	/* Ab hier Kasten gestalten */
	border&#58;2px solid white;
&#125;
.notiz div p &#123;
	display&#58;none;
	position&#58;absolute;
	margin&#58;0;
&#125;
.notiz div&#58;hover p &#123;
	display&#58;block;
&#125;


/* Ab hier Kasten gestalten */
.notiz&#58;hover div &#123;
	border&#58;2px solid white;
&#125;

/* Ab hier Notiz gestalten */
.notiz div p &#123;
	background-color&#58;white;
	padding&#58;0.3em;
&#125;

/* 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 &#123;
	top&#58;20px;
	left&#58;20px;
	width&#58;50px;
	height&#58;50px;
&#125;
/* Position der Notiz für Notiz eins, relativ zum Kasten */
.notiz.eins p &#123;
	top&#58;50px;
	left&#58;-15px;
	width&#58;80px;
&#125;
</style>

</head>
<body>

<div class="notiz eins">
<img src="bild.jpg">
<div>
<p>Eine Notiz.</p>
</div>
</div>

</body>
</html>

Beitrag von **omon007** » 25.05.2009, 00:49

viel spaß damit

https://plugins.jquery.com/project/ImgNotes