Undrar om det är omöjligt för en fullständig novis att få till följande:
Jag pekar på en LITEN bild, och får en ANNAN och STÖRRE bild som följer muspekaren.Har studerat sidor från "Dynamic drive", "Walter Zorn" med flera
men ser frågetecknen hopa sej var och hur jag ska ändra och anpassa. Eller finns det någon rejält pedagogisk anvisning, alternativt någon hjälpsam själ att maila om (eller rättare sagt när) det inte fungerar.
Får jag bara EN bildfunktion riktig så vore det väl katten om det inte skulle fungera på 2, 3, många bilder.
Mouse over tooltip
2 svar · 706 visningar · startad av gorane
Vi får nog ta det lite steg för steg...
Börja med att placera den större bilden i en div och ge denna div stilen "position: absolute;" samt "visibility: hidden;". Det innebär att den kommer att lägga sig ovanpå allt annat, men inte visas från början. Ge div:en ett id också så det blir lättare att anropa den via Javascript:
<div id="tt"><img src="dinbild.jpg"></div>
CSS-koden så långt:
<head>
<style type="text/css">
#tt
{
position: absolute;
visibility: hidden;
}
</style>
<title>Titel</title>
</head>
Nästa steg blir att visa den när musen placeras över den lilla bilden. För att uppnå det lägger du in onmouseover i den img-taggen:
<img src="litenbild.jpg" alt="" onmouseover="document.getElementById('tt').style.visibility = 'visible';">
Och slutligen ville du att den skulle följa med musen...
Det vi behöver göra då är att få reda på när musen förflyttar sig och till vilken position, och därefter flytta diven som bilden ligger i...
För att få reda på när musen flyttar sig så bestämmer man först på vilken del av sidan man vill få reda på det, i ditt fall antagligen hela sidan, dvs body, och då lägger vi in en onmousemove på body:
<body onmousemove="mm(event);">
Då kommer alltså funktionen mm att anropas, och i den så ska vi ta reda på vart muspekaren har flyttats. Tyvärr skiljer sig detta lite åt mellan olika webbläsare så därför ber jag dig bara ta den här koden och lägga den mellan <head> och </head>
<script type="text/javascript">
function mm(event)
{
e = event || window.event;
if (e.pageX || e.pageY)
{
mX = e.pageX;
mY = e.pageY;
}
else
{
mX = e.clientX + document.body.scrollLeft - document.body.clientLeft;
mY = e.clientY + document.body.scrollTop - document.body.clientTop;
}
Nu vet vi var muspekaren är, alltså på positionen mX och mY och allt vi behöver göra nu är att flytta diven dit... (fortsättning på ovanstående)
document.getElementById('tt').style.top = mY + "px";
document.getElementById('tt').style.left = mX + "px";
}
</script>
Du skrev inte när du ville att den större bilden skulle försvinna, så jag lämnar väl det som en övning... men koden för att släcka den är i alla fall document.getElementById('tt').style.visibility = 'hidden';