auf Gruppenfoto die Namen der einzelnen Personen bei mouseover anzeigen lassen

**fossil** · 28.07.2010, 15:50

Hallo,

eigentlich schon fast alles in der Überschrift gesagt: Ich habe ein Gruppenfoto und möchte beim mouseover über die einzelnen Personen, deren Namen eingeblendet haben.

Wie bekomme ich das mit dw hin?
Habe angefangen mit einem hotspot um eine Person kam aber dann leider nicht weiter. Versucht habe ich es mit verschiedenen Verhalten.

Beste grüße

Fossil

**Thomas** · 28.07.2010, 16:44

Hi,

da fallen mir zwei Varianten ein:

entweder "sliced" du das Bild (in FW oder PS), so dass du jede Person quasi als einzelnes Bild hast und setzt das Bild in einer Tabelle dann wieder zusammen, dann kannst du jedem Einzelteil einen title-tag zuordnen

oder du erstellst eine sog. "imagemap", such mal nach diesem Begriff hier im Forum oder per google

**der_robert** · 02.09.2010, 12:05

kannst ja mal das hier probieren (hab ich geklaut :-) )

HTML-Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>CSS Image Map</title>
	<style type="text/css">

		#map {
			margin:0;
			padding:0;
			width:400px;
			height:250px;
			background:url(map.jpg) top left no-repeat #fff;
			font-family:arial, helvetica, sans-serif;
			font-size:8pt;
		}
		
		#map li {
			margin:0;
			padding:0;
			list-style:none;
		}
		
		#map li a {
			position:absolute;
			display:block;
   			text-decoration:none;
			color:#000;
		}
		
		#map li a span { display:none; }
		
		#map li a:hover span {
			position: absolute;
			display:block;
			width:200px;
			left:0px;
			top:100px;
			border:1px solid #000;
			background:#fff;
			padding:5px;
 			filter:alpha(opacity=80);
			opacity:0.8;
  		}
	
		#map a.bunny {
	top:42px;
	left:73px;
	width:80px;
	height:90px;
		}
		
		#map a.parrot {
	top:17px;
	left:288px;
	width:50px;
	height:50px;
		}
		
		#map a.snail {
	top:149px;
	left:46px;
	width:50px;
	height:50px;
		}
		
		#map a.dog {
	top:117px;
	left:152px;
	width:115px;
	height:95px;
		}
		
		#map a.cat {
	top:84px;
	left:328px;
	width:70px;
	height:120px;
		}
	</style>
</head>
<body>


<div id="map">
<li><a class="bunny" href="#" title="Bunny"><span><b>Bunny Rabbit</b><br>
		Cute and fuzzy, with long ears and a fluffy tail. this cuddly bunny 
  makes a great pet.</span></a></li>

<li><a class="parrot" href="#" title="Parrot"><span><b>Parrot</b><br>
		With a lifespan of up to 40 years, these bright, colorful birds 
		are wonderful life-long pets. One of only a few birds
		capable of learning to speak, parrots are intelilgent and
		highly social animals.</span></a></li>
		
<li><a class="snail" href="#" title="Snail"><span><b>Snail</b><br>
		Snails are a wonderful addition to any aquarium-- just make
		sure that its tank-mates aren't going to eat it! Snails say
  "Meow."</span></a></li>
		
	<li><a class="dog" href="#" title="Dog"><span><b>Dog</b><br>
		Man's best friend, a protector and commrade of humans for
		centuries, dogs are faithful, loyal and loving companions.
  </span></a></li>

		
	<li><a class="cat" href="#" title="Cat"><span><b>Cat</b><br>
		Another popular pet, these felines were once viewd as a
		sacred creature amont the ancient Egyptians. Independant,
		sociable, and with a rumbling purr, cats make wonderful
  pets.</span></a></li>
</div>

</body>
</html>

PS.: hier noch das passende Bild -->

zur Startseite vom TP

Thema: auf Gruppenfoto die Namen der einzelnen Personen bei mouseover anzeigen lassen

LinkBack

Themen-Optionen

Thema durchsuchen

Thema bewerten

auf Gruppenfoto die Namen der einzelnen Personen bei mouseover anzeigen lassen

Aktive Benutzer

Aktive Benutzer

Ähnliche Themen

[DW CS4] Namen von eingeloggtem user anzeigen

Wie sind die einzelnen Personen am besten anzumelden

Personen altern lassen

Namen schützen lassen

Pop-Up Window Problem, Namen der Seite anzeigen!Brett vorm Kopf!

Aktive Benutzer

Aktive Benutzer

Berechtigungen