VNC stopt er mee :(
jquery position van een class krijgen
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?
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<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>
<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
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.
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
$(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");
});
});
$("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");
});
});
Vergeten te posten hier.
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<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>
$(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>
Gewijzigd op 21/01/2013 20:24:53 door arend b