login  Naam:   Wachtwoord: 
Registreer je!
 Forum

Mouseover tekst

Offline Activeren - 06/01/2007 18:53
Avatar van ActiverenPHP interesse Heey SiMa..


Ik had een vraagje, (ik wil geen reclame maken, maar als voorbeeld wil ik je doorsturen naar http://www.mastercode.nl )

Als je daar kijkt, en je gaat met je mouse over een link, dan komt er een rondje voor, wat voor scripts zijn dit??

9 antwoorden

Gesponsorde links
Offline zamna - 06/01/2007 19:15
Avatar van zamna HTML beginner Als je een beetje naar de broncode had gekeken dan had je gezien dat dit CSS was:
php code - Bekijk de code zonder highlighting - Klap code in 
  1. #menu-l li, #menu-r li {
  2. 	margin: 20px 0 0 0;
  3. 	padding: 0;
  4. 	list-style: none;
  5. 	color: #fff;
  6. 	font-size: 11px;
  7. }
  8. #menu-l li h2, #menu-r li h2 {
  9. 	margin: 0 0 0 0;
  10. 	height: 25px;
  11. 	padding: 3px 0 0 0;
  12. 	overflow: hidden;
  13. 	font-size: 12px;
  14. 	text-indent: 22px;
  15. 	background: url(../img/h2.gif) no-repeat;
  16. 	color: #fff;
  17. }
  18. #menu-l li ul, #menu-r li ul {
  19. 	margin: 0;
  20. 	padding: 0;
  21. }
  22. #menu-l li ul li, #menu-r li ul li {
  23. 	display: block;
  24. 	width: 160px;
  25. 	margin: 0;
  26. 	padding: 0;
  27. }
  28. #menu-l li ul li a, #menu-r li ul li a {
  29. 	display: block;
  30. 	height: 100%;
  31. 	width: 100%;
  32. 	color: #fff;
  33. 	text-decoration: none;
  34. 	text-indent: 11px;
  35. 	padding: 3px 0;
  36. }
  37. #menu-l li ul li a:hover, #menu-r li ul li a:hover {
  38. 	color: #cddd25;
  39. 	background: url(../img/a-hover.gif) 5px 54% no-repeat;
  40. }
Offline Ibrahim - 06/01/2007 19:23
Avatar van Ibrahim PHP expert je kunt dit doen:

php code - Bekijk de code zonder highlighting - Klap code in 
  1. <a href="..." onmouseover="showImage('divID');" onmouseout="hideImage('divID');">link</a>
  2.  
  3. <style ...>
  4. #divID {
  5.     display: none;
  6. }
  7. </style>
  8.  
  9. <div id="divID">
  10.    <img src="..." alt="..." />
  11. </div>

en dan met JS de display veranderen in block (weergeven) of in none (verbergen).
Offline zamna - 06/01/2007 19:30 (laatste wijziging 06/01/2007 19:32)
Avatar van zamna HTML beginner Hoh siliecom14,
Je kan het ook met een a:hover-effect in css bereiken hoor.

EDIT: zie deze link: http://www.phoenity.com/newtedge/element_hover/
Offline vinTage - 06/01/2007 19:33 (laatste wijziging 06/01/2007 19:34)
Avatar van vinTage Nieuw lid En je mag ook maar één div hebben per idNaam, anders is het niet xhtml, dus dat moet een class worden of veel dzelfde divjes met een andere naam 
Offline Activeren - 06/01/2007 19:42 (laatste wijziging 06/01/2007 19:53)
Avatar van Activeren PHP interesse Oke bedankt, ik ga even proberen om ok de link van de broncode te halen..

Edit: het werkt niet, ik heb in me css, style.css

php code - Bekijk de code zonder highlighting - Klap code in 
  1. #menu-l li, #menu-r li {
  2.   margin: 20px 0 0 0;
  3.   padding: 0;
  4.   list-style: none;
  5.   color: #fff;
  6.   font-size: 11px;
  7. }
  8. #menu-l li h2, #menu-r li h2 {
  9.   margin: 0 0 0 0;
  10.   height: 25px;
  11.   padding: 3px 0 0 0;
  12.   overflow: hidden;
  13.   font-size: 12px;
  14.   text-indent: 22px;
  15.   background: url(../img/h2.gif) no-repeat;
  16.   color: #fff;
  17. }
  18. #menu-l li ul, #menu-r li ul {
  19.   margin: 0;
  20.   padding: 0;
  21. }
  22. #menu-l li ul li, #menu-r li ul li {
  23.   display: block;
  24.   width: 160px;
  25.   margin: 0;
  26.   padding: 0;
  27. }
  28. #menu-l li ul li a, #menu-r li ul li a {
  29.   display: block;
  30.   height: 100%;
  31.   width: 100%;
  32.   color: #fff;
  33.   text-decoration: none;
  34.   text-indent: 11px;
  35.   padding: 3px 0;
  36. }
  37. #menu-l li ul li a:hover, #menu-r li ul li a:hover {
  38.   color: #cddd25;
  39.   background: url(../img/a-hover.gif) 5px 54% no-repeat;
  40. }


en als link:
<ul>
<li><a href="index.php" accesskey="h">JOUW LINK</a></li>
<ul>

wie ziet het probleem??
Offline Ibrahim - 06/01/2007 19:56
Avatar van Ibrahim PHP expert aja, de hover functie, hoe kon ik die vergeten . Krijg je ervan als je 3 dagen achter elkaar met JS bezig bent 
Offline zamna - 06/01/2007 19:58
Avatar van zamna HTML beginner Je <ul>-list heeft geen id terwijl de in style.css gedefinieerde zaken voor het element met id 'menu' zijn.

Probeer het te begrijpen, bekijk mijn link: http://www.phoenity.com/newtedge/element_hover/
Offline Xtent - 06/01/2007 20:00
Avatar van Xtent Onbekend @ Activeren
Beter probeer je het eerst zelf dan het meteen letterlijk te kopieren?
Offline Activeren - 06/01/2007 20:16
Avatar van Activeren PHP interesse Waar slaat dat nou op..

Ik ben hier niet goed in dat zie je best, en dan geven ze mij codes, en dan zit er geen n inplaats van een t in bijv...

dus ik kopieer het gewoon, dus..??
Gesponsorde links
Dit onderwerp is gesloten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.338s