Namen von Personen via Mausover anzeigen?

Psychodead

Admiral Special
Mitglied seit
06.11.2002
Beiträge
1.551
Renomée
11
Ich habe zwar google schon bemüht, aber vermutlich einfach falsche Suchbegriffe eingegeben.

Ich verwende Joomla in der aktuellen Version und möchte auf einer Seite ein Gruppenfoto anzeigen lassen. Das ist soweit auch schon geschehen.
Jetzt möchte ich aber die Namen der Personen auf dem Bild anzeigen lassen, wenn man mit der Maus über die Person, bzw. über das Gesicht fährt.

Kann mir jemand erklären wie das geht.
 
Danke Maxefix, aber ich meine etwas anderes.

Auf dem Bild sind mehrere personen vorhanden und per MouseOver soll bei jeder Person ein kleines Infokästchen erscheinen wo der Name drin steht.

Im StudiVZ ist das ganze ja recht aufwendig gestaltet, mir reicht ein Kästchen, wie beim Bildtitel üblich.

mouseover.jpg
 
Naja, ne Unprofessionelle Methode wäre, dass du das Bild in viele kleine aufteilst und dann den Teil, auf dem die Person ist nochmal mit ner Info machst, wie gesagt, recht unprofessionell, aber wohl das einfachste;)

mfg birki2k
 
Das sieht doch schon mal sehr vielversprechend aus. Werde das ganze morgen nach meiner Klausur mal testen.
Vielen Dank!
 
Hoffe du hattest bei deiner Klausur Glück :p

Ich hab sowas bei uns im Clanforum eingebaut.

im Head:
Code:
<!--

#frittes li {
	...style...
}
#frittes a span {
	...style...
}

#frittes {	
	...style...
}

#frittes a {
	...style...
}

#frittes a:hover {
	...style...
}

#frittes a:hover span {
	...style...
}

// Die Felder, an den Positionen wird eine Grafik angezeigt. Kannst ja
// selbst ne durchsichtige Gif als Hintergrund nehmen und über die Größe dann die
// Feldgröße bestimmen
#spider {left:261px; top:293px;}
#ZeroX {left:448px; top:220px;}
...
-->
</style>

Im Body für jedes Feld:
Code:
<ul id="frittes">
<li class="inaktiv"> 

 <a target="_blank" href="...">
  <span><strong>
     <i>User:</i><br>spider<br><i>Usertext:</i><br>....
  </strong></span>
 </a>

</li>
</ul>

Hoffe das Hilft! Liebe Grüße,

Edit: Beispiel kann ich dir nicht zeigen, außer du meldest dich in unserem Clanforum an ;)
 
Also ich habe sowas schonmal wie folgt gelöst (für eine Rollenspielseite - Beispiel gekürzt und nicht ganz Standardkonform):

PHP:
<script type="text/javascript">
<!--
 var Xoffset = -60, Yoffset = 20, yyy = -1000, visible = false;
 document.onmousemove = get_mousemove;
 
 function popup(msg) {
 var content="<table border=\"1\" width=\"320\" bordercolor=\"#b7be94\" cellpadding=\"2\" cellspacing=\"0\" bgcolor=\"#001000\"><tr><td align=\"justify\"><font color=\"#b7be94\" face=\"Verdana,Arial\" size=\"2\">"+msg+"</font></td></tr></table>";
 yyy = Yoffset;
 document.all.dek.innerHTML = content;
 document.all.dek.style.visibility = "visible";
 visible = true;
 }
 
 function get_mousemove(e){
 if (!e) e = window.event;
 if ( visible )
 {
 document.all.dek.style.left = e.clientX + document.body.scrollLeft + Xoffset;
 document.all.dek.style.top = e.clientY + document.body.scrollTop + yyy;
 }
 }
 
 function kill(){
 yyy = -1000;
 document.all.dek.style.visibility = "hidden";
 visible = false;
 }
 //-->
</script>

<div id="dek" class="dek" style="position:absolute; visibility:hidden;"></div>

<map name="test" id="karte1">
	<area shape="rect" coords="28,43 118,70" onmouseover="popup('<b>Feuerhand</b>');" onmouseout="kill();"/>
	<area shape="rect" coords="25,71 141,87" onmouseover="popup('<b>Heiliger Zorn</b>');" onmouseout="kill();"/>
	<area shape="rect" coords="22,90 125,112" onmouseover="popup('<b>Sympathie</b>');" onmouseout="kill();"/>
</map>

<img
 style="border: 0px solid ; width: 230px; height: 460px; float: left;"
 src="bild.jpg" hspace="5" vspace="5" usemap="#test">

In der Popup-Funktion kannst Du beliebigen HTML-Code mitgeben, nur mit Hochkommata musst Du aufpassen (die solltest man escapen).
 
Vielen Dank für die neuen Anregungen. Die Klausur war soweit ganz gut ;-)

Ich habe jetzt mit dem Skript von Bomby mal eine .html Seite erstellt, das funktioniert auch.

Jetzt wollte ich das ganze in mein CMS integrieren und habe da noch ein paar Probleme...
Wenn ich es gelöst habe melde ich mich wieder.
 
Zurück
Oben Unten