login  Naam:   Wachtwoord: 
Registreer je!
 Forum

mouse-over button

Offline RickyB - 08/07/2005 18:33 (laatste wijziging 08/07/2005 21:34)
Avatar van RickyBOnbekend mischien een stomme vraag, maar hoe maak je nou gewoon een mouseover button in een tabel? Ik weet nl. nix van javascript en ik denk dat dit onderwerp daar thuis hoort. dus de background in een cel moet veranderen bij een mouse-over. hoe doe ik dit?

RickyB;-)

edit: Dat is niet echt wat ik bedoel duikboot;-)
nee duikboot. ik bedoel een achtergrondje die veranderd. (een plaatje)

17 antwoorden

Gesponsorde links
Offline Duikboot - 08/07/2005 18:40 (laatste wijziging 08/07/2005 18:59)
Avatar van Duikboot Grafische gevorderde http://www.site...amp;id=359

Het was met onmouseover... hoe je het helemaal precies moet doen weet ik niet.

EDIT: Je bedoeld dus dat de achtergrond kleur veranderd, net als in phpmyadmin?
Offline gijs - 08/07/2005 18:59
Avatar van gijs HTML beginner In FrontPage zit zo'n functie ingebouwd, maar hij maakt dan een ****-lange code in je html..

Maar het werkt dan wel 
Offline RickyB - 08/07/2005 19:01 (laatste wijziging 08/07/2005 19:45)
Avatar van RickyB Onbekend Nee duikboot:D . Ik bedoel bijv. plaatje1.jpg verander1 in plaatje2.jpg scnappie?

@ gijs: Ik zal ff kijken, want ik werk nooit met frontpage;-)


edit @ rensie: het werkt niet helemaal;-) hij blijft bij het eerste plaatje
(Ik ben niet echt goed in css)

werkt nog niet:'(
Offline Rens - 08/07/2005 19:16 (laatste wijziging 08/07/2005 19:49)
Avatar van Rens Gouden medaille

Crew algemeen		 Dit kan ook heel simpel met css.
voorbeeldje:

php code - Bekijk de code zonder highlighting - Klap code in 
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
  2. <HTML>
  3. <HEAD>
  4. <style type="text/css">
  5. td.class:hover
  6. {
  7. 	/* plaatje dat komt bij de mouseover */
  8.     background-image: url("plaatje2.jpg");
  9. }
  10.  
  11. td.class
  12. {
  13. 	/* plaatje dat er standaard staat */
  14.     background-image: url("plaatje1.jpg");
  15. }
  16. </style>
  17. <TITLE> TEST </TITLE>
  18. </HEAD>
  19. <BODY>
  20. <table border="1" cellpadding="0" cellspacing="0" width="200">
  21.     <tr>
  22.         <td class="class">
  23.             blaat
  24.         </td>
  25.     </tr>
  26. </table>
  27. </BODY>
  28. </HTML>


edit; Hmm, bij mij werkt het wel in FireFox, en als ik doctype e.d. eromheen zet (code hierboven, aangepast), geeft hij hem ook 100% valid:s

Ook niet in firefox?
Weet je trouwens wel zeker dat die 2 plaatjes (plaatje1.jpg en plaatje2.jpg) bestaan?
En of ze niet *.JPG heten?
Bij mij slaat paint (had ff 2 plaatjes gemaakt in paint) altijd de plaatjes op met de extentie als hoofdletters^^
Offline burdy92 - 08/07/2005 19:49
Avatar van burdy92 HTML interesse zoek eens tussen alle topics,, hij staat er wel tussen,, want ik he het nu ook en heb geen topic gestart.. dus EERST zoeken 
Offline RickyB - 08/07/2005 19:52 (laatste wijziging 08/07/2005 22:07)
Avatar van RickyB Onbekend o burdy als jij het nu ook heb, waarom geef je dan niet gelijk die link? het was nog niet in me op gekomen om tussen de topics te zoeken, want ik dacht het is gewoon een domme vraag, maar ik kwam er niet uit^^.

