login  Naam:   Wachtwoord: 
Registreer je!
 Forum

Foto documenteren

Offline janencike - 10/03/2011 12:58 (laatste wijziging 12/03/2011 00:16)
Avatar van janencikeNieuw lid Op een familiefoto met meerdere personen wil ik de naam van die personen doen oplichten wanneer de muis aanwijzer over die persson beweegt.
Liefst met CSS desnoods met Javascript.
Ik heb in verband daarme nog niets ingevoerd in de <HEAD> ... </HEAD>
Hieronder de BODY voorlopig met slechts één <AREA>
De naam van die eerste persoon is Sara Van Hecke.
Wat ontbreekt er? Waar en hoe komt OnMouseOn?

html4strict code - Bekijk de code zonder highlighting - Klap code in 
  2.  
  3. <img src="../../../../Janencike/Prentjes/Huwelijk_Alma_Van_Coppenolle.jpg" border="0" width="1292" height="488">
  4.  
  5. <DIV align=center>
  6.  
  7. <MAP NAME="Huwelijk Alma Van Coppenolle"
  8.  
  9. <AREA SHAPE=rect COORDS="52,210, 146,315" NAME="Sara Van Hecke">
  10.  
  11. </MAP>
  12.  
  13. </body>

4 antwoorden

Gesponsorde links
Offline svm - 10/03/2011 16:15 (laatste wijziging 10/03/2011 16:17)
Avatar van svm PHP ver gevorderde Probeer het zo eens:

html4strict code - Bekijk de code zonder highlighting - Klap code in 
  1. <img src="../../../../Janencike/Prentjes/Huwelijk_Alma_Van_Coppenolle.jpg" border="0" width="1292" height="488" usemap="#fotos">
  2.  
  3. <MAP NAME="fotos">
  4. 	<AREA SHAPE="rect" COORDS="52,210, 146,315" title="Sara Van Hecke">
  5. </MAP>


En gelieve codetages te gebruiken .

Edit:
Meer info over image maps: Tutorial HTML - Afbeeldingen #4
Offline janencike - 11/03/2011 11:02
Avatar van janencike Nieuw lid Die tags <MAP> en <AREA> heb ik onder de knie.
Wat met onMouseOver enz.
Ik wil gaarne een eenvoudig COMPLEET voorbeeld.
Offline svm - 11/03/2011 17:29 (laatste wijziging 11/03/2011 17:37)
Avatar van svm PHP ver gevorderde Hmm... in je code heb je hem anders nog niet onder de knie, maar goed.
Mouseover is niet nodig omdat je voor info het title-attribuut gebruikt.

Daarnaast werkt het gene dat ik je gaf, maar wat jij wilt is waarschijnlijk een directe tooltip: dit dan met javascript.
Ik raad je dan aan een tooltip scriptje te gebruiken, mogelijk gebaseerd op jQuery.

Edit:
Hier heb je een compleet werkend voorbeeld.
Het bestandje tooltip.jquery.js is hier met uitleg van dit (simpel aan te passen) script te vinden.

html4strict code - Bekijk de code zonder highlighting - Klap code in 
  1. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
  2. <script type="text/javascript" src="tooltip.jquery.js"></script>
  3. <script type="text/javascript">
  4. 	$(function(){ 
  5. 		$("area").tooltip();
  6. 	}); 
  8.  
  9. <img src="afbeelding.jpg" border="0" width="1292" height="488" usemap="#fotos">
  10.  
  11. <MAP NAME="fotos">
  12. <AREA id="Sara" SHAPE="rect" COORDS="52,210, 146,315" />
  13. </MAP>
  14.  
  15. <div style="display:none">		
  16. 	<div id="data_Sara">Van Hecke</div>
  17. </div>
Offline Abbas - 12/03/2011 00:17
Avatar van Abbas Gouden medaille

Crew .NET		 Volgende keer graag codetags rond je code!
Gesponsorde links
Je moet ingelogd zijn om een reactie te kunnen posten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.18s