login  Naam:   Wachtwoord: 
Registreer je!
 Forum

hover

Offline Pellens - 04/10/2007 16:03 (laatste wijziging 05/10/2007 19:09)
Avatar van PellensPHP interesse Juw mannen,

Uit haast moet ik deze vraag even stellen, waarschijnlijk vind ik hem terug ergens/ooit...
Ik heb 2 dezelfde afbeeldingen gemaakt, de 1 is donkerder als de andere en bevat wat tekst.
Ik wil dat wanneer ik over 1 tekening ga, de andere verschijnt (het is een link)! Het moet tegen morgen af zijn...

Some quick help aight?

Citaat:
PieterC Edit: Ook al heb je haast, je mag toch iets meer moeite doen in het vervolg om je vraag wat netter te omschrijven. 

12 antwoorden

Gesponsorde links
Offline HOND_NL - 04/10/2007 16:06 (laatste wijziging 05/10/2007 19:10)
Avatar van HOND_NL Nieuw lid Javascript :

zoek op google : onmouseover=
en :
innerhtml

Of css ( maar werkt waarschijnlijk niet in IE)
<img class="test" etc..
css code - Bekijk de code zonder highlighting - Klap code in 
  1. img.test{
  2.  
  3. background-image:url
  4.  
  5. }
  6.  
  7. img.test:hover{
  8.  
  9. background-image:andere url
  10.  
  11. }



Citaat:
PieterC Edit: Codetags gebruiken, ze staan er voor iets hé.
Offline Pellens - 04/10/2007 16:06
Avatar van Pellens PHP interesse het mag geen java zijn!
Offline HOND_NL - 04/10/2007 16:09
Avatar van HOND_NL Nieuw lid ik heb hem boven geupdate..

ZIe de IE hacks op google om toch hover te krijgen...
Offline Pellens - 04/10/2007 16:33
Avatar van Pellens PHP interesse bij img zet je een src, maar hierdoor werkt het niet geloof ik... kan dat? Kan jem ss de img tag volledig uitschrijven?
Offline citroen - 04/10/2007 16:58
Avatar van citroen Onbekend probeer met
php code - Bekijk de code zonder highlighting - Klap code in 
  1. <img src="javascript:;" class="test" alt="test" />
maar zoals gezegd. :hover effect werkt niet in Internet Explorer 6
Offline JPW120 - 04/10/2007 17:02
Avatar van JPW120 HTML interesse Hier doe ze het ook alleen dan onmouse over bij de tekst. Zie link.
Offline HOND_NL - 04/10/2007 17:43 (laatste wijziging 04/10/2007 17:43)
Avatar van HOND_NL Nieuw lid Ok hier is je oplossing :


http://www.rele.../hover.php

over de zwarte div veroorzaakt hover in plaatje in IE en Firefox

Hoe ?

je html pagina

html4strict code - Bekijk de code zonder highlighting - Klap code in 
  1. <div class="plaatje" >
  2.  
  3. </div>


maak een stylesheet ( CSS)
verander de waardes naar keuze


css code - Bekijk de code zonder highlighting - Klap code in 
  1. div.plaatje{
  2.  
  3. height:100px;
  4. border:#000000 1px solid;
  5.  
  6. background-image:url(bubble_middle.gif);
  7.  
  8. background-repeat:no-repeat;
  9.  
  10. }
  11.  
  12. div.plaatje {
  13.   behavior: url(hover.htc); } // IE hack kom ik zo op terug
  14.  
  15.  
  16. div.plaatje:hover ,div.plaatje.hover{
  17.  
  18. height:100px;
  19. border:#000000 1px solid;
  20. background-color:#000000;
  21. background-image:url(bubble_bottom.gif);// tweede plaatje
  22.  
  23. background-repeat:no-repeat;
  24.  
  25. }


DE ie hack


Open een nieuwe document of kladblok
donder de code erin en save hem als
hover.htc

html4strict code - Bekijk de code zonder highlighting - Klap code in 
  1. <PUBLIC:COMPONENT lightWeight="true">
  2. <PUBLIC:ATTACH EVENT="onmouseover" ONEVENT="Hover()" />
  3. <PUBLIC:ATTACH EVENT="onmouseout" ONEVENT="Unhover()" />
  4. <SCRIPT LANGUAGE="JScript">
  5.   function Hover()
  6.   {
  7.     element.className += " hover";
  8.   }
  9.  
  10.   function Unhover()
  11.   {
  12.     element.className = element.className.replace(/\s*hover/, "");
  13.   }
  15. </PUBLIC:COMPONENT>
Offline citroen - 04/10/2007 19:33 (laatste wijziging 04/10/2007 19:37)
Avatar van citroen Onbekend als je met behaviors gaat werken kan je beter javascript toepassen, behaviors maken je css invalid...

Edit: ofwel maak je van je img tags urls:

css code - Bekijk de code zonder highlighting - Klap code in 
  1. .img {
  2.  display: block;
  3.  width: 100px;
  4.  height: 100px;
  5.  background-image: url(afbeelding.jpg);
  6.  text-decoration: none;
  7. }
  8.  
  9. .img:hover {
  10.  background-image: url(afbeelding_hover.jpg);
  11. }


html code - Bekijk de code zonder highlighting - Klap code in 
  1. <a href="javascript:;" title="Mijn Afbeelding" class="img">&nbsp;</a>


Niet getest, maar zou zonder problemen moeten werken
Offline HOND_NL - 04/10/2007 20:12
Avatar van HOND_NL Nieuw lid Idd goede oplossing 
Offline citroen - 04/10/2007 20:17
Avatar van citroen Onbekend voor de mensen die het dan vervelend vinden dat je een handje ziet zet bij .img {} nog cursor: default; en dan is dat meteen opgelost
Offline TotempaaltJ - 05/10/2007 17:32
Avatar van TotempaaltJ PHP interesse Hmm...
Het mag geen Java zijn... Wordt hier ook daadwerkelijk Java mee bedoeld, of javascript? Dit zijn namelijk 2 héle verschillende dingen! 
Anders:
html4strict code - Bekijk de code zonder highlighting - Klap code in 
  1. <img src="jelpaatje.ext" onmouseover="this.src = 'jeplaatge2.ext';" onmouseout="this.src = 'jelpaatje.ext';"
Offline citroen - 05/10/2007 18:27
Avatar van citroen Onbekend Wat denkt ge nu zelf als het bij Html & css staat en over hover effecten van afbeeldingen wordt gepraat. 100% kans dat het niet over Java gaat.
Gesponsorde links
Dit onderwerp is gesloten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.234s