webForumDet fria alternativet

VIsa lager där muspekare är

JavaScript

9 svar · 1 213 visningar · startad av evilaid

Medlem sedan apr. 2009433 inlägg
Frågan#1

Hej..

HUr löser man på en smidigt sätt så att om man för musen över en bild så visas ett dolt lager? tanken är också att lagret visas på de kordinater som markören befinner sig på..
Snyggast hade ju varit att lösa med jquery men jag hittade inte specifikt den lösning?

Mvh

Medlem sedan juni 20019 519 inlägg
#2

Du få ta reda på var musen befinner sig när du väljer att visa lagret, är inte direkt svårt bara kolla event.pageX och event.pageY på exempelvis eventet mousedown (och kolla vilken musknapp du tryckte på) på body elementet. Och om du skall ha det på höger musknapp (så få du stänga av contextmenu).

Medlem sedan aug. 20068 090 inlägg
#3

"Lager"? Syftar du på Netscapes 15 år gamla term eller att Macromedia på sin tid kallade absolut positionerade divvar för "lager"? ;)

Den klassiska lösningen är väl det som ofta kallas för "tooltip" (javascript): http://search.yippy.com/search?input-form=clusty-simple&v%3Asources=webplus&v%3Aproject=clusty&query=dhtml+tooltip

Medlem sedan apr. 2009433 inlägg
#4

Okey, jag tänkte att det skulle vara lite snygagre med jquery så jag har suttit och krånglat lite med det nu, fick till detta..

http://jsbin.com/usanin/5/

nu visas och döljs lagret men jag vill också att det ska följa markörern när den rör på sig inom bilden?

Jajamen, jag är lite mer oldschool så jag kör med lager..

Medlem sedan juni 20019 519 inlägg
#5

Jag kör med: http://jsbin.com/uguwuy

Eller är det bara en enkel tooltip du är ute efter? i så fall måste du bindar mousemove eventet på din bild också.

$(document).ready(function(){
	$('.image').mouseover(function() {
		var img = $("img:first", this),
			p = $("p:first", this).show();

		img.bind("mousemove", function(e) {
			p.css({
				left: e.pageX+10,
				top: e.pageY+10
			});
		});
	}).mouseout(function() {
		var p = $("p:first", this).hide(),
			img = $("img:first", this).unbind("mousemove");
	});
});

på ditt html kod.

http://jsbin.com/usanin/6/edit

ändrade lite till något mer passande kanske: http://jsbin.com/usanin/8/edit

Medlem sedan apr. 2009433 inlägg
#6

Yepp, en liten enkel tooltip jag vill ha..

provade så här
http://jsbin.com/usanin/7/

men det händer ignet?

Medlem sedan juni 20019 519 inlägg
#7

För du har ingen bild, du behöver en källa till bilden.

Medlem sedan apr. 2009433 inlägg
#8

men det gick ju innan utan att ha en bild?

Medlem sedan apr. 2009433 inlägg
#9

Såg ditt sista exempel nu, fungerar kanon...
börjar gillar jquery :)

Medlem sedan juni 20019 519 inlägg
#10

Glöm inte sätt din(a) trådar som lösta om de har löst dina problem.

264 ms totalt · 4 externa anrop · v20260731065814-full.6fe65c25
125 ms — deklarationer (db)
0 ms — hämta statistik (cache)
136 ms — hämta tråd, inlägg och bilagor (db)
117 ms — ändringar (db)