login  Naam:   Wachtwoord: 
Registreer je!
 Forum

bg van td

Offline superlol - 06/04/2007 17:32 (laatste wijziging 06/04/2007 18:48)
Avatar van superlolPHP interesse Hey

Weet iemand hoe ik hetvolgende voor mekaar krijg:
Ik heb een <TD> ik wil dat wanneer je over deze kolom gaat, dat de achtergrond verandert(mouse-over) en in die kolom staat nog een link, ik wil dat die kleur van die link(<A>) ook verandert. De hele td moet klikbaar zijn, en linken naar wat die link in die kolom linkt(ik dacht iets met display:block?).
Weet iemand hoe ik dit kan doen?

Bvd!

PS:het liefst in CSS:p

15 antwoorden

Gesponsorde links
Offline delta_004 - 06/04/2007 17:34
Avatar van delta_004 Onbekend onMouseover="this.style.background-image: url('Link')"
Offline superlol - 06/04/2007 17:36 (laatste wijziging 06/04/2007 19:20)
Avatar van superlol PHP interesse bedankt, maar hoe doe ik derest ook dan? En het liefst wil ik het in CSS doen..
Offline bertmelis - 06/04/2007 19:42
Avatar van bertmelis PHP interesse Mag ik vragen waarom je het zo doet? Waarom niet gewoon de link wat "marge" geven (door padding)?

Enfin, wat jij wil is denk ik niet "Tidy" met css/html alleen. Je moet werken met onmouseover, onmousedown,... en telkens alle css-styles invoeren.

als het voor een menu is, kan je best hier eens een kijkje nemen: http://css-discuss.incutio.com/?page=ListMenus
Offline superlol - 06/04/2007 19:51 (laatste wijziging 07/04/2007 11:07)
Avatar van superlol PHP interesse Nee het is niet voor een menu.
Ik heb nu dit :
php code - Bekijk de code zonder highlighting - Klap code in 
  1. echo "<tr><td width='50'><img src='images/map_groot.jpg'></span></td>
  2.   <td><a href='?p=filmpjes&cat=".$show['id']."'>".$show['naam']."<BR>
  3.   <div class='style9'>".$show['beschrijving']."</div></a></td></tr>";

Kan iemand het misschien alles hierop toepassen?

@bertmelis,
wat bedoel je precies met :"Waarom niet gewoon de link wat "marge" geven (door padding)?"
php code - Bekijk de code zonder highlighting - Klap code in 
  1. -----------------------------------------------------edit
  2. Ik heb nu dit :
  3. td.bg-over a {
  4. color: black;
  5. display: block;
  6. text-decoration:none;
  7. } 
  8.  
  9. td.bg-over a:hover {
  10. color: white;
  11. display: block;
  12. background-image: url("images/bg-over.jpg");
  13. text-decoration:none;
  14. }
  15.  
  16. echo "<tr><td width='50'><img src='images/map_groot.jpg'></span></td>
  17.   <td class='bg-over'><a href='?p=filmpjes&cat=".$show['id']."'>".$show['naam']."<BR>
  18.   <div class='style9'>".$show['beschrijving']."</div></a></td></tr>";


Dit werkt perfect in FF maar in IE verandert de achtergrond niet 
Weet iemand wat er verkeerd id?

Citaat:
PieterC Edit: Code tags!
Offline bertmelis - 06/04/2007 21:04
Avatar van bertmelis PHP interesse @superlol's laatste reactie: Omdat IE geen :hover ondersteund op elementen anders dan a (links).

Als je aan de links padding toevoegt (padding: 5px;) , kan je de achtergrondkleur van de link (a-element) laten wijzigen bij de hover. Misschien is dat een oplossing?
Offline superlol - 06/04/2007 22:44
Avatar van superlol PHP interesse Bedankt voor de reactie bertmelis,
maar ik snap t niet helemaal
kan je misschien een voorbeeld geven of toepassen op mijn script?

