E evilaid Medlem sedan apr. 2009 433 inlägg Frågan 2 aug. 2011 08:27 #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
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).
Danne V Medlem sedan aug. 2006 8 090 inlägg "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
E evilaid Medlem sedan apr. 2009 433 inlägg 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..
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
E evilaid Medlem sedan apr. 2009 433 inlägg Yepp, en liten enkel tooltip jag vill ha..
provade så här
http://jsbin.com/usanin/7/
men det händer ignet?
För du har ingen bild, du behöver en källa till bilden.
E evilaid Medlem sedan apr. 2009 433 inlägg men det gick ju innan utan att ha en bild?
E evilaid Medlem sedan apr. 2009 433 inlägg Såg ditt sista exempel nu, fungerar kanon...
börjar gillar jquery :)
Glöm inte sätt din(a) trådar som lösta om de har löst dina problem.