login  Naam:   Wachtwoord: 
Registreer je!
 Forum

tooltip probleem (Opgelost)

Offline W0etah - 16/11/2008 12:30
Avatar van W0etahPHP beginner Hallo, ik heb hier een zeer simpele tooltip gemaakt dat mijn muis volgt wanneer je over een bepaald object gaat.

Het enige probleem is, dat hij die achtergrond images niet meer meeneemt.

In mijn html heb ik dit staan:
html code - Bekijk de code zonder highlighting - Klap code in 
  1. <div id="tooltip">

  2. 	<div id="tooltipTop"></div>

  3.     <div id="tooltipMiddle">test</div>

  4.     <div id="tooltipBottom"></div>

  5. </div>


en een klein beetje css erbij:
css code - Bekijk de code zonder highlighting - Klap code in 
  1. #tooltip {
  2. 	width: 231px;
  3. 	height: auto;
  4. 	position: absolute;
  5. }
  6. #tooltipTop {
  7. 	background-image: url(images/tooltipTop.png);
  8. 	width: 241px;
  9. 	height: 12px;
  10. }
  11. #tooltipMiddle {
  12. 	background-image: url(images/tooltipMiddle.png);
  13. 	width: 231px;
  14. 	height: 12px;
  15. 	padding-left: 5px;
  16. 	padding-right: 5px;
  17. }
  18. #tooltipBottom {
  19. 	background-image: url(images/tooltipBottom.png);
  20. 	width: 241px;
  21. 	height: 12px;
  22. }


en dan dit stukje javascript
javascript code - Bekijk de code zonder highlighting - Klap code in 
  1. // JavaScript Document
  2. var tooltipScreen;
  3.  
  4. document.onmousemove = getMousePos;
  5.  
  6. function getMousePos(e) {
  7. 	if(tooltipScreen == true) {
  8. 		document.getElementById('tooltip').style.top = e.pageY + 10 + "px";
  9. 		document.getElementById('tooltip').style.left = e.pageX + 10 + "px";
  10. 	}
  11. }
  12.  
  13. function showInfo(tekst) {
  14. 	tooltipScreen = true;
  15.  
  16. 	document.getElementById('tooltip').style.display = "block";
  17. 	document.getElementById('tooltip').innerHTML = tekst;
  18. }
  19. function hideInfo() {
  20. 	tooltipScreen = false;
  21.  
  22. 	document.getElementById('tooltip').style.display = "none";	
  23. }

4 antwoorden

Gesponsorde links
Offline Koen - 16/11/2008 13:24
Avatar van Koen PHP expert heb je soms een voorbeeldje online staan?
Offline W0etah - 16/11/2008 13:32
Avatar van W0etah PHP beginner Ik heb het ff online gezet:
Klik hier
Offline Koen - 16/11/2008 13:59
Avatar van Koen PHP expert
javascript code - Bekijk de code zonder highlighting - Klap code in 
  1. document.getElementById('tooltipMiddle').innerHTML = tekst;
Offline W0etah - 16/11/2008 14:01
Avatar van W0etah PHP beginner och inderdaad.

Ik had het eerst gemaakt zonder die borders, en daarna ben ik dat vergeten aan te passen.

Hartelijk dank
Gesponsorde links
Dit onderwerp is gesloten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.178s