login  Naam:   Wachtwoord: 
Registreer je!
 Forum

Plaatje veranderen bij mouseover

Offline GroundZero - 10/05/2013 12:47 (laatste wijziging 10/05/2013 13:07)
Avatar van GroundZeroLid Beste,

ik heb één groot plaatje. Daar naast staan enkele regels met tekst. Wanneer je op een link gaat staan dan veranderd het plaatje (en de tekst). Echter wanneer je met de muis er weer vanaf gaat dan springt hij terug naar de oude.

Nu willen we graag aanpassen dat het plaatje en de tekst blijft staan eenmaal je er met de muis overheen bent gegaan.

Echter werkt dit niet omdat hij (uiteraard) in lagen werkt. Als ik dus naar onder ga over de links dan werkt het, maar ga ik terug in de volgorde (naar boven dus) dan werkt het niet omdat de plaatjes al zichtbaar zijn maar onder elkaar liggen.

Kan iemand mij vertellen hoe ik dit kan oplossen? ik heb weinig ervaring met jQuery dus ik zou het heel erg tof vinden als iemand voor mij een voorbeeld code zou kunnen maken 

Mijn huidige code:

javascript code - Bekijk de code zonder highlighting - Klap code in 
  1. <script type="text/javascript">
  2. function showdata(ent){
  3. 	$('.'+ent).fadeIn('fast', function(){});
  4. }
  5.  
  6. function hidedata(){
  7. 	$('.ent1').fadeOut('fast', function(){});
  8. 	$('.ent2').fadeOut('fast', function(){});
  9. 	$('.ent3').fadeOut('fast', function(){});
  10. 	$('.ent4').fadeOut('fast', function(){});
  11. 	$('.ent5').fadeOut('fast', function(){});
  12. 	$('.ent6').fadeOut('fast', function(){});
  13. 	$('.ent7').fadeOut('fast', function(){});
  14. 	$('.ent8').fadeOut('fast', function(){});
  15. }
  16. </script>



Ik denk dat er iets moet komen wat alle andere dingen op "hide" zet of display:none maar ik heb geen idee hoe dit te doen in jquery 



Opgelost

1 antwoord

Gesponsorde links
Offline Martijn - 13/05/2013 17:24 (laatste wijziging 14/05/2013 15:23)
Avatar van Martijn Crew PHP Allereerst is de functie die je meegeeft optioneel, dus hoef je niet mee te geven:
javascript code - Bekijk de code zonder highlighting - Klap code in 
  1. $('.'+ent).fadeIn('fast', function(){});
  2. // wordt dan
  3. $('.'+ent).fadeIn('fast');


Ik ga je niet het antwoord uitgewerkt geven, maar ik kan wel even uitleggen wat je moet doen:

Ipv dat je al die images gaat neerzetten, plaats je er gewoon 1 van de juiste afmetingen en geeft deze een id. Laten we deze even #changeableImage noemen.

Dan zijn er twee opties die je kunt doen:
- De anchor ( <a> ) een href geven naar de afbeelding, maar dan kan deze niet meer als anchor werken
- Indien je html5 gebruikt kun je 'data-' gebruiken. Ietsje lastiger, maar flexibeler

Ik ga in mn voorbeeld voor de html5, dan zijn we lekker compleet:
Wat je dan wilt is deze actie: [indien mouseover bij anchor] -> [zet de data-hoverImage waarde in de src van #changeableImage]

Paar dingen die je even samen mag puzzelen:
Je anchor word dan zo":
html4strict code - Bekijk de code zonder highlighting - Klap code in 
  1. <a href="/Waarde/deze/heen/moet" data-hoverImage="/link/naar/plaatje.jpg">Anchortext</a>


javascript code - Bekijk de code zonder highlighting - Klap code in 
  1. $('#menuNaastJeImg'). find('a').live('mouseover', function(){
  2. // hier kun je dan wat doen.
  3. // Tipje: var linkNaarImg = $(this).attr('data-hoverImage');
  4. })


javascript code - Bekijk de code zonder highlighting - Klap code in 
  1. // Dan kun je op deze manier een afbeelding veranderen:
  2. $('#changeableImage')[0].src = 'Dit word de link voor de afbeelding';
  3. // Edit: Was de [0] vergeten, wat ook kan is dit:
  4. $('#changeableImage').attr('src', 'Dit word de link voor de afbeelding');//. dit kan ook
  5. //Ik geef de voorkeur aan de manier die het dichtste bij native javascript ligt, zonder de leesbaarheid van jQuery op te geven
Gesponsorde links
Je moet ingelogd zijn om een reactie te kunnen posten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.176s