Bvd
Offline Simon - 06/04/2007 22:51
Avatar van Simon PHP expert misschien kan je het zo oplossen:
php code - Bekijk de code zonder highlighting - Klap code in 
  1. <td onmouseover="this.style.background-image: url("images/bg-over.jpg");">Test</td>

good luck
Offline superlol - 06/04/2007 23:08
Avatar van superlol PHP interesse @simon,
dit werkt ook in FF en niet in IE
Offline Pieter - 07/04/2007 11:11 (laatste wijziging 07/04/2007 11:13)
Avatar van Pieter Gouden medaille

SEO guru		 Je moet dringend eens wat rond je heen kijken: zoek een correcte site wat code betreft, en kijk eens wat voor code ze gebruiken voor het menu, want het is toch html en css, dat kan je kopiëren!

hier bijvoorbeeld, of
hier, of
hier kan het zonder javascript!
Offline bertmelis - 07/04/2007 11:59
Avatar van bertmelis PHP interesse
php code - Bekijk de code zonder highlighting - Klap code in 
  1. td.bg-over a:hover {
  2. color: white;
  3. display: block;
  4. padding: 5px;
  5. background-image: url("images/bg-over.jpg") no-repeat 5px 5px;
  6. background-color: #F00;
  7. text-decoration:none;
  8. }

Die backgroung-colod kan je wijzigen in de gewenste RGB-waarde. Verder kan je die nog samenvoegen met de background-image en dan krijg je dit:
background: #F00 url("images/bg-over.jpg") no-repeat 5px 5px;

Padding kan je ook nog groter maken, maar dan moet je de positionering van de background-image ook mee wijzigen.
Offline superlol - 07/04/2007 15:16 (laatste wijziging 07/04/2007 15:24)
Avatar van superlol PHP interesse Hey

Iedereen bedankt!
Maar ik heb nu dit :
php code - Bekijk de code zonder highlighting - Klap code in 
  1. td.bg-over a {
  2. color: black;
  3. display: block;
  4. text-decoration:none;
  5. } 
  6.  
  7. td.bg-over a:hover {
  8. color: white;
  9. display: block;
  10. padding: 5px;
  11. background: url("images/bg-over.jpg");
  12. text-decoration:none;
  13. }


Hij werkt in IE nu ook helemaal goed, maar alleen de hele kolom moet klikbaar zijn en niet alleen de link, en de kolom's achtergrond moet ook veranderen als je met de muis eroverhheen gaat.
In FF gebeurt dit wel, maar in IE niet 
Weet iemand hoe ik dit ook in IE kan krijgen?

Bvd!
Offline gothmog - 07/04/2007 15:28 (laatste wijziging 07/04/2007 15:29)
Avatar van gothmog Lid
php code - Bekijk de code zonder highlighting - Klap code in 
  1. <td onclick="window.location.href='anderepagina.html'"></td>

;-)

En wat bedoel je met de koloms achtergrond moet veranderen?
Offline superlol - 07/04/2007 15:33 (laatste wijziging 07/04/2007 15:36)
Avatar van superlol PHP interesse bedankt!
Ik bedoel met kolom's achtergrond veranderen dat, wanneer je op de link gaat staan, dan pas verandert de koloms achtergrond,
maar als je niet op de link staat, maar wel op de kolom, dan verandert de achtergrond niet(IN IE). Maar ik wil graag dat dat wel gebeurt
Offline gothmog - 07/04/2007 15:45
Avatar van gothmog Lid Dan wordt het:
php code - Bekijk de code zonder highlighting - Klap code in 
  1. <td onclick="window.location.href='anderepagina.html'" onmouseover="background='images/bg-over.jpg'"></td>


Of in CSS (en javascript):
http://www.site...beeldingen
Offline superlol - 07/04/2007 16:57
Avatar van superlol PHP interesse Oke, heel erg bedankt,
ik heb nog n vraagje,
hoe kan ik ervoor zorgen dat een link die in een kolom staat, een bepaalde style krijgt(uit de CSS), wanneer je over de kolom gaat met je muis(mouseover) ?
Gesponsorde links
Dit onderwerp is gesloten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.22s