login  Naam:   Wachtwoord: 
Registreer je!
 Forum

CSS mouseover

Offline DrB - 13/08/2006 10:05
Avatar van DrBHTML interesse Beste leden,

Ik heb de tutorial al doorgelezen van de mouse-over, maar toch kom ik er niet helemaal uit. Ik heb dit in mn css staan:

php code - Bekijk de code zonder highlighting - Klap code in 
  1. .contact{float:left;width:110px;height:81px;text-align:left;background:url("images/contact.jpg") no-repeat;}


En dit in mijn index:

php code - Bekijk de code zonder highlighting - Klap code in 
  1. <div class="contact">
  2. </div>


Nu wil ik alleen dat als je over contact gaat met de muis contact2.jpg in beeld komt, dit alles moet linken naar contact.php

Zou iemand misschien kunnen vertellen hoe ik hieraan zou moeten beginnen?

10 antwoorden

Gesponsorde links
Offline Rik - 13/08/2006 10:19 (laatste wijziging 13/08/2006 10:19)
Avatar van Rik Gouden medailleGouden medaille

Crew algemeen
php code - Bekijk de code zonder highlighting - Klap code in 
  1. .contact{float:left;width:110px;height:81px;text-align:left;background:url("images/contact.jpg") no-repeat;}
  2. .contact:hover{background:url("images/contact2.jpg"}

&
php code - Bekijk de code zonder highlighting - Klap code in 
  1. <a href="contact.php"><div class="contact">
  2. </div></a>

Zo?
Offline CDNC - 13/08/2006 10:21 (laatste wijziging 13/08/2006 10:22)
Avatar van CDNC PHP ver gevorderde CSS kan ook netjes he...
php code - Bekijk de code zonder highlighting - Klap code in 
  1. .contact a, .contact a:active, .contact a:visited
  2. {
  3.   width:110px;
  4.   height:81px;
  5.   background:url("images/contact.jpg") no-repeat;
  6.   text-decoration:none;
  7. }
  8.  
  9. .contact a:hover
  10. {
  11.   width:110px;
  12.   height:81px;
  13.   background:url("images/contact2.jpg") no-repeat;
  14.   text-decoration:none;
  15. }
  16.  
  17. <a href="contact.php" class="contact">&nbsp;</a>
Offline DrB - 13/08/2006 10:33 (laatste wijziging 19/08/2006 11:07)
Avatar van DrB HTML interesse Ja bedankt werkt perfect. Ben opzich al op de goede weg qua CSS vind ik zelf ;) , maar wist niet dat dit opzich best makkelijk is. Bedankt voor de hulp in ieder geval!

//edit

Nog even iets over de mouse over:

Ishet ook mogelijk om een div te linken?

Ik heb een div waar een plaatje instaat:

php code - Bekijk de code zonder highlighting - Klap code in 
  1. .foto {
  2. 	float:left;
  3. 	width:778px;
  4. 	height:194px;
  5. 	text-align:left;
  6. 	background:url("images/foto.jpg") no-repeat;
  7. 	border: 1px dashed #000000;
  8. }


Als men hierop klikt met men naar bijv link.php gaan, maar als men over het plaatje beweegt moet foto2.jpg in beeld komen. Hoe doe ik dit?
Offline bennieboy - 19/08/2006 11:13
Avatar van bennieboy HTML beginner dat doe je zo:

<a href="link.php"><div class="foto"></div></a>
Offline DrB - 19/08/2006 11:15
Avatar van DrB HTML interesse En de mouse-over? Daat gaat het om namelijk...

php code - Bekijk de code zonder highlighting - Klap code in 
  1. .foto a:hover
  2. {
  3.   background:url("images/foto2.jpg") no-repeat;
  4. }


Dit werkt niet
Offline nielsvdwal - 19/08/2006 11:28
Avatar van nielsvdwal PHP gevorderde en a.foto:link, a.foto:active, a.foto:visited {
plaatje normaal
}

a.foto:hover {
plaatje mouseover
}

ik snap niet echt waarom je die div een link wilt geven..
Offline DrB - 19/08/2006 11:53
Avatar van DrB HTML interesse Nope werkt ook niet.

Citaat:
ik snap niet echt waarom je die div een link wilt geven..


Omdat die divs gepositioneerd staan met het plaatje erin. Als ik ze gewoon neerzet als plaatje verschuiven de divs erboven.
Offline CDNC - 19/08/2006 12:03 (laatste wijziging 19/08/2006 12:03)
Avatar van CDNC PHP ver gevorderde gaat wel
php code - Bekijk de code zonder highlighting - Klap code in 
  1. <div onclick="location.href=''">iets</div>
Offline DrB - 19/08/2006 12:28 (laatste wijziging 19/08/2006 12:55)
Avatar van DrB HTML interesse Ik heb nu maar gewoon een mouse-over code in de Div gezet, beetje dubbelop , maar nu werkt het wel.

Bedankt voor de reacties.
Offline bosgroen - 19/08/2006 14:55
Avatar van bosgroen Gouden medaille

PHP interesse		 weet in elk geval dat CDNC's oplossing enkel een Javascript-oplossing is.
- Hover kan enkel op een A-element (voorlopig, voor meeste browsers,...)
- andere elementen kan je in een A-element zetten
bv:
<a href=""><div><span>test</span></div></a>
css:
A:active{color: red;}
A:hover div span{color: black;}
- nadeel is dat je geen A's kunt nesten (indien je browsercompatibel wil blijven)
Gesponsorde links
Dit onderwerp is gesloten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.226s