RickyB;-)


@rensjuh uhn nee plaatje1 en 2 .jpg bestaan niet, maar wel button.jpg en button_over.jpg. kijk maar
php code - Bekijk de code zonder highlighting - Klap code in 
  1. <html>
  2. <head>
  3. <style type="text/css">
  4. <!--
  5. td.class:hover
  6. { background-image: url(button_over.jpg); }
  7.  
  8. td.class
  9. { background-image: url(button.jpg); }
  10.  
  11. a:link { color:black; }
  12. a:hover { color:purple; }
  13. -->
  14. </style>
  15. </head>
  16. <body>
  17. <table border=0>
  18.     <tr>
  19.         <td width=114 class=class>
  20.             <center><a href=home.html><font face="comic sans ms" size=1>home</font></a></center>
  21.         </td>
  22.     </tr>
  23. </table>
  24. </body>
  25. </html>



edit @rensjuh: dat bedoel ik;-)
Offline Rens - 08/07/2005 20:01 (laatste wijziging 08/07/2005 21:03)
Avatar van Rens Gouden medaille

Crew algemeen		 Je zegt dat buttonover.jpg bestaat, en in je code staat button_over.jpg:?: 

edit; Dan weet ik het ook niet meer...
Offline zointer - 08/07/2005 22:30
Avatar van zointer HTML gevorderde MouseOver Button Wizard is gratis
Offline RickyB - 08/07/2005 22:48
Avatar van RickyB Onbekend Ja het is een goed programmatje, maar ik ben voor iemand een site aan ut maken, waarbij ik geen php mag gebruiken, want dat kan de host niet aan:$ .

en met dat programma schrijft ie een stukkie php voor je uit.

RickyB;-)
Offline Simon - 08/07/2005 22:58
Avatar van Simon PHP expert is er geen mogelijkheid om dat stukje te vervangen ?
Offline burdy92 - 08/07/2005 23:02
Avatar van burdy92 HTML interesse zoek ff rond op http://www.leejoo.nl (geen reclame hoor maar daar staat volges mij wel wat hij vraagt):P
Offline zointer - 08/07/2005 23:21
Avatar van zointer HTML gevorderde
Citaat:
RickyB
Ja het is een goed programmatje, maar ik ben voor iemand een site aan ut maken, waarbij ik geen php mag gebruiken, want dat kan de host niet aan

JavaScript enabled rollovers
heb het prog eens getest ziehier het resultaat:
head
php code - Bekijk de code zonder highlighting - Klap code in 
  1. <script language="JavaScript">
  2. /* MouseOver Button Wizard by Mike Cullen
  3. EMAIL ME AT mcullen1@hotmail.com or visit http://www.mobw.net */
  4. var browser     = '';
  5. var version     = '';
  6. var entrance    = '';
  7. var cond        = '';
  8. // BROWSER
  9. if (browser == ''){
  10. if (navigator.appName.indexOf('Microsoft') != -1)
  11. browser = 'IE'
  12. else if (navigator.appName.indexOf('Netscape') != -1)
  13. browser = 'Netscape'
  14. else browser = 'NN';
  15. }
  16. // VERSION?
  17. if (version == ''){
  18. version= navigator.appVersion;
  19. paren = version.indexOf('(');
  20. whole_version = navigator.appVersion.substring(0,paren-1);
  21. version         = parseInt(whole_version);
  22. }
  23. // BROWSER & VERSION
  24. if (browser == 'IE' && version >= 4) entrance = 'yes';
  25. if (browser == 'IE' && version < 4) entrance = 'no';
  26. if (browser == 'Netscape' && version >= 2.02) entrance = 'yes';
  27. if (browser == 'Netscape' && version < 2.02) entrance = 'no';
  28. if (entrance=='yes'){
  29. name0a=new Image;name0a.src="http://www.sitemasters.be/images/smilies/icon_cheesygrin.gif";
  30. name0b=new Image;name0b.src="http://www.sitemasters.be/images/smilies/icon_tong.gif";
  31. name0c=new Image;name0c.src="http://www.sitemasters.be/images/smilies/icon_cheesygrin.gif";
  32. }
  33. function lighten(imgName) {
  34. if (entrance == 'yes'){
  35. imgOn = eval(imgName + 'b.src');
  36. document[imgName].src = imgOn;
  37. }
  38. }
  39. function darken(imgName) {
  40. if (entrance == 'yes'){
  41. imgOff = eval(imgName + 'a.src');
  42. document[imgName].src = imgOff;
  43. }
  44. }
  45. function darken2(imgName) {
  46. if (entrance == 'yes'){
  47. imgClick = eval(imgName + 'c.src');
  48. document[imgName].src = imgClick;
  49. }
  50. }
  51. </script>

