jquery position van een class krijgen

Door arend b op 18-01-2013 18:47

1.066 views

goede avond,

ik wil graag de positie weten van mijn afbeelding zodat ik div kan laten verschijnen boven de afbeelding. alleen heb ik 3 afbeeldingen in footer met een andere x locatie alleen hoe krijg ik deze locatie?


<footer>	
  <a href="#"><img src="v2.jpg" alt="test" height="134" width="280" class="event"></a>
  <a href="#"><img src="header.png" alt="test2" height="134" width="280" class="event"></a>
  <a href="#"><img src="20133.jpg" alt="test3" height="134" width="280" class="event"></a>
</footer>
<div id="hover"></div>
<script>
$(document).ready(function(){
  $("a").mouseover(function(){
	  var img = $(".event").offset();
	  var posx = img.left;
	  var posy = img.top;
	  $("#hover")
	  			 .css("visibility","visible")	
	  			 .css("top", "450px")
				 .css("left", "370px")
				 .css("width", "200px")
				 .css("height", "200px");
				 $("#content").html("pos y: " + posy + "<br>pos x: " + posx);
  });
  $("a").mouseleave(function(e) {
		$("#hover").css("visibility","hidden");
	});
});
</script>

deze code geeft een positie x en y maar deze is van de eerste afbeelding en ik wil dat de waardes veranderen indien ik over de tweede en derde afbeelding ga.

bij voorbaat dank

Kris Peeters

21-01-2013 14:26

Wat je vooral moet onthouden, is het begrip this.
Bij een onClick, onHover, onMouseover, ... definieer je een functie.
In die functie heb je steeds een variabele this ter beschikking. Die this is dan enkel en alleen het element dat aangesproken is.

In jouw geval: $('a').mouseover
Wanneer de functie wordt uitgevoerd, weet je dat this een <a> element zal zijn en dat het enkel dat element is waar de gebruiker over staat.


$(document).ready(function() {
  $("a").mouseover(function() {
    // het aangesproken element heet binnen deze functie: this
    // dit is hier dus de link waar de gebruiker over staat (de cursor...)
    var img = $(this).find('img');  // => zoek naar een <img> die genest is in deze <a>, war de gebruiker zijn muis over staat.
    var offset = $(img).offset();
    var posx = offset.left;
    var posy = offset.top;
    $("#hover")
      .css("visibility","visible")    
      .css("top", "450px")
      .css("left", "370px")
      .css("width", "200px")
      .css("height", "200px");
    $("#content").html("pos y: " + posy + "<br>pos x: " + posx);
  });
  $("a").mouseleave(function(e) {
    $("#hover").css("visibility","hidden");
  });
});

arend b

21-01-2013 20:24 gewijzigd op 21-01-2013 20:24

bedankt voor je reactie ik heb het zelf op deze manier opgelost.
Vergeten te posten hier.


<script>
$(document).ready(function(){
  $("a").mouseover(function(){
	  var naam = "img" + $(this).attr("rel");
	  var img = $("img[name=" + naam+ "]").offset();
	  var posx = img.left;
	  var posy = img.top;
	  $("#hover")
	  			 .css("visibility","visible")	
	  			 .css("bottom", posy)
				 .css("left", posx)
				 .css("width", "200px")
				 .css("height", "200px");
  });
  $("a").mouseleave(function(e) {
		$("#hover").css("visibility","hidden");
	});
});
</script>

Reageren

Inloggen om te reageren