body
php code - Bekijk de code zonder highlighting - Klap code in 
  1. <!--Button Number 1-->
  2. <a href="http://www.sitemasters.be" target="_self" onmouseover="lighten('name0')" onmouseout="darken('name0')" onmousedown="darken2('name0')" onmouseup="darken('name0')"><img src="http://www.sitemasters.be/images/smilies/icon_cheesygrin.gif" name="name0" alt="sitemasters.be" border="0"></a>
Offline RickyB - 09/07/2005 12:02 (laatste wijziging 09/07/2005 12:41)
Avatar van RickyB Onbekend oja sorry!!!!!!!!
maar ik dacht er staat if in, dus het is php. Ik had niet goed gekeken.

Ik ken ook nix van javascript, dus vandaar...
Ik denk dat ik het dus wel kan gebruiken;-)

RickyB;-)

nee dat was me probleem.
Offline zointer - 09/07/2005 12:38
Avatar van zointer HTML gevorderde dat is nu jullie probleem, je kijkt niet verder dan je neus lang is 
Offline RickyB - 09/07/2005 13:03 (laatste wijziging 10/07/2005 23:15)
Avatar van RickyB Onbekend Laat maar
Offline gamesty - 11/07/2005 08:26
Avatar van gamesty Onbekend Hiermee iets:
php code - Bekijk de code zonder highlighting - Klap code in 
  1. <HEAD>
  2.  
  3. <SCRIPT LANGUAGE="JavaScript">
  4.  
  5. <!-- Begin
  6.  
  7. image1 = new Image();
  8. image1.src = "afbeelding_over.jpg";
  9.  
  10. // End -->
  11. </script>
  12. </HEAD>
  13.  
  14. <BODY>
  15.  
  16. <a href="htttp://www.jesite.be" onmouseover="image1.src='afbeelding_over.jpg';"
  17. onmouseout="image1.src='afbeelding.jpg';">
  18. <img name="image1" src="afbeelding.jpg" border=0></a>
  19.  
  20. </BODY>
Offline gamesty - 11/07/2005 08:29 (laatste wijziging 11/07/2005 08:30)
Avatar van gamesty Onbekend Of dit:
php code - Bekijk de code zonder highlighting - Klap code in 
  1. <head>
  2. <title>JavaFILE</title>
  3. <base target="leftframe">
  4. </head>
  5.  
  6. <body BGCOLOR="#ffffff" link="#CC0033" vlink="#333399" alink="#FF0000"
  7.  
  8.  
  9.  
  10. <table WIDTH="96%" BORDER="0" CELLSPACING="5" CELLPADDING="5">
  11.   <tr>
  12.     <td WIDTH="100%"><font
  13.     FACE="ARIEL,HELVETICA" SIZE="-1">
  14.     <p align="center
  15. <a HREF ONMOUSEOVER="document.bgColor='silver'">Text of afbeelding.Mss je tabelcode</a>
  16.     </font></td>
  17.   </tr>
  18. </table>
  19. <!--content stop-->
  20. </body>
  21. </html>
  22. </body>
  23. </html>
Gesponsorde links
Dit onderwerp is gesloten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.264s